@moontra/moonui-pro 2.0.22 → 2.1.0

package/src/components/lazy-component/index.tsx

@@ -0,0 +1,342 @@
+"use client"
+
+import React, { useState, useEffect, useRef, Suspense } from "react"
+import { motion } from "framer-motion"
+import { Card, CardContent } from "../ui/card"
+import { Button } from "../ui/button"
+import { Skeleton } from "@moontra/moonui"
+import { cn } from "../../lib/utils"
+import { Eye, Loader2, Lock, Sparkles, RefreshCw } from "lucide-react"
+import { useSubscription } from "../../hooks/use-subscription"
+
+export interface LazyComponentProps {
+  children: React.ReactNode
+  fallback?: React.ReactNode
+  threshold?: number
+  rootMargin?: string
+  triggerOnce?: boolean
+  disabled?: boolean
+  onLoad?: () => void
+  onVisible?: () => void
+  showLoadingState?: boolean
+  delay?: number
+  className?: string
+}
+
+const LazyComponentInternal: React.FC<LazyComponentProps> = ({
+  children,
+  fallback,
+  threshold = 0.1,
+  rootMargin = "50px",
+  triggerOnce = true,
+  disabled = false,
+  onLoad,
+  onVisible,
+  showLoadingState = true,
+  delay = 0,
+  className
+}) => {
+  const [isVisible, setIsVisible] = useState(disabled)
+  const [isLoaded, setIsLoaded] = useState(disabled)
+  const [hasTriggered, setHasTriggered] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (disabled) {
+      setIsVisible(true)
+      setIsLoaded(true)
+      return
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && (!triggerOnce || !hasTriggered)) {
+          if (delay > 0) {
+            setTimeout(() => {
+              setIsVisible(true)
+              setHasTriggered(true)
+              onVisible?.()
+              
+              // Simulate loading delay
+              setTimeout(() => {
+                setIsLoaded(true)
+                onLoad?.()
+              }, delay)
+            }, 100)
+          } else {
+            setIsVisible(true)
+            setIsLoaded(true)
+            setHasTriggered(true)
+            onVisible?.()
+            onLoad?.()
+          }
+        } else if (!entry.isIntersecting && !triggerOnce) {
+          setIsVisible(false)
+          setIsLoaded(false)
+        }
+      },
+      {
+        threshold,
+        rootMargin
+      }
+    )
+
+    if (containerRef.current) {
+      observer.observe(containerRef.current)
+    }
+
+    return () => {
+      if (containerRef.current) {
+        observer.unobserve(containerRef.current)
+      }
+    }
+  }, [threshold, rootMargin, triggerOnce, delay, disabled, hasTriggered, onLoad, onVisible])
+
+  const renderFallback = () => {
+    if (fallback) {
+      return fallback
+    }
+
+    if (showLoadingState) {
+      return (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          className="flex items-center justify-center p-8"
+        >
+          <div className="text-center space-y-2">
+            {delay > 0 && isVisible && !isLoaded ? (
+              <Loader2 className="h-6 w-6 animate-spin mx-auto text-muted-foreground" />
+            ) : (
+              <Eye className="h-6 w-6 mx-auto text-muted-foreground" />
+            )}
+            <p className="text-sm text-muted-foreground">
+              {isVisible && !isLoaded ? "Loading..." : "Scroll to load content"}
+            </p>
+          </div>
+        </motion.div>
+      )
+    }
+
+    return <Skeleton className="w-full h-32" />
+  }
+
+  return (
+    <div ref={containerRef} className={cn("w-full", className)}>
+      {isLoaded ? (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.3 }}
+        >
+          {children}
+        </motion.div>
+      ) : (
+        renderFallback()
+      )}
+    </div>
+  )
+}
+
+// Lazy Image Component
+export interface LazyImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  src: string
+  alt: string
+  fallbackSrc?: string
+  showPlaceholder?: boolean
+  threshold?: number
+  rootMargin?: string
+  onLoad?: () => void
+  onError?: () => void
+  className?: string
+}
+
+export const LazyImage: React.FC<LazyImageProps> = ({
+  src,
+  alt,
+  fallbackSrc,
+  showPlaceholder = true,
+  threshold = 0.1,
+  rootMargin = "50px",
+  onLoad,
+  onError,
+  className,
+  ...props
+}) => {
+  const [imageSrc, setImageSrc] = useState<string | null>(null)
+  const [imageError, setImageError] = useState(false)
+  const [isVisible, setIsVisible] = useState(false)
+  const imgRef = useRef<HTMLImageElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true)
+          observer.disconnect()
+        }
+      },
+      { threshold, rootMargin }
+    )
+
+    if (containerRef.current) {
+      observer.observe(containerRef.current)
+    }
+
+    return () => observer.disconnect()
+  }, [threshold, rootMargin])
+
+  useEffect(() => {
+    if (!isVisible) return
+
+    const img = new Image()
+    img.onload = () => {
+      setImageSrc(src)
+      onLoad?.()
+    }
+    img.onerror = () => {
+      setImageError(true)
+      if (fallbackSrc) {
+        setImageSrc(fallbackSrc)
+      }
+      onError?.()
+    }
+    img.src = src
+  }, [isVisible, src, fallbackSrc, onLoad, onError])
+
+  return (
+    <div ref={containerRef} className={cn("relative overflow-hidden", className)}>
+      {imageSrc ? (
+        <motion.img
+          ref={imgRef}
+          src={imageSrc}
+          alt={alt}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.3 }}
+          className="w-full h-full object-cover"
+          {...props}
+        />
+      ) : showPlaceholder ? (
+        <Skeleton className="w-full h-full min-h-32" />
+      ) : null}
+      
+      {imageError && !fallbackSrc && (
+        <div className="absolute inset-0 flex items-center justify-center bg-muted">
+          <p className="text-sm text-muted-foreground">Failed to load image</p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// Lazy List Component
+export interface LazyListProps<T> {
+  items: T[]
+  renderItem: (item: T, index: number) => React.ReactNode
+  itemHeight?: number
+  batchSize?: number
+  threshold?: number
+  className?: string
+}
+
+export function LazyList<T>({
+  items,
+  renderItem,
+  itemHeight = 100,
+  batchSize = 10,
+  threshold = 0.5,
+  className
+}: LazyListProps<T>) {
+  const [visibleItems, setVisibleItems] = useState<T[]>([])
+  const [currentBatch, setCurrentBatch] = useState(0)
+  const loadingRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    setVisibleItems(items.slice(0, batchSize))
+    setCurrentBatch(1)
+  }, [items, batchSize])
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && currentBatch * batchSize < items.length) {
+          const nextBatch = currentBatch + 1
+          const newItems = items.slice(0, nextBatch * batchSize)
+          setVisibleItems(newItems)
+          setCurrentBatch(nextBatch)
+        }
+      },
+      { threshold }
+    )
+
+    if (loadingRef.current) {
+      observer.observe(loadingRef.current)
+    }
+
+    return () => observer.disconnect()
+  }, [currentBatch, items, batchSize, threshold])
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {visibleItems.map((item, index) => (
+        <motion.div
+          key={index}
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: (index % batchSize) * 0.05 }}
+          style={{ minHeight: itemHeight }}
+        >
+          {renderItem(item, index)}
+        </motion.div>
+      ))}
+      
+      {currentBatch * batchSize < items.length && (
+        <div ref={loadingRef} className="flex justify-center py-4">
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export const LazyComponent: React.FC<LazyComponentProps> = ({ 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">
+                Lazy Component 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 <LazyComponentInternal className={className} {...props} />
+}
+
+export type { LazyComponentProps, LazyImageProps, LazyListProps }

package/src/components/magnetic-button/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 MagneticButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  strength?: number
+  range?: number
+  springConfig?: {
+    stiffness?: number
+    damping?: number
+  }
+}
+
+const MagneticButtonInternal = React.forwardRef<HTMLButtonElement, MagneticButtonProps>(
+  ({ 
+    children, 
+    className, 
+    strength = 0.3, 
+    range = 100,
+    springConfig = { stiffness: 200, damping: 15 },
+    ...props 
+  }, ref) => {
+    const buttonRef = useRef<HTMLButtonElement>(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, [-range, range], [5, -5])
+    const rotateY = useTransform(springX, [-range, range], [-5, 5])
+
+    const handleMouseMove = (e: React.MouseEvent) => {
+      if (!buttonRef.current) return
+
+      const rect = buttonRef.current.getBoundingClientRect()
+      const centerX = rect.left + rect.width / 2
+      const centerY = rect.top + rect.height / 2
+
+      const deltaX = e.clientX - centerX
+      const deltaY = e.clientY - centerY
+
+      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
+
+      if (distance < range) {
+        x.set(deltaX * strength)
+        y.set(deltaY * strength)
+      }
+    }
+
+    const handleMouseLeave = () => {
+      setIsHovered(false)
+      x.set(0)
+      y.set(0)
+    }
+
+    const handleMouseEnter = () => {
+      setIsHovered(true)
+    }
+
+    return (
+      <motion.button
+        ref={(node) => {
+          buttonRef.current = node
+          if (typeof ref === "function") {
+            ref(node)
+          } else if (ref) {
+            ref.current = node
+          }
+        }}
+        className={cn(
+          "relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+          "h-9 px-4 py-2",
+          className
+        )}
+        onMouseMove={handleMouseMove}
+        onMouseLeave={handleMouseLeave}
+        onMouseEnter={handleMouseEnter}
+        style={{
+          x: springX,
+          y: springY,
+          rotateX,
+          rotateY,
+          transformPerspective: 1000,
+        }}
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
+        animate={{
+          rotateX: isHovered ? rotateX : 0,
+          rotateY: isHovered ? rotateY : 0,
+        }}
+        transition={{ duration: 0.3 }}
+        {...props}
+      >
+        <motion.div
+          className="relative z-10"
+          animate={{
+            scale: isHovered ? 1.02 : 1,
+          }}
+          transition={{ duration: 0.2 }}
+        >
+          {children}
+        </motion.div>
+
+        {/* Glow effect */}
+        <motion.div
+          className="absolute inset-0 rounded-md bg-primary/20 blur-md"
+          animate={{
+            opacity: isHovered ? 0.8 : 0,
+            scale: isHovered ? 1.1 : 1,
+          }}
+          transition={{ duration: 0.3 }}
+        />
+      </motion.button>
+    )
+  }
+)
+
+MagneticButtonInternal.displayName = "MagneticButtonInternal"
+
+export const MagneticButton = React.forwardRef<HTMLButtonElement, MagneticButtonProps>(
+  ({ 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">
+                  Magnetic Button 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 <MagneticButtonInternal className={className} ref={ref} {...props} />
+  }
+)
+
+MagneticButton.displayName = "MagneticButton"