@moontra/moonui-pro 2.18.5 → 2.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.18.5",
+  "version": "2.19.0",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

package/src/components/animated-button/index.tsx

@@ -9,8 +9,8 @@ import { Card, CardContent } from "../ui/card"
 import { Button } from "../ui/button"
 import { useSubscription } from "../../hooks/use-subscription"
 
-const animatedButtonVariants = cva(
-  "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 overflow-hidden",
+const moonUIAnimatedButtonProVariants = cva(
+  "relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 overflow-hidden min-w-fit",
   {
     variants: {
       variant: {
@@ -20,68 +20,143 @@ const animatedButtonVariants = cva(
         secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
+        gradient: "bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-700 hover:to-pink-700",
+        glow: "bg-primary text-primary-foreground shadow-lg hover:shadow-xl hover:shadow-primary/25",
       },
       size: {
         default: "h-9 px-4 py-2",
         sm: "h-8 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-8",
-      },
+        xl: "h-11 rounded-md px-6 text-base font-medium",
+        icon: "h-9 w-9",
+      }
     },
     defaultVariants: {
       variant: "default",
-      size: "default",
+      size: "default"
     },
   }
 )
 
-interface AnimatedButtonProps
+interface MoonUIAnimatedButtonProProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof animatedButtonVariants> {
+    VariantProps<typeof moonUIAnimatedButtonProVariants> {
   state?: "idle" | "loading" | "success" | "error"
   onStateChange?: (state: "idle" | "loading" | "success" | "error") => void
+  loadingText?: string
+  successText?: string
+  errorText?: string
+  ripple?: boolean
+  iconRotate?: boolean
+  shimmerSpeed?: "slow" | "normal" | "fast"
+  glowIntensity?: "low" | "medium" | "high"
+  showProgressBar?: boolean
+  autoResetDelay?: number
+  animation?: "none" | "bounce" | "pulse" | "shimmer" | "slide" | "scale" | "rotate" | "shake"
 }
 
-const AnimatedButtonInternal = React.forwardRef<HTMLButtonElement, AnimatedButtonProps>(
-  ({ className, variant, size, state = "idle", onStateChange, children, onClick, ...props }, ref) => {
+const MoonUIAnimatedButtonProInternal = React.forwardRef<HTMLButtonElement, MoonUIAnimatedButtonProProps>(
+  ({ 
+    className, 
+    variant, 
+    size, 
+    animation = "none",
+    state = "idle", 
+    onStateChange, 
+    children, 
+    onClick, 
+    loadingText = "Loading...",
+    successText = "Success!",
+    errorText = "Error!",
+    ripple = false,
+    iconRotate = false,
+    shimmerSpeed = "normal",
+    glowIntensity = "medium",
+    showProgressBar = false,
+    autoResetDelay = 2000,
+    onDrag,
+    onDragEnd,
+    onDragStart,
+    onAnimationStart,
+    onAnimationEnd,
+    ...props 
+  }, ref) => {
     const [internalState, setInternalState] = useState<"idle" | "loading" | "success" | "error">("idle")
+    const [ripples, setRipples] = useState<Array<{x: number, y: number, id: number}>>([])
+    const [progress, setProgress] = useState(0)
+    const [isHovered, setIsHovered] = useState(false)
     const currentState = state !== "idle" ? state : internalState
 
     const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
       if (currentState === "loading") return
 
+      // Ripple effect
+      if (ripple) {
+        const rect = e.currentTarget.getBoundingClientRect()
+        const x = e.clientX - rect.left
+        const y = e.clientY - rect.top
+        const id = Date.now()
+        
+        setRipples([...ripples, { x, y, id }])
+        setTimeout(() => {
+          setRipples(prev => prev.filter(r => r.id !== id))
+        }, 600)
+      }
+
       setInternalState("loading")
       onStateChange?.("loading")
+      setProgress(0)
+
+      // Simulate progress
+      if (showProgressBar) {
+        const progressInterval = setInterval(() => {
+          setProgress(prev => {
+            if (prev >= 90) {
+              clearInterval(progressInterval)
+              return 90
+            }
+            return prev + 10
+          })
+        }, 200)
+      }
 
       if (onClick) {
         try {
           await onClick(e)
+          setProgress(100)
           setInternalState("success")
           onStateChange?.("success")
           
           setTimeout(() => {
             setInternalState("idle")
             onStateChange?.("idle")
-          }, 2000)
+            setProgress(0)
+          }, autoResetDelay)
         } catch (error) {
+          setProgress(0)
           setInternalState("error")
           onStateChange?.("error")
           
           setTimeout(() => {
             setInternalState("idle")
             onStateChange?.("idle")
-          }, 2000)
+          }, autoResetDelay)
         }
       }
     }
 
     const getIcon = () => {
+      const iconClass = cn("h-4 w-4", {
+        "animate-spin": currentState === "loading" || (iconRotate && currentState !== "idle"),
+      })
+      
       switch (currentState) {
         case "loading":
-          return <Loader2 className="h-4 w-4 animate-spin" />
+          return <Loader2 className={iconClass} />
         case "success":
-          return <Check className="h-4 w-4" />
+          return <Check className={cn(iconClass, "animate-scale-in")} />
         case "error":
-          return <X className="h-4 w-4" />
+          return <X className={cn(iconClass, "animate-shake")} />
         default:
           return null
       }
@@ -98,42 +173,140 @@ const AnimatedButtonInternal = React.forwardRef<HTMLButtonElement, AnimatedButto
       }
     }
 
