@moontra/moonui-pro 2.19.0 → 2.20.0

package/src/components/gesture-drawer/index.tsx

@@ -0,0 +1,551 @@
+"use client"
+
+import React, { useEffect, useRef, useState, useCallback, useMemo } from "react"
+import { motion, useMotionValue, useTransform, animate, PanInfo, useAnimation, AnimationControls, useSpring } from "framer-motion"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+import { X, Lock, Sparkles } from "lucide-react"
+import { useSubscription } from "../../hooks/use-subscription"
+import { Card, CardContent } from "../ui/card"
+import { Button } from "../ui/button"
+
+// Gesture Drawer Variants
+const gestureDrawerVariants = cva(
+  "fixed bg-background shadow-2xl overflow-hidden",
+  {
+    variants: {
+      position: {
+        bottom: "bottom-0 left-0 right-0 rounded-t-[20px] max-h-[95vh]",
+        top: "top-0 left-0 right-0 rounded-b-[20px] max-h-[95vh]",
+        left: "left-0 top-0 bottom-0 rounded-r-[20px] max-w-[90vw]",
+        right: "right-0 top-0 bottom-0 rounded-l-[20px] max-w-[90vw]"
+      },
+      size: {
+        default: "",
+        sm: "",
+        md: "",
+        lg: "",
+        full: ""
+      }
+    },
+    compoundVariants: [
+      {
+        position: ["bottom", "top"],
+        size: "sm",
+        class: "h-[30vh]"
+      },
+      {
+        position: ["bottom", "top"],
+        size: "md",
+        class: "h-[50vh]"
+      },
+      {
+        position: ["bottom", "top"],
+        size: "lg",
+        class: "h-[70vh]"
+      },
+      {
+        position: ["bottom", "top"],
+        size: "full",
+        class: "h-[95vh]"
+      },
+      {
+        position: ["left", "right"],
+        size: "sm",
+        class: "w-[280px]"
+      },
+      {
+        position: ["left", "right"],
+        size: "md",
+        class: "w-[380px]"
+      },
+      {
+        position: ["left", "right"],
+        size: "lg",
+        class: "w-[480px]"
+      },
+      {
+        position: ["left", "right"],
+        size: "full",
+        class: "w-[90vw]"
+      }
+    ],
+    defaultVariants: {
+      position: "bottom",
+      size: "default"
+    }
+  }
+)
+
+// Handle/Indicator Variants
+const handleVariants = cva(
+  "absolute bg-muted-foreground/20 transition-all duration-200",
+  {
+    variants: {
+      position: {
+        bottom: "top-2 left-1/2 -translate-x-1/2 w-12 h-1 rounded-full",
+        top: "bottom-2 left-1/2 -translate-x-1/2 w-12 h-1 rounded-full",
+        left: "right-2 top-1/2 -translate-y-1/2 w-1 h-12 rounded-full",
+        right: "left-2 top-1/2 -translate-y-1/2 w-1 h-12 rounded-full"
+      }
+    },
+    defaultVariants: {
+      position: "bottom"
+    }
+  }
+)
+
+export interface GestureDrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration' | 'onDragStart' | 'onDragEnd' | 'onDrag'>,
+  VariantProps<typeof gestureDrawerVariants> {
+  // Core props
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+  children: React.ReactNode
+  
+  // Position and size
+  position?: "bottom" | "top" | "left" | "right"
+  size?: "default" | "sm" | "md" | "lg" | "full"
+  
+  // Snap points (percentages of viewport)
+  snapPoints?: number[]
+  defaultSnapPoint?: number
+  
+  // Gesture options
+  enableSwipeToClose?: boolean
+  closeThreshold?: number
+  closeVelocity?: number
+  dragElastic?: number
+  
+  // Visual options
+  showHandle?: boolean
+  handleClassName?: string
+  showCloseButton?: boolean
+  closeButtonClassName?: string
+  
+  // Backdrop options
+  showBackdrop?: boolean
+  backdropClassName?: string
+  backdropBlur?: boolean
+  closeOnBackdropClick?: boolean
+  
+  // Animation options
+  animationDuration?: number
+  springConfig?: {
+    stiffness?: number
+    damping?: number
+    mass?: number
+  }
+  
+  // Advanced features
+  preventBodyScroll?: boolean
+  autoHeight?: boolean
+  nestedScrolling?: boolean
+  onSnapPointChange?: (snapPoint: number) => void
+  
+  // Component specific
+  asChild?: boolean
+  isProComponent?: boolean
+}
+
+// Body scroll lock hook
+const useBodyScrollLock = (isLocked: boolean) => {
+  useEffect(() => {
+    if (!isLocked) return
+
+    const originalStyle = window.getComputedStyle(document.body).overflow
+    document.body.style.overflow = "hidden"
+
+    return () => {
+      document.body.style.overflow = originalStyle
+    }
+  }, [isLocked])
+}
+
+// Snap point calculation
+const calculateSnapPoint = (
+  offset: number,
+  velocity: number,
+  snapPoints: number[],
+  direction: "up" | "down" | "left" | "right",
+  viewportSize: number
+): number => {
+  const currentPosition = Math.abs(offset) / viewportSize * 100
+  
+  // Velocity-based snap
+  if (Math.abs(velocity) > 500) {
+    if ((direction === "up" || direction === "left") && velocity < 0) {
+      // Swiping to open more
+      const higherPoints = snapPoints.filter(p => p > currentPosition)
+      return higherPoints.length > 0 ? higherPoints[0] : snapPoints[snapPoints.length - 1]
+    } else if ((direction === "down" || direction === "right") && velocity > 0) {
+      // Swiping to close
+      const lowerPoints = snapPoints.filter(p => p < currentPosition)
+      return lowerPoints.length > 0 ? lowerPoints[lowerPoints.length - 1] : 0
+    }
+  }
+  
+  // Find closest snap point
+  return snapPoints.reduce((prev, curr) => 
+    Math.abs(curr - currentPosition) < Math.abs(prev - currentPosition) ? curr : prev
+  )
+}
+
+const MoonUIGestureDrawerProComponent = React.forwardRef<HTMLDivElement, GestureDrawerProps>(({
+  isOpen,
+  onOpenChange,
+  children,
+  position = "bottom",
+  size = "default",
+  snapPoints = size === "default" ? [25, 50, 75, 100] : [],
+  defaultSnapPoint,
+  enableSwipeToClose = true,
+  closeThreshold = 20,
+  closeVelocity = 500,
+  dragElastic = 0.2,
+  showHandle = true,
+  handleClassName,
+  showCloseButton = false,
+  closeButtonClassName,
+  showBackdrop = true,
+  backdropClassName,
+  backdropBlur = true,
+  closeOnBackdropClick = true,
+  animationDuration = 0.5,
+  springConfig = {
+    stiffness: 300,
+    damping: 30,
+    mass: 1
+  },
+  preventBodyScroll = true,
+  autoHeight = false,
+  nestedScrolling = true,
+  onSnapPointChange,
+  className,
+  asChild = false,
+  isProComponent = true,
+  ...props
+}, ref) => {
+  const isVertical = position === "bottom" || position === "top"
+  const controls = useAnimation()
+  const dragControls = useAnimation()
+  
+  // Motion values
+  const x = useMotionValue(0)
+  const y = useMotionValue(0)
+  const motionValue = isVertical ? y : x
+  
+  // State
+  const [currentSnapPoint, setCurrentSnapPoint] = useState(
+    defaultSnapPoint || (snapPoints.length > 0 ? snapPoints[0] : 50)
+  )
+  const [isDragging, setIsDragging] = useState(false)
+  const contentRef = useRef<HTMLDivElement>(null)
+  const [contentHeight, setContentHeight] = useState<number | null>(null)
+  
+  // Body scroll lock
+  useBodyScrollLock(isOpen && preventBodyScroll)
+  
+  // Viewport dimensions
+  const viewportSize = useMemo(() => {
+    if (typeof window === "undefined") return 1000
+    return isVertical ? window.innerHeight : window.innerWidth
+  }, [isVertical])
+  
+  // Calculate position based on snap point
+  const calculatePosition = useCallback((snapPoint: number) => {
+    // For snap points, we don't need to calculate positions
+    // CVA classes handle the static positioning
+    // Motion values should only handle transforms during drag
+    return 0
+  }, [position, viewportSize])
+  
+  
+  // Backdrop opacity - fixed when drawer is open
+  const backdropOpacity = isOpen ? 0.5 : 0
+  
+  // Handle drag end
+  const handleDragEnd = useCallback((event: any, info: PanInfo) => {
+    setIsDragging(false)
+    
+    const offset = isVertical ? info.offset.y : info.offset.x
+    const velocity = isVertical ? info.velocity.y : info.velocity.x
+    
+    // Check if should close
+    const shouldClose = enableSwipeToClose && (
+      (position === "bottom" && offset > closeThreshold && velocity > -closeVelocity) ||
+      (position === "top" && offset < -closeThreshold && velocity < closeVelocity) ||
+      (position === "right" && offset > closeThreshold && velocity > -closeVelocity) ||
+      (position === "left" && offset < -closeThreshold && velocity < closeVelocity)
+    )
+    
+    if (shouldClose) {
+      onOpenChange(false)
+      return
+    }
+    
+    // Snap to point
+    if (snapPoints.length > 0) {
+      // Map position to direction for calculateSnapPoint
+      const direction = position === "bottom" ? "down" : 
+                      position === "top" ? "up" :
+                      position === "left" ? "left" : "right"
+      
+      const newSnapPoint = calculateSnapPoint(
+        Math.abs(motionValue.get()),
+        velocity,
+        snapPoints,
+        direction,
+        viewportSize
+      )
+      
+      setCurrentSnapPoint(newSnapPoint)
+      onSnapPointChange?.(newSnapPoint)
+      
+      animate(motionValue, calculatePosition(newSnapPoint), {
+        type: "spring",
+        ...springConfig
+      })
+    } else {
+      // Return to original position
+      animate(motionValue, calculatePosition(currentSnapPoint), {
+        type: "spring",
+        ...springConfig
+      })
+    }
+  }, [
+    isVertical,
+    position,
+    enableSwipeToClose,
+    closeThreshold,
+    closeVelocity,
+    snapPoints,
+    motionValue,
+    viewportSize,
+    calculatePosition,
+    currentSnapPoint,
+    springConfig,
+    onOpenChange,
+    onSnapPointChange
+  ])
+  
+  // Handle drag start
+  const handleDragStart = useCallback((event: any, info: PanInfo) => {
+    setIsDragging(true)
+  }, [])
+  
+  // Auto height calculation
+  useEffect(() => {
+    if (!autoHeight || !contentRef.current || !isOpen) return
+    
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContentHeight(entry.contentRect.height)
+      }
+    })
+    
+    resizeObserver.observe(contentRef.current)
+    
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [autoHeight, isOpen])
+  
+  // Animation on open/close - reset transform values
+  useEffect(() => {
+    if (isOpen) {
+      // Reset to zero - CVA handles positioning
+      animate(motionValue, 0, {
+        type: "spring",
+        ...springConfig
+      })
+    } else {
+      // Reset transform
+      animate(motionValue, 0, {
+        type: "spring",
+        ...springConfig
+      })
+    }
+  }, [isOpen, motionValue, springConfig])
+  
+  // Keyboard accessibility
+  useEffect(() => {
+    if (!isOpen) return
+    
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && enableSwipeToClose) {
+        onOpenChange(false)
+      }
+    }
+    
+    document.addEventListener("keydown", handleKeyDown)
+    return () => document.removeEventListener("keydown", handleKeyDown)
+  }, [isOpen, enableSwipeToClose, onOpenChange])
+  
+  // Initial position - CVA handles static positioning
+  const getInitialPosition = () => {
+    return { x: 0, y: 0 }
+  }
+  
+  // Drag constraints - allow reasonable drag movement
+  const getDragConstraints = () => {
+    switch (position) {
+      case "bottom":
+        return { top: -200, bottom: 100 }
+      case "top":
+        return { top: -100, bottom: 200 }
+      case "right":
+        return { left: -200, right: 100 }
+      case "left":
+        return { left: -100, right: 200 }
+      default:
+        return {}
+    }
+  }
+  
+  if (!isOpen) return null
+  
+  const drawerContent = (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: animationDuration }}
+      className="fixed inset-0 z-50"
+      style={{ pointerEvents: isDragging ? "none" : "auto" }}
+    >
+      {/* Backdrop */}
+      {showBackdrop && (
+        <motion.div
+          className={cn(
+            "absolute inset-0 bg-black/50",
+            backdropBlur && "backdrop-blur-sm",
+            backdropClassName
+          )}
+          style={{ opacity: backdropOpacity }}
+          onClick={closeOnBackdropClick ? () => onOpenChange(false) : undefined}
+        />
+      )}
+      
+      {/* Drawer */}
+      <motion.div
+        ref={ref}
+        drag={enableSwipeToClose ? (isVertical ? "y" : "x") : false}
+        dragConstraints={getDragConstraints()}
+        dragElastic={dragElastic}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+        initial={getInitialPosition()}
+        style={{
+          ...(isDragging ? { [isVertical ? "y" : "x"]: motionValue } : {}),
+          ...(autoHeight && contentHeight && isVertical
+            ? { height: `${Math.min(contentHeight + 60, viewportSize * 0.95)}px` }
+            : {})
+        }}
+        className={cn(
+          gestureDrawerVariants({ position, size }),
+          "will-change-transform",
+          className
+        )}
+        {...props}
+      >
+        {/* Handle */}
+        {showHandle && (
+          <div
+            className={cn(
+              handleVariants({ position }),
+              "cursor-grab active:cursor-grabbing",
+              isDragging && "bg-muted-foreground/40 scale-x-150",
+              handleClassName
+            )}
+          />
+        )}
+        
+        {/* Close button */}
+        {showCloseButton && (
+          <button
+            onClick={() => onOpenChange(false)}
+            className={cn(
+              "absolute z-50 p-2 rounded-full bg-background/80 backdrop-blur-sm border shadow-sm",
+              "hover:bg-background transition-colors",
+              position === "bottom" && "top-3 right-3",
+              position === "top" && "bottom-3 right-3",
+              position === "left" && "top-3 right-3",
+              position === "right" && "top-3 left-3",
+              closeButtonClassName
+            )}
+            aria-label="Close drawer"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+        
+        {/* Content wrapper for nested scrolling */}
+        <div
+          ref={contentRef}
+          className={cn(
+            "h-full overflow-auto overscroll-contain",
+            nestedScrolling && "touch-pan-y",
+            showHandle && position === "bottom" && "pt-2",
+            showHandle && position === "top" && "pb-2"
+          )}
+          style={{
+            // Prevent drag when scrolling content
+            touchAction: nestedScrolling ? "pan-y" : "none"
+          }}
+        >
+          {children}
+        </div>
+      </motion.div>
+    </motion.div>
+  )
+  
+  return drawerContent
+})
+
+MoonUIGestureDrawerProComponent.displayName = "MoonUIGestureDrawerProComponent"
+
+export const MoonUIGestureDrawerPro = React.forwardRef<
+  HTMLDivElement,
+  GestureDrawerProps
+>((props, ref) => {
+  const { hasProAccess, isLoading } = useSubscription()
+  
+  // Show upgrade prompt if no pro access
+  if (!isLoading && !hasProAccess) {
+    return (
+      <Card className="w-fit mx-auto">
+        <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">
+                Gesture Drawer 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 <MoonUIGestureDrawerProComponent {...props} ref={ref} />
+})
+
+MoonUIGestureDrawerPro.displayName = "MoonUIGestureDrawerPro"
+
+// Backward compatibility alias
+export const GestureDrawer = MoonUIGestureDrawerPro
+
+// Export types
+export type MoonUIGestureDrawerProProps = GestureDrawerProps
+export { gestureDrawerVariants as moonUIGestureDrawerProVariants }
+export default MoonUIGestureDrawerPro

package/src/components/github-stars/hooks.ts

@@ -66,7 +66,7 @@ export function useGitHubData({
   const [rateLimitInfo, setRateLimitInfo] = useState<RateLimitInfo | null>(null)
   const [lastUpdated, setLastUpdated] = useState<Date | null>(null)
   
-  const refreshTimeoutRef = useRef<NodeJS.Timeout>()
+  const refreshTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
   const previousStarsRef = useRef<Map<string, number>>(new Map())
   const errorCountRef = useRef<number>(0) // Hata sayısını takip et
   const maxErrorCount = isDocsMode ? 1 : 2 // Fewer retries in docs mode

package/src/components/github-stars/index.tsx

@@ -265,7 +265,7 @@ const GitHubStarsInternal: React.FC<GitHubStarsProps> = ({
         return (
           <DetailedVariant 
             {...baseProps} 
-            onExport={handleDetailedExport}
+            onExport={() => handleDetailedExport({} as React.MouseEvent)}
           />
         )
       case "card":

package/src/components/github-stars/types.ts

@@ -27,6 +27,7 @@ export interface GitHubRepository {
     html_url: string
     type: string
   }
+  private: boolean
   // Extended properties
   contributors_count?: number
   commits_count?: number

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

@@ -195,7 +195,7 @@ const HealthCheckInternal: React.FC<HealthCheckProps> = ({
       case "warning":
         return <AlertCircle className="h-4 w-4 text-yellow-500" />
       default:
-        return <Clock className="h-4 w-4 text-gray-500" />
+        return <Clock className="h-4 w-4 text-muted-foreground" />
     }
   }
 
@@ -208,7 +208,7 @@ const HealthCheckInternal: React.FC<HealthCheckProps> = ({
       case "warning":
         return "bg-yellow-500"
       default:
-        return "bg-gray-500"
+        return "bg-muted-foreground"
     }
   }