@wakastellar/ui 2.1.2 → 2.3.2

package/src/components/index.ts

@@ -366,3 +366,286 @@ export {
   type UseTooltipTourOptions,
   type UseTooltipTourReturn,
 } from './waka-tooltip-tour'
+
+// DevOps - Monitoring & Logs Components
+export {
+  WakaLogViewer,
+  defaultLogs,
+  type LogEntry,
+  type LogLevel as WakaLogLevel,
+  type WakaLogViewerProps,
+} from './waka-log-viewer'
+
+export {
+  WakaTraceViewer,
+  defaultTraceSpans,
+  type TraceSpan,
+  type SpanStatus,
+  type WakaTraceViewerProps,
+} from './waka-trace-viewer'
+
+export {
+  WakaAlertPanel,
+  defaultAlerts as defaultPanelAlerts,
+  type Alert as WakaPanelAlert,
+  type AlertSeverity as WakaPanelAlertSeverity,
+  type AlertStatus as WakaPanelAlertStatus,
+  type WakaAlertPanelProps,
+} from './waka-alert-panel'
+
+// DevOps - Containers & Kubernetes Components
+export {
+  WakaContainerList,
+  defaultContainers,
+  type Container,
+  type ContainerStatus as WakaContainerStatus,
+  type ContainerResource,
+  type WakaContainerListProps,
+} from './waka-container-list'
+
+export {
+  WakaKubernetesOverview,
+  defaultK8sNodes,
+  defaultK8sPods,
+  defaultK8sDeployments,
+  defaultK8sServices,
+  defaultK8sNamespaces,
+  type K8sNode,
+  type K8sPod,
+  type K8sDeployment,
+  type K8sService,
+  type K8sNamespace,
+  type NodeStatus as K8sNodeStatus,
+  type PodPhase as K8sPodPhase,
+  type DeploymentStatus as K8sDeploymentStatus,
+  type WakaKubernetesOverviewProps,
+} from './waka-kubernetes-overview'
+
+export {
+  WakaPodCard,
+  defaultPodDetails,
+  type PodDetails,
+  type PodContainer,
+  type PodEvent,
+  type PodPhase,
+  type ContainerState,
+  type WakaPodCardProps,
+} from './waka-pod-card'
+
+export {
+  WakaServiceGraph,
+  defaultServices,
+  defaultConnections,
+  type ServiceNode,
+  type ServiceConnection,
+  type ServiceHealth,
+  type ServiceType,
+  type WakaServiceGraphProps,
+} from './waka-service-graph'
+
+// DevOps - CI/CD Components
+export {
+  WakaBuildMatrix,
+  defaultBuildMatrixColumns,
+  defaultBuildMatrixRows,
+  type BuildMatrixRow,
+  type BuildCell,
+  type BuildStatus as WakaBuildStatus,
+  type WakaBuildMatrixProps,
+} from './waka-build-matrix'
+
+export {
+  WakaTestReport,
+  defaultTestSuites,
+  defaultCoverage,
+  type TestSuite,
+  type TestCase,
+  type CoverageReport,
+  type TestStatus,
+  type WakaTestReportProps,
+} from './waka-test-report'
+
+export {
+  WakaArtifactList,
+  defaultArtifacts,
+  type Artifact,
+  type WakaArtifactListProps,
+} from './waka-artifact-list'
+
+export {
+  WakaSecurityScanResult,
+  defaultVulnerabilities,
+  type Vulnerability,
+  type VulnerabilitySeverity,
+  type ScanType,
+  type ScanSummary,
+  type WakaSecurityScanResultProps,
+} from './waka-security-scan-result'
+
+export {
+  WakaDependencyTree,
+  defaultDependencies,
+  type Dependency,
+  type DependencyType,
+  type VulnSeverity as DependencyVulnSeverity,
+  type WakaDependencyTreeProps,
+} from './waka-dependency-tree'
+
+// DevOps - Configuration Components
+export {
+  WakaEnvVarEditor,
+  defaultEnvVariables,
+  type EnvVariable,
+  type WakaEnvVarEditorProps,
+} from './waka-env-var-editor'
+
+export {
+  WakaSecretCard,
+  defaultSecret,
+  type Secret,
+  type SecretAccess,
+  type WakaSecretCardProps,
+} from './waka-secret-card'
+
+export {
+  WakaConfigComparator,
+  defaultConfigEnvironments,
+  type ConfigEnvironment,
+  type ConfigValue,
+  type ConfigDiff,
+  type DiffType,
+  type WakaConfigComparatorProps,
+} from './waka-config-comparator'
+
+export {
+  WakaFeatureFlagRow,
+  defaultFeatureFlags,
+  type FeatureFlag,
+  type FeatureFlagStatus,
+  type FeatureFlagSegment,
+  type WakaFeatureFlagRowProps,
+} from './waka-feature-flag-row'
+
+// DevOps - Database Components
+export {
+  WakaDatabaseCard,
+  defaultDatabase,
+  defaultDatabases,
+  type DatabaseInfo,
+  type DatabaseMetrics,
+  type DatabaseType as WakaDatabaseType,
+  type DatabaseStatus as WakaDatabaseStatus,
+  type ReplicationRole,
+  type WakaDatabaseCardProps,
+} from './waka-database-card'
+
+export {
+  WakaMigrationList,
+  defaultMigrations,
+  type Migration,
+  type MigrationStatus,
+  type WakaMigrationListProps,
+} from './waka-migration-list'
+
+export {
+  WakaQueryExplain,
+  defaultQueryPlan,
+  type QueryPlan,
+  type ExplainNode,
+  type NodeType,
+  type WakaQueryExplainProps,
+} from './waka-query-explain'
+
+// Advertising Components
+export {
+  WakaAdProvider,
+  useAdContext,
+  useAdVisibility,
+  useAdConsent,
+  useAdSlot,
+  AD_SIZES,
+  type AdNetwork,
+  type AdSize,
+  type AdPosition,
+  type AdSlot,
+  type AdConfig,
+  type AdEvent,
+  type CustomAd,
+} from './waka-ad-provider'
+
+export {
+  WakaAdBanner,
+  type WakaAdBannerProps,
+} from './waka-ad-banner'
+
+export {
+  WakaAdPlaceholder,
+  type WakaAdPlaceholderProps,
+} from './waka-ad-placeholder'
+
+export {
+  WakaAdFallback,
+  type WakaAdFallbackProps,
+  type AdFallbackVariant,
+} from './waka-ad-fallback'
+
+export {
+  WakaSponsoredBadge,
+  type WakaSponsoredBadgeProps,
+  type SponsoredBadgeVariant,
+  type SponsoredBadgeSize,
+} from './waka-sponsored-badge'
+
+export {
+  WakaAdSidebar,
+  type WakaAdSidebarProps,
+} from './waka-ad-sidebar'
+
+export {
+  WakaAdInline,
+  type WakaAdInlineProps,
+} from './waka-ad-inline'
+
+export {
+  WakaAdInterstitial,
+  type WakaAdInterstitialProps,
+} from './waka-ad-interstitial'
+
+export {
+  WakaAdStickyFooter,
+  type WakaAdStickyFooterProps,
+} from './waka-ad-sticky-footer'
+
+export {
+  WakaSponsoredCard,
+  type WakaSponsoredCardProps,
+  type SponsoredCardVariant,
+} from './waka-sponsored-card'
+
+export {
+  WakaSponsoredFeed,
+  type WakaSponsoredFeedProps,
+} from './waka-sponsored-feed'
+
+export {
+  WakaContentRecommendation,
+  type WakaContentRecommendationProps,
+  type RecommendationLayout,
+} from './waka-content-recommendation'
+
+export {
+  WakaVideoAd,
+  type WakaVideoAdProps,
+} from './waka-video-ad'
+
+export {
+  WakaOutstreamVideo,
+  type WakaOutstreamVideoProps,
+} from './waka-outstream-video'
+
+export {
+  WakaVideoOverlay,
+  type WakaVideoOverlayProps,
+  type OverlayPosition,
+  type OverlayTrigger,
+} from './waka-video-overlay'