+    const getShimmerSpeed = () => {
+      switch (shimmerSpeed) {
+        case "slow":
+          return "duration-1500"
+        case "fast":
+          return "duration-500"
+        default:
+          return "duration-1000"
+      }
+    }
+
+    const getGlowIntensity = () => {
+      switch (glowIntensity) {
+        case "low":
+          return "shadow-lg"
+        case "high":
+          return "shadow-2xl"
+        default:
+          return "shadow-xl"
+      }
+    }
+
+
+    // whileHover direkt olarak kullanılacak
+    let whileHoverAnimation: any = undefined
+    let whileTapAnimation: any = undefined
+
+    // Animation specific hover states
+    if (animation === "bounce") {
+      whileHoverAnimation = { 
+        y: [0, -10, 0],
+        transition: { 
+          duration: 0.6,
+          repeat: Infinity,
+          repeatType: "loop" 
+        }
+      }
+    } else if (animation === "pulse") {
+      whileHoverAnimation = { 
+        scale: [1, 1.1, 1],
+        transition: { 
+          duration: 1,
+          repeat: Infinity,
+          repeatType: "loop"
+        }
+      }
+    } else if (animation === "shake") {
+      // Shake için CSS animation kullanacağız
+      whileHoverAnimation = undefined
+    } else if (animation === "rotate") {
+      whileHoverAnimation = { 
+        rotate: 10,
+        transition: { type: "spring", stiffness: 300 }
+      }
+    } else if (animation === "scale") {
+      whileHoverAnimation = { scale: 1.05 }
+      whileTapAnimation = { scale: 0.95 }
+    } else if (animation === "slide") {
+      whileHoverAnimation = { y: -4 }
+    }
+
     return (
-      <button
-        className={cn(animatedButtonVariants({ variant, size }), className)}
+      <motion.button
+        {...props}
+        className={cn(
+          moonUIAnimatedButtonProVariants({ variant, size }), 
+          variant === "glow" && getGlowIntensity(),
+          animation === "shake" && isHovered && "animate-shake",
+          className
+        )}
         ref={ref}
         onClick={handleClick}
         disabled={currentState === "loading" || props.disabled}
-        {...props}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        whileHover={whileHoverAnimation}
+        whileTap={whileTapAnimation}
       >
-        <motion.div
-          className="flex items-center gap-2"
-          animate={{
-            width: currentState !== "idle" ? "auto" : "100%"
-          }}
-          transition={{ duration: 0.2 }}
-        >
+        {/* Progress Bar */}
+        {showProgressBar && currentState === "loading" && (
           <motion.div
-            animate={{
-              scale: currentState !== "idle" ? 1 : 0,
-              width: currentState !== "idle" ? "auto" : 0
-            }}
-            transition={{ duration: 0.2 }}
-            className="flex items-center"
-          >
-            {getIcon()}
-          </motion.div>
-          
-          <motion.span
-            animate={{
-              opacity: currentState === "idle" ? 1 : 0,
-              x: currentState !== "idle" ? -20 : 0
+            className="absolute bottom-0 left-0 h-1 bg-primary-foreground/20 rounded-full"
+            initial={{ width: 0 }}
+            animate={{ width: `${progress}%` }}
+            transition={{ duration: 0.3 }}
+          />
+        )}
+
+        {/* Shimmer Effect */}
+        {animation === "shimmer" && (
+          <motion.div 
+            className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent"
+            initial={{ x: "-100%" }}
+            animate={{ x: "100%" }}
+            transition={{ 
+              duration: shimmerSpeed === "slow" ? 1.5 : shimmerSpeed === "fast" ? 0.5 : 1,
+              repeat: Infinity,
+              repeatDelay: 1
             }}
-            transition={{ duration: 0.2 }}
-          >
-            {children}
-          </motion.span>
-        </motion.div>
+          />
+        )}
+
+        {/* Content */}
+        <div className="relative flex items-center justify-center gap-2 z-10">
+          {/* Icon variant için özel düzenleme */}
+          {size === "icon" ? (
+            // Icon size için sadece icon göster
+            currentState === "idle" ? (
+              children
+            ) : (
+              getIcon()
+            )
+          ) : (
+            // Diğer boyutlar için normal akış
+            <>
+              {currentState === "idle" ? (
+                <>
+                  {React.isValidElement(children) && React.cloneElement(children as React.ReactElement)}
+                  {typeof children === 'string' && children}
+                  {React.isValidElement(children) || typeof children === 'string' ? null : children}
+                </>
+              ) : (
+                <>
+                  {getIcon()}
+                  <span className="ml-2">
+                    {currentState === "loading" && loadingText}
+                    {currentState === "success" && successText}
+                    {currentState === "error" && errorText}
+                  </span>
+                </>
+              )}
+            </>
+          )}
+        </div>
 
         {/* Background animation */}
         <motion.div
@@ -144,27 +317,41 @@ const AnimatedButtonInternal = React.forwardRef<HTMLButtonElement, AnimatedButto
           initial={{ scale: 0, opacity: 0 }}
           animate={{
             scale: currentState === "success" || currentState === "error" ? 1 : 0,
-            opacity: currentState === "success" || currentState === "error" ? 1 : 0
+            opacity: currentState === "success" || currentState === "error" ? 0.2 : 0
           }}
           transition={{ duration: 0.3 }}
-          style={{ zIndex: -1 }}
+          style={{ zIndex: 0 }}
         />
-      </button>
+
+        {/* Ripple Effect */}
+        {ripples.map(ripple => (
+          <span
+            key={ripple.id}
+            className="absolute bg-primary/20 rounded-full animate-ripple pointer-events-none"
+            style={{
+              left: ripple.x - 10,
+              top: ripple.y - 10,
+              width: 20,
+              height: 20,
+            }}
+          />
+        ))}
+      </motion.button>
     )
   }
 )
 
