@moontra/moonui-pro 2.0.22 → 2.1.0

package/src/components/health-check/index.tsx

@@ -0,0 +1,441 @@
+"use client"
+
+import React, { useState, useEffect, useCallback } from "react"
+import { motion, AnimatePresence } from "framer-motion"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"
+import { Button } from "../ui/button"
+import { Badge } from "../ui/badge"
+import { Progress } from "../ui/progress"
+import { cn } from "../../lib/utils"
+import { 
+  Activity, 
+  CheckCircle, 
+  XCircle, 
+  AlertCircle, 
+  Clock, 
+  Zap, 
+  Globe, 
+  Database, 
+  Server,
+  Lock,
+  Sparkles,
+  RefreshCw,
+  TrendingUp,
+  Timer
+} from "lucide-react"
+import { useSubscription } from "../../hooks/use-subscription"
+
+export interface HealthCheckEndpoint {
+  id: string
+  name: string
+  url: string
+  method: "GET" | "POST" | "PUT" | "DELETE" | "HEAD"
+  expectedStatus?: number[]
+  timeout?: number
+  headers?: Record<string, string>
+  body?: string
+  critical?: boolean
+}
+
+export interface HealthCheckResult {
+  id: string
+  name: string
+  status: "healthy" | "unhealthy" | "warning" | "pending"
+  responseTime: number
+  statusCode?: number
+  error?: string
+  timestamp: Date
+  uptime?: number
+}
+
+export interface HealthCheckProps {
+  endpoints: HealthCheckEndpoint[]
+  interval?: number
+  autoRefresh?: boolean
+  showResponseTime?: boolean
+  showUptime?: boolean
+  showHistory?: boolean
+  maxHistory?: number
+  onStatusChange?: (results: HealthCheckResult[]) => void
+  className?: string
+}
+
+const HealthCheckInternal: React.FC<HealthCheckProps> = ({
+  endpoints,
+  interval = 30000, // 30 seconds
+  autoRefresh = true,
+  showResponseTime = true,
+  showUptime = true,
+  showHistory = true,
+  maxHistory = 20,
+  onStatusChange,
+  className
+}) => {
+  const [results, setResults] = useState<HealthCheckResult[]>([])
+  const [history, setHistory] = useState<Record<string, HealthCheckResult[]>>({})
+  const [isChecking, setIsChecking] = useState(false)
+  const [lastCheck, setLastCheck] = useState<Date | null>(null)
+
+  const checkEndpoint = async (endpoint: HealthCheckEndpoint): Promise<HealthCheckResult> => {
+    const startTime = Date.now()
+    
+    try {
+      const controller = new AbortController()
+      const timeoutId = setTimeout(() => controller.abort(), endpoint.timeout || 5000)
+
+      const response = await fetch(endpoint.url, {
+        method: endpoint.method,
+        headers: {
+          'Content-Type': 'application/json',
+          ...endpoint.headers
+        },
+        body: endpoint.body,
+        signal: controller.signal
+      })
+
+      clearTimeout(timeoutId)
+      const responseTime = Date.now() - startTime
+      const expectedStatuses = endpoint.expectedStatus || [200, 201, 204]
+      
+      const isHealthy = expectedStatuses.includes(response.status)
+      
+      return {
+        id: endpoint.id,
+        name: endpoint.name,
+        status: isHealthy ? "healthy" : "unhealthy",
+        responseTime,
+        statusCode: response.status,
+        timestamp: new Date()
+      }
+    } catch (error) {
+      const responseTime = Date.now() - startTime
+      
+      return {
+        id: endpoint.id,
+        name: endpoint.name,
+        status: "unhealthy",
+        responseTime,
+        error: error instanceof Error ? error.message : "Unknown error",
+        timestamp: new Date()
+      }
+    }
+  }
+
+  const checkAllEndpoints = useCallback(async () => {
+    setIsChecking(true)
+    
+    try {
+      const checks = endpoints.map(endpoint => checkEndpoint(endpoint))
+      const newResults = await Promise.all(checks)
+      
+      setResults(newResults)
+      setLastCheck(new Date())
+      
+      // Update history
+      setHistory(prevHistory => {
+        const newHistory = { ...prevHistory }
+        
+        newResults.forEach(result => {
+          if (!newHistory[result.id]) {
+            newHistory[result.id] = []
+          }
+          
+          newHistory[result.id] = [
+            result,
+            ...newHistory[result.id].slice(0, maxHistory - 1)
+          ]
+        })
+        
+        return newHistory
+      })
+      
+      onStatusChange?.(newResults)
+    } catch (error) {
+      console.error("Health check failed:", error)
+    } finally {
+      setIsChecking(false)
+    }
+  }, [endpoints, maxHistory, onStatusChange])
+
+  // Initial check
+  useEffect(() => {
+    checkAllEndpoints()
+  }, [checkAllEndpoints])
+
+  // Auto refresh
+  useEffect(() => {
+    if (!autoRefresh) return
+
+    const intervalId = setInterval(checkAllEndpoints, interval)
+    return () => clearInterval(intervalId)
+  }, [autoRefresh, interval, checkAllEndpoints])
+
+  const getOverallStatus = (): "healthy" | "unhealthy" | "warning" => {
+    if (results.length === 0) return "warning"
+    
+    const criticalEndpoints = endpoints.filter(e => e.critical !== false)
+    const criticalResults = results.filter(r => 
+      criticalEndpoints.some(e => e.id === r.id)
+    )
+    
+    const hasUnhealthy = criticalResults.some(r => r.status === "unhealthy")
+    const hasWarning = results.some(r => r.status === "warning")
+    
+    if (hasUnhealthy) return "unhealthy"
+    if (hasWarning) return "warning"
+    return "healthy"
+  }
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case "healthy":
+        return <CheckCircle className="h-4 w-4 text-green-500" />
+      case "unhealthy":
+        return <XCircle className="h-4 w-4 text-red-500" />
+      case "warning":
+        return <AlertCircle className="h-4 w-4 text-yellow-500" />
+      default:
+        return <Clock className="h-4 w-4 text-gray-500" />
+    }
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case "healthy":
+        return "bg-green-500"
+      case "unhealthy":
+        return "bg-red-500"
+      case "warning":
+        return "bg-yellow-500"
+      default:
+        return "bg-gray-500"
+    }
+  }
+
+  const formatResponseTime = (time: number) => {
+    if (time < 1000) return `${time}ms`
+    return `${(time / 1000).toFixed(2)}s`
+  }
+
+  const calculateUptime = (endpointId: string): number => {
+    const endpointHistory = history[endpointId] || []
+    if (endpointHistory.length === 0) return 0
+    
+    const healthyCount = endpointHistory.filter(r => r.status === "healthy").length
+    return (healthyCount / endpointHistory.length) * 100
+  }
+
+  const overallStatus = getOverallStatus()
+  const healthyCount = results.filter(r => r.status === "healthy").length
+  const overallUptime = results.length > 0 
+    ? results.reduce((acc, result) => acc + calculateUptime(result.id), 0) / results.length
+    : 0
+
+  return (
+    <Card className={cn("w-full", className)}>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="flex items-center gap-2">
+              <Activity className="h-6 w-6" />
+              <div>
+                <CardTitle className="flex items-center gap-2">
+                  System Health
+                  <Badge 
+                    variant={overallStatus === "healthy" ? "default" : "destructive"}
+                    className={cn(
+                      "text-white",
+                      overallStatus === "healthy" && "bg-green-500",
+                      overallStatus === "warning" && "bg-yellow-500",
+                      overallStatus === "unhealthy" && "bg-red-500"
+                    )}
+                  >
+                    {overallStatus.toUpperCase()}
+                  </Badge>
+                </CardTitle>
+                {lastCheck && (
+                  <CardDescription>
+                    Last checked: {lastCheck.toLocaleTimeString()}
+                  </CardDescription>
+                )}
+              </div>
+            </div>
+          </div>
+          
+          <div className="flex items-center gap-2">
+            {showUptime && (
+              <div className="text-right">
+                <div className="text-sm font-medium">{overallUptime.toFixed(1)}%</div>
+                <div className="text-xs text-muted-foreground">Uptime</div>
+              </div>
+            )}
+            
+            <Button
+              onClick={checkAllEndpoints}
+              disabled={isChecking}
+              variant="outline"
+              size="sm"
+            >
+              <RefreshCw className={cn("h-4 w-4", isChecking && "animate-spin")} />
+            </Button>
+          </div>
+        </div>
+
+        {/* Overall Stats */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
+          <div className="text-center">
+            <div className="text-2xl font-bold text-green-500">{healthyCount}</div>
+            <div className="text-xs text-muted-foreground">Healthy</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-red-500">
+              {results.filter(r => r.status === "unhealthy").length}
+            </div>
+            <div className="text-xs text-muted-foreground">Unhealthy</div>
+          </div>
+          {showResponseTime && (
+            <div className="text-center">
+              <div className="text-lg font-bold">
+                {results.length > 0 
+                  ? formatResponseTime(
+                      results.reduce((acc, r) => acc + r.responseTime, 0) / results.length
+                    )
+                  : "0ms"
+                }
+              </div>
+              <div className="text-xs text-muted-foreground">Avg Response</div>
+            </div>
+          )}
+          <div className="text-center">
+            <div className="text-lg font-bold">{results.length}</div>
+            <div className="text-xs text-muted-foreground">Services</div>
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent>
+        <div className="space-y-4">
+          <AnimatePresence>
+            {results.map((result, index) => (
+              <motion.div
+                key={result.id}
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: 20 }}
+                transition={{ delay: index * 0.05 }}
+              >
+                <Card>
+                  <CardContent className="p-4">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-3">
+                        {getStatusIcon(result.status)}
+                        <div>
+                          <div className="font-medium">{result.name}</div>
+                          {result.error && (
+                            <div className="text-sm text-red-500">{result.error}</div>
+                          )}
+                          {result.statusCode && (
+                            <div className="text-xs text-muted-foreground">
+                              HTTP {result.statusCode}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                      
+                      <div className="flex items-center gap-4 text-sm">
+                        {showResponseTime && (
+                          <div className="text-right">
+                            <div className="font-medium">
+                              {formatResponseTime(result.responseTime)}
+                            </div>
+                            <div className="text-xs text-muted-foreground">Response</div>
+                          </div>
+                        )}
+                        
+                        {showUptime && (
+                          <div className="text-right">
+                            <div className="font-medium">
+                              {calculateUptime(result.id).toFixed(1)}%
+                            </div>
+                            <div className="text-xs text-muted-foreground">Uptime</div>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                    
+                    {/* Mini history chart */}
+                    {showHistory && history[result.id] && (
+                      <div className="mt-3">
+                        <div className="flex items-center gap-1 h-2">
+                          {history[result.id].slice(0, 20).reverse().map((historyResult, i) => (
+                            <div
+                              key={i}
+                              className={cn(
+                                "flex-1 h-full rounded-sm",
+                                getStatusColor(historyResult.status)
+                              )}
+                            />
+                          ))}
+                        </div>
+                        <div className="text-xs text-muted-foreground mt-1">
+                          Last {Math.min(history[result.id].length, 20)} checks
+                        </div>
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </AnimatePresence>
+
+          {results.length === 0 && !isChecking && (
+            <div className="text-center py-8">
+              <Server className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+              <p className="text-muted-foreground">No endpoints configured</p>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export const HealthCheck: React.FC<HealthCheckProps> = ({ className, ...props }) => {
+  // Check if we're in docs mode or have pro access
+  const docsProAccess = { hasAccess: true } // Pro access assumed in package
+  const { hasProAccess, isLoading } = useSubscription()
+  
+  // In docs mode, always show the component
+  const canShowComponent = docsProAccess.isDocsMode || hasProAccess
+  
+  // If not in docs mode and no pro access, show upgrade prompt
+  if (!docsProAccess.isDocsMode && !isLoading && !hasProAccess) {
+    return (
+      <Card className={cn("w-fit", className)}>
+        <CardContent className="py-6 text-center">
+          <div className="space-y-4">
+            <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto">
+              <Lock className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+            </div>
+            <div>
+              <h3 className="font-semibold text-sm mb-2">Pro Feature</h3>
+              <p className="text-muted-foreground text-xs mb-4">
+                Health Check is available exclusively to MoonUI Pro subscribers.
+              </p>
+              <a href="/pricing">
+                <Button size="sm">
+                  <Sparkles className="mr-2 h-4 w-4" />
+                  Upgrade to Pro
+                </Button>
+              </a>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return <HealthCheckInternal className={className} {...props} />
+}
+
+export type { HealthCheckEndpoint, HealthCheckResult, HealthCheckProps }

package/src/components/hover-card-3d/index.tsx

@@ -0,0 +1,170 @@
+"use client"
+
+import React, { useRef, useState } from "react"
+import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"
+import { cn } from "../../lib/utils"
+import { Card, CardContent } from "../ui/card"
+import { Button } from "../ui/button"
+import { Lock, Sparkles } from "lucide-react"
+import { useSubscription } from "../../hooks/use-subscription"
+
+export interface HoverCard3DProps extends React.HTMLAttributes<HTMLDivElement> {
+  perspective?: number
+  rotationIntensity?: number
+  springConfig?: {
+    stiffness?: number
+    damping?: number
+  }
+}
+
+const HoverCard3DInternal = React.forwardRef<HTMLDivElement, HoverCard3DProps>(
+  ({ 
+    children, 
+    className, 
+    perspective = 1000,
+    rotationIntensity = 15,
+    springConfig = { stiffness: 200, damping: 15 },
+    ...props 
+  }, ref) => {
+    const cardRef = useRef<HTMLDivElement>(null)
+    const [isHovered, setIsHovered] = useState(false)
+
+    const x = useMotionValue(0)
+    const y = useMotionValue(0)
+
+    const springX = useSpring(x, springConfig)
+    const springY = useSpring(y, springConfig)
+
+    const rotateX = useTransform(springY, [-0.5, 0.5], [rotationIntensity, -rotationIntensity])
+    const rotateY = useTransform(springX, [-0.5, 0.5], [-rotationIntensity, rotationIntensity])
+
+    const handleMouseMove = (e: React.MouseEvent) => {
+      if (!cardRef.current) return
+
+      const rect = cardRef.current.getBoundingClientRect()
+      const centerX = rect.left + rect.width / 2
+      const centerY = rect.top + rect.height / 2
+
+      const rotateXValue = (e.clientY - centerY) / (rect.height / 2)
+      const rotateYValue = (e.clientX - centerX) / (rect.width / 2)
+
+      x.set(rotateYValue)
+      y.set(rotateXValue)
+    }
+
+    const handleMouseEnter = () => {
+      setIsHovered(true)
+    }
+
+    const handleMouseLeave = () => {
+      setIsHovered(false)
+      x.set(0)
+      y.set(0)
+    }
+
+    return (
+      <motion.div
+        ref={(node) => {
+          cardRef.current = node
+          if (typeof ref === "function") {
+            ref(node)
+          } else if (ref) {
+            ref.current = node
+          }
+        }}
+        className={cn(
+          "relative rounded-lg border bg-card text-card-foreground shadow-sm transition-colors duration-200 hover:bg-card/90",
+          className
+        )}
+        onMouseMove={handleMouseMove}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        style={{
+          transformPerspective: perspective,
+          transformStyle: "preserve-3d",
+        }}
+        animate={{
+          rotateX: isHovered ? rotateX : 0,
+          rotateY: isHovered ? rotateY : 0,
+          scale: isHovered ? 1.05 : 1,
+        }}
+        transition={{ duration: 0.15 }}
+        {...props}
+      >
+        <motion.div
+          className="relative z-10"
+          animate={{
+            z: isHovered ? 20 : 0,
+          }}
+          transition={{ duration: 0.2 }}
+        >
+          {children}
+        </motion.div>
+
+        {/* Gradient overlay */}
+        <motion.div
+          className="absolute inset-0 rounded-lg bg-gradient-to-br from-white/5 via-transparent to-black/5 pointer-events-none"
+          animate={{
+            opacity: isHovered ? 1 : 0,
+          }}
+          transition={{ duration: 0.3 }}
+        />
+
+        {/* Glow effect */}
+        <motion.div
+          className="absolute inset-0 rounded-lg bg-primary/5 blur-xl"
+          animate={{
+            opacity: isHovered ? 0.8 : 0,
+            scale: isHovered ? 1.2 : 1,
+          }}
+          transition={{ duration: 0.3 }}
+          style={{ zIndex: -1 }}
+        />
+      </motion.div>
+    )
+  }
+)
+
+HoverCard3DInternal.displayName = "HoverCard3DInternal"
+
+export const HoverCard3D = React.forwardRef<HTMLDivElement, HoverCard3DProps>(
+  ({ className, ...props }, ref) => {
+    // Check if we're in docs mode or have pro access
+    const docsProAccess = { hasAccess: true } // Pro access assumed in package
+    const { hasProAccess, isLoading } = useSubscription()
+    
+    // In docs mode, always show the component
+    const canShowComponent = docsProAccess.isDocsMode || hasProAccess
+    
+    // If not in docs mode and no pro access, show upgrade prompt
+    if (!docsProAccess.isDocsMode && !isLoading && !hasProAccess) {
+      return (
+        <Card className={cn("w-fit", className)}>
+          <CardContent className="py-6 text-center">
+            <div className="space-y-4">
+              <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto">
+                <Lock className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-sm mb-2">Pro Feature</h3>
+                <p className="text-muted-foreground text-xs mb-4">
+                  3D Hover Card is available exclusively to MoonUI Pro subscribers.
+                </p>
+                <a href="/pricing">
+                  <Button size="sm">
+                    <Sparkles className="mr-2 h-4 w-4" />
+                    Upgrade to Pro
+                  </Button>
+                </a>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )
+    }
+
+    return <HoverCard3DInternal className={className} ref={ref} {...props} />
+  }
+)
+
+HoverCard3D.displayName = "HoverCard3D"

package/src/components/index.ts

@@ -0,0 +1,76 @@
+// Pro Components Export - Source of Truth: packages/moonui-pro
+
+// Animated Button
+export * from "./animated-button"
+
+// Error Boundary
+export * from "./error-boundary"
+
+// Floating Action Button
+export * from "./floating-action-button"
+
+// Hover Card 3D
+export * from "./hover-card-3d"
+
+// Magnetic Button
+export * from "./magnetic-button"
+
+// Pinch Zoom
+export * from "./pinch-zoom"
+
+// Spotlight Card
+export * from "./spotlight-card"
+
+// Calendar
+export * from "./calendar"
+
+// Kanban
+export * from "./kanban"
+
+// Rich Text Editor
+export * from "./rich-text-editor"
+
+// Memory Efficient Data
+export * from "./memory-efficient-data"
+
+// Virtual List
+export * from "./virtual-list"
+
+// Swipeable Card
+export * from "./swipeable-card"
+
+// Timeline
+export * from "./timeline"
+
+// Advanced Chart
+export * from "./advanced-chart"
+
+// Dashboard
+export * from "./dashboard"
+
+// Draggable List
+export * from "./draggable-list"
+
+// Advanced Forms
+export * from "./advanced-forms"
+
+// Color Picker
+export * from "./color-picker"
+
+// GitHub Stars
+export * from "./github-stars"
+
+// Health Check
+export * from "./health-check"
+
+// Lazy Component
+export * from "./lazy-component"
+
+// Optimized Image
+export * from "./optimized-image"
+
+// Performance Debugger
+export * from "./performance-debugger"
+
+// Performance Monitor
+export * from "./performance-monitor"