@moontra/moonui-pro 2.17.5 → 2.18.0

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

@@ -1,170 +1,124 @@
 "use client"
 
-import React, { useState, useEffect } from "react"
-import { motion, AnimatePresence } from "framer-motion"
+import React, { useMemo } from "react"
 import { Card, CardContent } from "../ui/card"
 import { Button } from "../ui/button"
-import { MoonUIBadgePro as Badge } from "../ui/badge"
 import { MoonUISkeletonPro as Skeleton } from "../ui/skeleton"
 import { cn } from "../../lib/utils"
-import { Star, GitFork, Eye, Users, ExternalLink, Github, Lock, Sparkles, RefreshCw } from "lucide-react"
+import { Lock, Sparkles, RefreshCw, Github, Download, FileJson, FileSpreadsheet } from "lucide-react"
 import { useSubscription } from "../../hooks/use-subscription"
-
-interface GitHubRepository {
-  id: number
-  name: string
-  full_name: string
-  description: string | null
-  html_url: string
-  homepage: string | null
-  stargazers_count: number
-  watchers_count: number
-  forks_count: number
-  language: string | null
-  topics: string[]
-  created_at: string
-  updated_at: string
-  owner: {
-    login: string
-    avatar_url: string
-    html_url: string
-  }
-}
-
-interface GitHubStarsProps {
-  username: string
-  repositories?: string[]
-  showDescription?: boolean
-  showTopics?: boolean
-  showStats?: boolean
-  showOwner?: boolean
-  sortBy?: "stars" | "forks" | "updated" | "created"
-  layout?: "grid" | "list"
-  maxItems?: number
-  autoRefresh?: boolean
-  refreshInterval?: number
-  className?: string
-  onRepositoryClick?: (repo: GitHubRepository) => void
-}
+import { useGitHubData, useGitHubNotifications } from "./hooks"
+import { exportData, exportAsCSV } from "./github-api"
+import {
+  MinimalVariant,
+  CompactVariant,
+  CardVariant,
+  DetailedVariant,
+} from "./variants"
+import type { GitHubStarsProps } from "./types"
+import { motion, AnimatePresence } from "framer-motion"
+import confetti from "canvas-confetti"
 
 const GitHubStarsInternal: React.FC<GitHubStarsProps> = ({
-  username,
+  username = "",
+  repository,
   repositories,
+  token,
+  variant = "card",
+  layout = "grid",
   showDescription = true,
   showTopics = true,
   showStats = true,
   showOwner = true,
+  showLanguage = true,
+  showActivity = false,
+  showTrending = false,
+  showMilestones = false,
+  showComparison = false,
+  showHistory = false,
   sortBy = "stars",
-  layout = "grid",
   maxItems = 6,
   autoRefresh = false,
-  refreshInterval = 300000, // 5 minutes
+  refreshInterval = 300000,
+  enableNotifications = false,
+  enableExport = true,
+  enableAnalytics = false,
+  cacheEnabled = true,
+  cacheDuration = 300000,
+  animation = "fade",
+  animationDuration = 0.3,
+  staggerDelay = 0.05,
+  milestones = [10, 50, 100, 500, 1000, 5000, 10000],
+  celebrateAt = [100, 1000, 10000],
+  onRepositoryClick,
+  onStarClick,
+  onMilestoneReached,
+  onDataUpdate,
+  onError,
   className,
-  onRepositoryClick
+  theme = "auto",
+  size = "md",
+  customColors,
 }) => {
-  const [repos, setRepos] = useState<GitHubRepository[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [lastUpdated, setLastUpdated] = useState<Date | null>(null)
-
-  const fetchRepositories = async () => {
-    try {
-      setLoading(true)
-      setError(null)
-
-      let url = `https://api.github.com/users/${username}/repos?sort=${sortBy}&per_page=100`
-      
-      const response = await fetch(url)
-      if (!response.ok) {
-        throw new Error(`GitHub API error: ${response.status}`)
-      }
-
-      let data: GitHubRepository[] = await response.json()
-
-      // Filter specific repositories if provided
-      if (repositories && repositories.length > 0) {
-        data = data.filter(repo => repositories.includes(repo.name))
-      }
-
-      // Sort repositories
-      data.sort((a, b) => {
-        switch (sortBy) {
-          case "stars":
-            return b.stargazers_count - a.stargazers_count
-          case "forks":
-            return b.forks_count - a.forks_count
-          case "updated":
-            return new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
-          case "created":
-            return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
-          default:
-            return 0
-        }
-      })
+  const { notify } = useGitHubNotifications(enableNotifications)
 
-      // Limit results
-      if (maxItems) {
-        data = data.slice(0, maxItems)
+  const {
+    repos,
+    stats,
+    loading,
+    error,
+    rateLimitInfo,
+    lastUpdated,
+    refresh,
+  } = useGitHubData({
+    username,
+    repository,
+    repositories,
+    token,
+    autoRefresh,
+    refreshInterval,
+    sortBy,
+    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)
+    },
+    milestones,
+  })
 
-      setRepos(data)
-      setLastUpdated(new Date())
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to fetch repositories")
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  useEffect(() => {
-    fetchRepositories()
-  }, [username, repositories, sortBy, maxItems])
-
-  useEffect(() => {
-    if (!autoRefresh) return
-
-    const interval = setInterval(fetchRepositories, refreshInterval)
-    return () => clearInterval(interval)
-  }, [autoRefresh, refreshInterval])
-
-  const formatNumber = (num: number): string => {
-    if (num >= 1000) {
-      return (num / 1000).toFixed(1) + "k"
-    }
-    return num.toString()
-  }
-
-  const formatDate = (dateString: string): string => {
-    const date = new Date(dateString)
-    return date.toLocaleDateString("en-US", {
-      year: "numeric",
-      month: "short",
-      day: "numeric"
-    })
-  }
+  const handleExport = (format: "json" | "csv") => {
+    if (!enableExport) return
 
-  const getLanguageColor = (language: string | null): string => {
-    const colors: Record<string, string> = {
-      JavaScript: "#f7df1e",
-      TypeScript: "#3178c6",
-      Python: "#3776ab",
-      Java: "#ed8b00",
-      "C++": "#00599c",
-      "C#": "#239120",
-      Go: "#00add8",
-      Rust: "#000000",
-      Swift: "#fa7343",
-      Kotlin: "#7f52ff",
-      PHP: "#777bb4",
-      Ruby: "#cc342d",
-      HTML: "#e34f26",
-      CSS: "#1572b6",
-      Vue: "#4fc08d",
-      React: "#61dafb"
+    const timestamp = new Date().toISOString().split("T")[0]
+    
+    if (format === "json") {
+      exportData(
+        { repositories: repos, statistics: stats, exportDate: new Date() },
+        `github-stars-${username}-${timestamp}.json`
+      )
+    } else {
+      exportAsCSV(repos, `github-stars-${username}-${timestamp}.csv`)
     }
-    return colors[language || ""] || "#6b7280"
   }
 
+  // Loading state
   if (loading) {
     return (
       <Card className={cn("w-full", className)}>
@@ -202,6 +156,7 @@ const GitHubStarsInternal: React.FC<GitHubStarsProps> = ({
     )
   }
 
+  // Error state
   if (error) {
     return (
       <Card className={cn("w-full", className)}>
@@ -211,8 +166,13 @@ const GitHubStarsInternal: React.FC<GitHubStarsProps> = ({
               <Github className="h-12 w-12 mx-auto mb-2" />
               <h3 className="font-semibold">Failed to load repositories</h3>
               <p className="text-sm text-muted-foreground">{error}</p>
+              {rateLimitInfo && rateLimitInfo.remaining === 0 && (
+                <p className="text-xs text-muted-foreground mt-2">
+                  Rate limit will reset at {new Date(rateLimitInfo.reset).toLocaleTimeString()}
+                </p>
+              )}
             </div>
-            <Button onClick={fetchRepositories} variant="outline">
+            <Button onClick={refresh} variant="outline">
               <RefreshCw className="h-4 w-4 mr-2" />
               Try Again
             </Button>
@@ -222,154 +182,122 @@ const GitHubStarsInternal: React.FC<GitHubStarsProps> = ({
     )
   }
 
-  return (
-    <Card className={cn("w-full", className)}>
-      <CardContent className="p-6">
-        <div className="space-y-6">
-          {/* Header */}
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <Github className="h-6 w-6" />
-              <div>
-                <h3 className="font-semibold text-lg">{username}'s Repositories</h3>
-                {lastUpdated && (
-                  <p className="text-sm text-muted-foreground">
-                    Last updated: {lastUpdated.toLocaleTimeString()}
-                  </p>
-                )}
-              </div>
-            </div>
-            
-            <div className="flex items-center gap-2">
-              <Badge variant="outline">
-                {repos.length} repos
-              </Badge>
-              {autoRefresh && (
-                <Badge variant="secondary">
-                  Auto-refresh
-                </Badge>
-              )}
-              <Button onClick={fetchRepositories} variant="outline" size="sm">
-                <RefreshCw className="h-4 w-4" />
-              </Button>
-            </div>
-          </div>
-
-          {/* Repository Grid/List */}
-          <div className={cn(
-            layout === "grid" 
-              ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
-              : "space-y-4"
-          )}>
-            <AnimatePresence>
-              {repos.map((repo, index) => (
-                <motion.div
-                  key={repo.id}
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -20 }}
-                  transition={{ delay: index * 0.1 }}
-                >
-                  <Card 
-                    className="h-full hover:shadow-md transition-shadow cursor-pointer group"
-                    onClick={() => onRepositoryClick?.(repo)}
-                  >
-                    <CardContent className="p-4">
-                      <div className="space-y-3">
-                        {/* Repository Name */}
-                        <div className="flex items-start justify-between">
-                          <div className="flex-1 min-w-0">
-                            <h4 className="font-semibold text-sm group-hover:text-primary transition-colors">
-                              {repo.name}
-                            </h4>
-                            {showOwner && (
-                              <p className="text-xs text-muted-foreground truncate">
-                                {repo.owner.login}
-                              </p>
-                            )}
-                          </div>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="opacity-0 group-hover:opacity-100 transition-opacity p-1 h-auto"
-                            onClick={(e) => {
-                              e.stopPropagation()
-                              window.open(repo.html_url, '_blank')
-                            }}
-                          >
-                            <ExternalLink className="h-3 w-3" />
-                          </Button>
-                        </div>
-
-                        {/* Description */}
-                        {showDescription && repo.description && (
-                          <p className="text-sm text-muted-foreground line-clamp-2">
-                            {repo.description}
-                          </p>
-                        )}
+  // Render based on variant
+  const renderVariant = () => {
+    const baseProps = {
+      repos,
+      stats,
+      loading,
+      className,
+      onRepositoryClick,
+    }
 
-                        {/* Topics */}
-                        {showTopics && repo.topics.length > 0 && (
-                          <div className="flex flex-wrap gap-1">
-                            {repo.topics.slice(0, 3).map((topic) => (
-                              <Badge key={topic} variant="secondary" className="text-xs">
-                                {topic}
-                              </Badge>
-                            ))}
-                            {repo.topics.length > 3 && (
-                              <Badge variant="outline" className="text-xs">
-                                +{repo.topics.length - 3}
-                              </Badge>
-                            )}
-                          </div>
-                        )}
+    switch (variant) {
+      case "minimal":
+        return <MinimalVariant {...baseProps} />
+      case "compact":
+        return <CompactVariant {...baseProps} />
+      case "detailed":
+        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)
+            }}
+          />
+        )
+      case "card":
+      default:
+        return <CardVariant {...baseProps} />
+    }
+  }
 
-                        {/* Stats */}
-                        {showStats && (
-                          <div className="flex items-center gap-4 text-sm text-muted-foreground">
-                            {repo.language && (
-                              <div className="flex items-center gap-1">
-                                <div
-                                  className="w-3 h-3 rounded-full"
-                                  style={{ backgroundColor: getLanguageColor(repo.language) }}
-                                />
-                                <span className="text-xs">{repo.language}</span>
-                              </div>
-                            )}
-                            
-                            <div className="flex items-center gap-1">
-                              <Star className="h-3 w-3" />
-                              <span className="text-xs">{formatNumber(repo.stargazers_count)}</span>
-                            </div>
-                            
-                            <div className="flex items-center gap-1">
-                              <GitFork className="h-3 w-3" />
-                              <span className="text-xs">{formatNumber(repo.forks_count)}</span>
-                            </div>
-                          </div>
-                        )}
+  // Apply animation wrapper
+  const animationVariants = {
+    bounce: {
+      initial: { scale: 0.9, opacity: 0 },
+      animate: { scale: 1, opacity: 1 },
+      transition: { type: "spring", stiffness: 300, damping: 20 },
+    },
+    pulse: {
+      initial: { scale: 0.95, opacity: 0 },
+      animate: { scale: 1, opacity: 1 },
+      transition: { duration: animationDuration },
+    },
+    fade: {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      transition: { duration: animationDuration },
+    },
+    scale: {
+      initial: { scale: 0, opacity: 0 },
+      animate: { scale: 1, opacity: 1 },
+      transition: { duration: animationDuration },
+    },
+    slide: {
+      initial: { x: -20, opacity: 0 },
+      animate: { x: 0, opacity: 1 },
+      transition: { duration: animationDuration },
+    },
+    none: {
+      initial: {},
+      animate: {},
+      transition: {},
+    },
+  }
 
-                        {/* Updated Date */}
-                        <div className="text-xs text-muted-foreground">
-                          Updated {formatDate(repo.updated_at)}
-                        </div>
-                      </div>
-                    </CardContent>
-                  </Card>
-                </motion.div>
-              ))}
-            </AnimatePresence>
-          </div>
+  const selectedAnimation = animationVariants[animation]
 
-          {repos.length === 0 && (
-            <div className="text-center py-8">
-              <Github className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
-              <p className="text-muted-foreground">No repositories found</p>
-            </div>
-          )}
+  return (
+    <motion.div
+      {...selectedAnimation}
+      className={cn("w-full", className)}
+    >
+      {renderVariant()}
+      
+      {/* Rate limit warning */}
+      {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">
+            ⚠️ Low API rate limit: {rateLimitInfo.remaining} requests remaining.
+            {token ? "" : " Consider adding a GitHub token for higher limits."}
+          </p>
         </div>
-      </CardContent>
-    </Card>
+      )}
+    </motion.div>
   )
 }
 
@@ -377,8 +305,6 @@ export const GitHubStars: React.FC<GitHubStarsProps> = ({ className, ...props })
   // Check if we're in docs mode or have pro access
   const { hasProAccess, isLoading } = useSubscription()
   
-  // In docs mode, always show the component
-  
   // If not in docs mode and no pro access, show upgrade prompt
   if (!isLoading && !hasProAccess) {
     return (
@@ -409,4 +335,5 @@ export const GitHubStars: React.FC<GitHubStarsProps> = ({ className, ...props })
   return <GitHubStarsInternal className={className} {...props} />
 }
 
-export type { GitHubRepository, GitHubStarsProps }
+export type { GitHubRepository, GitHubStarsProps } from "./types"
+export { LANGUAGE_COLORS } from "./github-api"