-AnimatedButtonInternal.displayName = "AnimatedButtonInternal"
+MoonUIAnimatedButtonProInternal.displayName = "MoonUIAnimatedButtonProInternal"
 
-export const AnimatedButton = React.forwardRef<HTMLButtonElement, AnimatedButtonProps>(
-  ({ className, ...props }, ref) => {
+export const MoonUIAnimatedButtonPro = React.forwardRef<HTMLButtonElement, MoonUIAnimatedButtonProProps>(
+  (props, ref) => {
     // Pro package - always show component
     const { hasProAccess, isLoading } = useSubscription()
     
     // Show upgrade prompt if no pro access
     if (!isLoading && !hasProAccess) {
       return (
-        <Card className={cn("w-fit", className)}>
+        <Card className={cn("w-fit", props.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">
@@ -188,11 +375,11 @@ export const AnimatedButton = React.forwardRef<HTMLButtonElement, AnimatedButton
       )
     }
 
-    return <AnimatedButtonInternal className={className} ref={ref} {...props} />
+    return <MoonUIAnimatedButtonProInternal {...props} ref={ref} />
   }
 )
 
-AnimatedButton.displayName = "AnimatedButton"
+MoonUIAnimatedButtonPro.displayName = "MoonUIAnimatedButtonPro"
 
-export { animatedButtonVariants }
-export type { AnimatedButtonProps }
+export { moonUIAnimatedButtonProVariants }
+export type { MoonUIAnimatedButtonProProps }

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

@@ -12,8 +12,8 @@ const isDocsMode = () => {
 
 // Get cache duration based on mode
 const getCacheDuration = (defaultDuration: number) => {
-  // Docs modunda cache süresini 30 dakikaya çıkar
-  return isDocsMode() ? 1800000 : defaultDuration // 30 dakika : default
+  // Increase cache duration to 30 minutes in docs mode
+  return isDocsMode() ? 1800000 : defaultDuration // 30 minutes : default
 }
 
 // Language colors
@@ -134,7 +134,7 @@ export async function fetchUserRepositories(
   cache.set(cacheKey, {
     data: repos,
     timestamp: Date.now(),
-    expiresAt: Date.now() + getCacheDuration(300000), // Docs modunda 30 dakika
+    expiresAt: Date.now() + getCacheDuration(300000), // 30 minutes in docs mode
   })
 
   return repos
@@ -159,7 +159,7 @@ export async function fetchRepository(
   cache.set(cacheKey, {
     data: repository,
     timestamp: Date.now(),
-    expiresAt: Date.now() + getCacheDuration(300000), // Docs modunda 30 dakika
+    expiresAt: Date.now() + getCacheDuration(300000), // 30 minutes in docs mode
   })
 
   return repository
@@ -193,7 +193,7 @@ export async function fetchContributorsCount(
         cache.set(cacheKey, {
           data: count,
           timestamp: Date.now(),
-          expiresAt: Date.now() + getCacheDuration(3600000), // Docs modunda 30 dakika
+          expiresAt: Date.now() + getCacheDuration(3600000), // 30 minutes in docs mode
         })
         return count
       }
@@ -206,7 +206,7 @@ export async function fetchContributorsCount(
     cache.set(cacheKey, {
       data: count,
       timestamp: Date.now(),
-      expiresAt: Date.now() + getCacheDuration(3600000), // Docs modunda 30 dakika
+      expiresAt: Date.now() + getCacheDuration(3600000), // 30 minutes in docs mode
     })
     
     return count
@@ -246,7 +246,7 @@ export async function fetchStarHistory(
     cache.set(cacheKey, {
       data: history,
       timestamp: Date.now(),
-      expiresAt: Date.now() + getCacheDuration(3600000), // Docs modunda 30 dakika
+      expiresAt: Date.now() + getCacheDuration(3600000), // 30 minutes in docs mode
     })
     
     return history

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

@@ -29,7 +29,7 @@ interface UseGitHubDataOptions {
   onDataUpdate?: (stats: GitHubStats) => void
   onMilestoneReached?: (milestone: Milestone) => void
   milestones?: number[]
-  // Docs mode optimizasyonları için
+  // For docs mode optimizations
   docsMode?: boolean
   mockDataFallback?: boolean
   forceMockData?: boolean // Force mock data instead of API
@@ -52,12 +52,12 @@ export function useGitHubData({
   mockDataFallback = true,
   forceMockData = false,
 }: UseGitHubDataOptions) {
-  // Docs mode tespiti
+  // Docs mode detection
   const isDocsMode = docsMode || (typeof window !== "undefined" && 
     (window.location.pathname.includes("/docs/") || 
      window.location.pathname.includes("/components/")))
   
-  // Docs modunda autoRefresh'i devre dışı bırak
+  // Disable autoRefresh in docs mode
   const effectiveAutoRefresh = isDocsMode ? false : autoRefresh
   const [repos, setRepos] = useState<GitHubRepository[]>([])
   const [stats, setStats] = useState<GitHubStats | null>(null)
@@ -69,11 +69,11 @@ export function useGitHubData({
   const refreshTimeoutRef = useRef<NodeJS.Timeout>()
   const previousStarsRef = useRef<Map<string, number>>(new Map())
   const errorCountRef = useRef<number>(0) // Hata sayısını takip et
-  const maxErrorCount = isDocsMode ? 1 : 2 // Docs modunda daha az deneme
+  const maxErrorCount = isDocsMode ? 1 : 2 // Fewer retries in docs mode
   const hasInitialFetchedRef = useRef(false) // İlk fetch yapıldı mı?
   const docsDataCacheRef = useRef<GitHubRepository[] | null>(null) // Docs mode cache
 
-  // checkMilestones fonksiyonunu ref olarak sakla - bu şekilde her render'da yeniden oluşturulmaz
+  // Store checkMilestones function as ref - this way it won't be recreated on every render
   const milestonesRef = useRef(milestones)
   const onMilestoneReachedRef = useRef(onMilestoneReached)
   
@@ -135,7 +135,7 @@ export function useGitHubData({
     if (errorCountRef.current >= maxErrorCount) {
       console.warn("Maximum error count reached. Stopping requests.")
       
-      // Docs modunda ve mockDataFallback aktifse mock data göster
+      // Show mock data if in docs mode and mockDataFallback is active
       if (isDocsMode && mockDataFallback) {
         const mockData = getMockGitHubData(username, repository, repositories)
         setRepos(mockData)
@@ -150,7 +150,7 @@ export function useGitHubData({
       return
     }
 
-    // Gerekli bilgiler yoksa istek yapma
+    // Don't make requests if required info is missing
     const hasValidInput = 
       (username && repository) || // Tek repository modu
       (username && repositories && repositories.length > 0) || // Çoklu repository modu
@@ -269,10 +269,10 @@ export function useGitHubData({
       }
       
       setLastUpdated(new Date())
-      // Başarılı olduğunda hata sayacını sıfırla
+      // Reset error counter on success
       errorCountRef.current = 0
       
-      // Docs modunda başarılı veriyi cache'le
+      // Cache successful data in docs mode
       if (isDocsMode) {
         hasInitialFetchedRef.current = true
         docsDataCacheRef.current = enhancedRepos
@@ -285,7 +285,7 @@ export function useGitHubData({
       errorCountRef.current += 1
       console.error(`GitHub API error (${errorCountRef.current}/${maxErrorCount}):`, errorMessage)
       
-      // Docs modunda ve mockDataFallback aktifse mock data göster
+      // Show mock data if in docs mode and mockDataFallback is active
       if (isDocsMode && mockDataFallback && !hasInitialFetchedRef.current) {
         console.warn("[Docs Mode] API failed, using mock data")
         const mockData = getMockGitHubData(username, repository, repositories)
@@ -304,11 +304,11 @@ export function useGitHubData({
   }, [
     username,
     repository,
-    repositories?.join(','), // Array'i string'e çevir ki referans değişmesin
+    repositories?.join(','), // Convert array to string to keep reference stable
     token,
     sortBy,
     maxItems,
-    checkMilestones, // Artık stable
+    checkMilestones, // Now stable
     onDataUpdate,
     onError,
     isDocsMode,
@@ -318,7 +318,7 @@ export function useGitHubData({
 
   // Initial fetch
   useEffect(() => {
-    // Sadece geçerli input varsa fetch yap
+    // Only fetch if there's valid input
     const hasValidInput = 
       (username && repository) || 
       (username && repositories && repositories.length > 0) || 
@@ -334,7 +334,7 @@ export function useGitHubData({
 
   // Auto-refresh
   useEffect(() => {
-    // Docs modunda auto-refresh'i tamamen devre dışı bırak
+    // Completely disable auto-refresh in docs mode
     if (!effectiveAutoRefresh) return
 
     const scheduleRefresh = () => {
@@ -354,7 +354,7 @@ export function useGitHubData({
   }, [effectiveAutoRefresh, refreshInterval, fetchData])
 
   const refresh = useCallback(() => {
-    // Docs modunda refresh'i sınırla
+    // Limit refresh in docs mode
     if (isDocsMode && hasInitialFetchedRef.current) {
       console.warn("[Docs Mode] Refresh disabled after initial fetch")
       return Promise.resolve()

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

@@ -74,10 +74,10 @@ const GitHubStarsInternal: React.FC<GitHubStarsProps> = ({
     (window.location.pathname.includes("/docs/") || 
      window.location.pathname.includes("/components/"))
   
-  // Docs modunda bazı özellikleri override et
+  // Override some features in docs mode
   const effectiveAutoRefresh = isDocsMode ? false : autoRefresh
   const effectiveNotifications = isDocsMode ? false : enableNotifications
-  const effectiveRefreshInterval = isDocsMode ? 3600000 : refreshInterval // Docs modunda 1 saat
+  const effectiveRefreshInterval = isDocsMode ? 3600000 : refreshInterval // 1 hour in docs mode
   const { notify } = useGitHubNotifications(effectiveNotifications)
 
   // onMilestoneReached callback'ini memoize et
@@ -123,7 +123,7 @@ const GitHubStarsInternal: React.FC<GitHubStarsProps> = ({
     onMilestoneReached: handleMilestoneReached,
     milestones,
     docsMode: isDocsMode, // Docs mode flag'ini gönder
-    mockDataFallback: true, // Docs modunda mock data kullan
+    mockDataFallback: true, // Use mock data in docs mode
     forceMockData: useMockData, // Force mock data if true
   })
 
@@ -317,7 +317,7 @@ const GitHubStarsInternal: React.FC<GitHubStarsProps> = ({
     >
       {renderVariant()}
       
-      {/* Rate limit warning - Docs modunda gösterme */}
+      {/* Rate limit warning - Don't show in docs mode */}
       {!isDocsMode && rateLimitInfo && rateLimitInfo.remaining < 10 && (
         <div className="mt-4 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-md text-sm">
           <p className="text-yellow-800 dark:text-yellow-200">
@@ -327,10 +327,10 @@ const GitHubStarsInternal: React.FC<GitHubStarsProps> = ({
         </div>
       )}
       
-      {/* Docs mode indicator - sadece development modunda göster */}
+      {/* Docs mode indicator - only show in development mode */}
       {isDocsMode && process.env.NODE_ENV === "development" && (
         <div className="mt-2 text-xs text-muted-foreground text-center">
-          📚 Docs Mode: API istekleri optimize edildi
+          📚 Docs Mode: API requests optimized
         </div>
       )}
     </motion.div>

package/src/components/index.ts

@@ -4,7 +4,11 @@
 export * from "./ui"
 
 // Animated Button
-export * from "./animated-button"
+export { 
+  MoonUIAnimatedButtonPro,
+  moonUIAnimatedButtonProVariants,
+  type MoonUIAnimatedButtonProProps
+} from "./animated-button"
 
 // Error Boundary
 export * from "./error-boundary"