@moontra/moonui-pro 2.18.1 → 2.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.18.1",
+  "version": "2.18.2",
   "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/github-stars/hooks.ts

@@ -57,16 +57,29 @@ export function useGitHubData({
   const errorCountRef = useRef<number>(0) // Hata sayısını takip et
   const maxErrorCount = 2 // Maksimum hata sayısı
 
+  // checkMilestones fonksiyonunu ref olarak sakla - bu şekilde her render'da yeniden oluşturulmaz
+  const milestonesRef = useRef(milestones)
+  const onMilestoneReachedRef = useRef(onMilestoneReached)
+  
+  // Ref'leri güncelle
+  useEffect(() => {
+    milestonesRef.current = milestones
+  }, [milestones])
+  
+  useEffect(() => {
+    onMilestoneReachedRef.current = onMilestoneReached
+  }, [onMilestoneReached])
+
   const checkMilestones = useCallback((repos: GitHubRepository[]) => {
-    if (!onMilestoneReached) return
+    if (!onMilestoneReachedRef.current) return
 
     repos.forEach(repo => {
       const previousStars = previousStarsRef.current.get(repo.full_name) || 0
       const currentStars = repo.stargazers_count
 
-      milestones.forEach(milestone => {
+      milestonesRef.current.forEach(milestone => {
         if (previousStars < milestone && currentStars >= milestone) {
-          onMilestoneReached({
+          onMilestoneReachedRef.current?.({
             count: milestone,
             reached: true,
             date: new Date().toISOString(),
@@ -77,7 +90,7 @@ export function useGitHubData({
 
       previousStarsRef.current.set(repo.full_name, currentStars)
     })
-  }, [milestones, onMilestoneReached])
+  }, []) // Boş dependency array - fonksiyon asla yeniden oluşturulmaz
 
   const fetchData = useCallback(async () => {
     // Hata limiti aşıldıysa istek yapma
@@ -226,11 +239,11 @@ export function useGitHubData({
   }, [
     username,
     repository,
-    repositories,
+    repositories?.join(','), // Array'i string'e çevir ki referans değişmesin
     token,
     sortBy,
     maxItems,
-    checkMilestones,
+    checkMilestones, // Artık stable
     onDataUpdate,
     onError,
   ])

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

@@ -62,6 +62,27 @@ const GitHubStarsInternal: React.FC<GitHubStarsProps> = ({
 }) => {
   const { notify } = useGitHubNotifications(enableNotifications)
 
+  // onMilestoneReached callback'ini memoize et
+  const handleMilestoneReached = React.useCallback((milestone: any) => {
+    // Handle milestone reached
+    if (celebrateAt?.includes(milestone.count)) {
+      // Trigger celebration animation
+      confetti({
+        particleCount: 100,
+        spread: 70,
+        origin: { y: 0.6 },
+      })
+      
+      // Show notification
+      notify(`🎉 Milestone Reached!`, {
+        body: `${milestone.count} stars achieved!`,
+        tag: `milestone-${milestone.count}`,
+      })
+    }
+    
+    onMilestoneReached?.(milestone)
+  }, [celebrateAt, notify, onMilestoneReached])
+
   const {
     repos,
     stats,
@@ -81,29 +102,11 @@ const GitHubStarsInternal: React.FC<GitHubStarsProps> = ({
     maxItems,
     onError,
     onDataUpdate,
-    onMilestoneReached: (milestone) => {
-      // Handle milestone reached
-      if (celebrateAt?.includes(milestone.count)) {
-        // Trigger celebration animation
-        confetti({
-          particleCount: 100,
-          spread: 70,
-          origin: { y: 0.6 },
-        })
-        
-        // Show notification
-        notify(`🎉 Milestone Reached!`, {
-          body: `${milestone.count} stars achieved!`,
-          tag: `milestone-${milestone.count}`,
-        })
-      }
-      
-      onMilestoneReached?.(milestone)
-    },
+    onMilestoneReached: handleMilestoneReached,
     milestones,
   })
 
-  const handleExport = (format: "json" | "csv") => {
+  const handleExport = React.useCallback((format: "json" | "csv") => {
     if (!enableExport) return
 
     const timestamp = new Date().toISOString().split("T")[0]
@@ -116,7 +119,47 @@ const GitHubStarsInternal: React.FC<GitHubStarsProps> = ({
     } else {
       exportAsCSV(repos, `github-stars-${username}-${timestamp}.csv`)
     }
-  }
+  }, [enableExport, repos, stats, username])
+
+  // handleDetailedExport fonksiyonunu memoize et
+  const handleDetailedExport = React.useCallback((e: React.MouseEvent) => {
+    if (!enableExport) return
+    
+    // Show export dropdown
+    const dropdown = document.createElement("div")
+    dropdown.className = "absolute z-50 mt-2 w-48 rounded-md shadow-lg bg-popover border"
+    dropdown.innerHTML = `
+      <div class="py-1">
+        <button class="w-full text-left px-4 py-2 text-sm hover:bg-accent" data-format="json">
+          Export as JSON
+        </button>
+        <button class="w-full text-left px-4 py-2 text-sm hover:bg-accent" data-format="csv">
+          Export as CSV
+        </button>
+      </div>
+    `
+    
+    dropdown.addEventListener("click", (e) => {
+      const target = e.target as HTMLElement
+      const format = target.getAttribute("data-format")
+      if (format === "json" || format === "csv") {
+        handleExport(format)
+        dropdown.remove()
+      }
+    })
+    
+    document.body.appendChild(dropdown)
+    
+    // Position dropdown
+    const rect = (e.target as HTMLElement).getBoundingClientRect()
+    dropdown.style.top = `${rect.bottom + window.scrollY}px`
+    dropdown.style.left = `${rect.left + window.scrollX}px`
+    
+    // Remove on outside click
+    setTimeout(() => {
+      document.addEventListener("click", () => dropdown.remove(), { once: true })
+    }, 0)
+  }, [enableExport, handleExport])
 
   // Loading state
   if (loading) {
@@ -201,42 +244,7 @@ const GitHubStarsInternal: React.FC<GitHubStarsProps> = ({
         return (
           <DetailedVariant 
             {...baseProps} 
-            onExport={() => {
-              // Show export dropdown
-              const dropdown = document.createElement("div")
-              dropdown.className = "absolute z-50 mt-2 w-48 rounded-md shadow-lg bg-popover border"
-              dropdown.innerHTML = `
-                <div class="py-1">
-                  <button class="w-full text-left px-4 py-2 text-sm hover:bg-accent" data-format="json">
-                    Export as JSON
-                  </button>
-                  <button class="w-full text-left px-4 py-2 text-sm hover:bg-accent" data-format="csv">
-                    Export as CSV
-                  </button>
-                </div>
-              `
-              
-              dropdown.addEventListener("click", (e) => {
-                const target = e.target as HTMLElement
-                const format = target.getAttribute("data-format")
-                if (format === "json" || format === "csv") {
-                  handleExport(format)
-                  dropdown.remove()
-                }
-              })
-              
-              document.body.appendChild(dropdown)
-              
-              // Position dropdown
-              const rect = (e.target as HTMLElement).getBoundingClientRect()
-              dropdown.style.top = `${rect.bottom + window.scrollY}px`
-              dropdown.style.left = `${rect.left + window.scrollX}px`
-              
-              // Remove on outside click
-              setTimeout(() => {
-                document.addEventListener("click", () => dropdown.remove(), { once: true })
-              }, 0)
-            }}
+            onExport={handleDetailedExport}
           />
         )
       case "card":