package/src/components/waka-3d-pie-chart/index.tsx

@@ -127,18 +127,18 @@ export function Waka3DPieChart({
     })
   }, [data, total])
 
-  // Default colors
+  // Default colors - using CSS variables for theme support
   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))",
   ]
 
   const getSliceColor = (index: number, slice: PieSlice) => {

package/src/components/waka-achievement-unlock/index.tsx

@@ -73,41 +73,41 @@ 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",
   },
   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",
   },
   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",
   },
   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",
   },
 }

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

@@ -0,0 +1,275 @@
+"use client"
+
+import * as React from "react"
+import { useRef, useEffect, useState, useCallback } from "react"
+import { cn } from "../../utils/cn"
+import { useAdContext, useAdVisibility, AD_SIZES, type AdSize, type AdSlot, type CustomAd } from "../waka-ad-provider"
+import { WakaAdPlaceholder } from "../waka-ad-placeholder"
+import { WakaAdFallback } from "../waka-ad-fallback"
+import { WakaSponsoredBadge } from "../waka-sponsored-badge"
+
+export interface WakaAdBannerProps {
+  /** Unique slot ID */
+  slotId: string
+  /** Ad size preset */
+  size?: AdSize
+  /** Custom width (when size is "custom") */
+  customWidth?: number
+  /** Custom height (when size is "custom") */
+  customHeight?: number
+  /** GPT ad unit path (for GPT network) */
+  adUnitPath?: string
+  /** Targeting parameters */
+  targeting?: Record<string, string | string[]>
+  /** Auto-refresh interval in seconds (0 = disabled) */
+  refreshInterval?: number
+  /** Enable lazy loading */
+  lazyLoad?: boolean
+  /** Fallback content when no ad available */
+  fallback?: React.ReactNode
+  /** Show sponsored badge */
+  showBadge?: boolean
+  /** Badge position */
+  badgePosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
+  /** Custom class name */
+  className?: string
+  /** Callback when ad loads */
+  onLoad?: () => void
+  /** Callback when ad fails */
+  onError?: (error: Error) => void
+  /** Callback when ad is clicked */
+  onClick?: () => void
+}
+
+export function WakaAdBanner({
+  slotId,
+  size = "rectangle",
+  customWidth,
+  customHeight,
+  adUnitPath,
+  targeting,
+  refreshInterval = 0,
+  lazyLoad = true,
+  fallback,
+  showBadge = true,
+  badgePosition = "top-right",
+  className,
+  onLoad,
+  onError,
+  onClick,
+}: WakaAdBannerProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const { config, isReady, hasConsent, registerSlot, unregisterSlot, getCustomAd, trackEvent } = useAdContext()
+  const { isVisible } = useAdVisibility(containerRef)
+
+  const [status, setStatus] = useState<"loading" | "loaded" | "error" | "empty">("loading")
+  const [customAd, setCustomAd] = useState<CustomAd | null>(null)
+
+  const dimensions = size === "custom"
+    ? { width: customWidth || 300, height: customHeight || 250 }
+    : AD_SIZES[size]
+
+  // Register slot
+  useEffect(() => {
+    const slot: AdSlot = {
+      id: slotId,
+      network: config.network,
+      size,
+      position: "inline",
+      targeting,
+      refreshInterval,
+      lazyLoad,
+      customWidth,
+      customHeight,
+    }
+    registerSlot(slot)
+    return () => unregisterSlot(slotId)
+  }, [slotId, config.network, size, targeting, refreshInterval, lazyLoad, customWidth, customHeight, registerSlot, unregisterSlot])
+
+  // Load ad based on network type
+  const loadAd = useCallback(async () => {
+    if (!isReady || hasConsent === false) return
+
+    setStatus("loading")
+
+    try {
+      if (config.network === "gpt" && window.googletag && adUnitPath) {
+        // GPT implementation
+        window.googletag.cmd.push(() => {
+          const slot = window.googletag.defineSlot(
+            adUnitPath,
+            [dimensions.width, dimensions.height],
+            slotId
+          )
+
+          if (slot && targeting) {
+            Object.entries(targeting).forEach(([key, value]) => {
+              window.googletag.pubads().setTargeting(key, value)
+            })
+          }
+
+          window.googletag.enableServices()
+          window.googletag.display(slotId)
+        })
+
+        setStatus("loaded")
+        trackEvent({ type: "loaded", slotId, timestamp: new Date() })
+        onLoad?.()
+      } else if (config.network === "custom") {
+        // Custom ad server
+        const ad = await getCustomAd(slotId)
+        if (ad) {
+          setCustomAd(ad)
+          setStatus("loaded")
+          trackEvent({ type: "loaded", slotId, timestamp: new Date() })
+          onLoad?.()
+
+          // Fire impression tracking
+          if (ad.impressionUrl) {
+            fetch(ad.impressionUrl, { mode: "no-cors" }).catch(() => {})
+          }
+          ad.trackingPixels?.forEach((url) => {
+            const img = new Image()
+            img.src = url
+          })
+        } else {
+          setStatus("empty")
+          trackEvent({ type: "empty", slotId, timestamp: new Date() })
+        }
+      }
+    } catch (error) {
+      setStatus("error")
+      trackEvent({ type: "error", slotId, timestamp: new Date(), data: { error } })
+      onError?.(error as Error)
+    }
+  }, [isReady, hasConsent, config.network, adUnitPath, dimensions, slotId, targeting, getCustomAd, trackEvent, onLoad, onError])
+
+  // Initial load (with lazy loading support)
+  useEffect(() => {
+    if (lazyLoad) {
+      if (isVisible) {
+        loadAd()
+      }
+    } else {
+      loadAd()
+    }
+  }, [lazyLoad, isVisible, loadAd])
+
+  // Auto-refresh
+  useEffect(() => {
+    if (refreshInterval > 0 && status === "loaded" && isVisible) {
+      const interval = setInterval(() => {
+        loadAd()
+      }, refreshInterval * 1000)
+      return () => clearInterval(interval)
+    }
+  }, [refreshInterval, status, isVisible, loadAd])
+
+  // Track viewability
+  useEffect(() => {
+    if (isVisible && status === "loaded") {
+      trackEvent({ type: "viewable", slotId, timestamp: new Date() })
+    }
+  }, [isVisible, status, slotId, trackEvent])
+
+  const handleClick = () => {
+    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")
+    }
+  }
+
+  // Render based on status
+  const renderContent = () => {
+    if (hasConsent === false) {
+      return fallback || <WakaAdFallback width={dimensions.width} height={dimensions.height} />
+    }
+
+    if (status === "loading") {
+      return <WakaAdPlaceholder width={dimensions.width} height={dimensions.height} />
+    }
+
+    if (status === "error" || status === "empty") {
+      return fallback || <WakaAdFallback width={dimensions.width} height={dimensions.height} />
+    }
+
+    // GPT renders into the div directly
+    if (config.network === "gpt") {
+      return null
+    }
+
+    // Custom ad rendering
+    if (customAd) {
+      return (
+        <button
+          onClick={handleClick}
+          className="relative w-full h-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary"
+        >
+          {customAd.imageUrl && (
+            <img
+              src={customAd.imageUrl}
+              alt={customAd.title || "Advertisement"}
+              className="w-full h-full object-cover"
+            />
+          )}
+          {customAd.title && !customAd.imageUrl && (
+            <div className="flex flex-col items-center justify-center h-full p-4 bg-muted">
+              <p className="font-semibold text-center">{customAd.title}</p>
+              {customAd.description && (
+                <p className="text-sm text-muted-foreground text-center mt-1">{customAd.description}</p>
+              )}
+              {customAd.cta && (
+                <span className="mt-2 px-4 py-1 bg-primary text-primary-foreground rounded text-sm">
+                  {customAd.cta}
+                </span>
+              )}
+            </div>
+          )}
+        </button>
+      )
+    }
+
+    return null
+  }
+
+  const badgePositionClasses = {
+    "top-left": "top-1 left-1",
+    "top-right": "top-1 right-1",
+    "bottom-left": "bottom-1 left-1",
+    "bottom-right": "bottom-1 right-1",
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      id={slotId}
+      className={cn(
+        "relative overflow-hidden bg-muted/20 border border-border/50 rounded-md",
+        className
+      )}
+      style={{
+        width: dimensions.width,
+        height: dimensions.height,
+        maxWidth: "100%",
+      }}
+      data-ad-slot={slotId}
+      data-ad-size={size}
+      data-ad-status={status}
+    >
+      {renderContent()}
+
+      {showBadge && status === "loaded" && (
+        <div className={cn("absolute z-10", badgePositionClasses[badgePosition])}>
+          <WakaSponsoredBadge sponsor={customAd?.sponsor} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default WakaAdBanner