@moontra/moonui-pro 2.0.22 → 2.1.0

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

@@ -0,0 +1,414 @@
+"use client"
+
+import React, { useState, useEffect } from "react"
+import { motion, AnimatePresence } from "framer-motion"
+import { Card, CardContent } from "../ui/card"
+import { Button } from "../ui/button"
+import { Badge } from "../ui/badge"
+import { Skeleton } from "@moontra/moonui"
+import { cn } from "../../lib/utils"
+import { Star, GitFork, Eye, Users, ExternalLink, Github, Lock, Sparkles, RefreshCw } from "lucide-react"
+import { useSubscription } from "../../hooks/use-subscription"
+
+export 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
+  }
+}
+
+export 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
+}
+
+const GitHubStarsInternal: React.FC<GitHubStarsProps> = ({
+  username,
+  repositories,
+  showDescription = true,
+  showTopics = true,
+  showStats = true,
+  showOwner = true,
+  sortBy = "stars",
+  layout = "grid",
+  maxItems = 6,
+  autoRefresh = false,
+  refreshInterval = 300000, // 5 minutes
+  className,
+  onRepositoryClick
+}) => {
+  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
+        }
+      })
+
+      // Limit results
+      if (maxItems) {
+        data = data.slice(0, maxItems)
+      }
+
+      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 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"
+    }
+    return colors[language || ""] || "#6b7280"
+  }
+
+  if (loading) {
+    return (
+      <Card className={cn("w-full", className)}>
+        <CardContent className="p-6">
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <Skeleton className="h-6 w-48" />
+              <Skeleton className="h-8 w-20" />
+            </div>
+            <div className={cn(
+              layout === "grid" 
+                ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
+                : "space-y-4"
+            )}>
+              {Array.from({ length: maxItems || 6 }).map((_, index) => (
+                <Card key={index}>
+                  <CardContent className="p-4">
+                    <div className="space-y-3">
+                      <Skeleton className="h-5 w-3/4" />
+                      <Skeleton className="h-4 w-full" />
+                      <Skeleton className="h-4 w-2/3" />
+                      <div className="flex gap-2">
+                        <Skeleton className="h-6 w-16" />
+                        <Skeleton className="h-6 w-16" />
+                        <Skeleton className="h-6 w-16" />
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  if (error) {
+    return (
+      <Card className={cn("w-full", className)}>
+        <CardContent className="p-6 text-center">
+          <div className="space-y-4">
+            <div className="text-destructive">
+              <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>
+            </div>
+            <Button onClick={fetchRepositories} variant="outline">
+              <RefreshCw className="h-4 w-4 mr-2" />
+              Try Again
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  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>
+                        )}
+
+                        {/* 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>
+                        )}
+
+                        {/* 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>
+                        )}
+
+                        {/* Updated Date */}
+                        <div className="text-xs text-muted-foreground">
+                          Updated {formatDate(repo.updated_at)}
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+              ))}
+            </AnimatePresence>
+          </div>
+
+          {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>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export const GitHubStars: React.FC<GitHubStarsProps> = ({ 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">
+                GitHub Stars 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 <GitHubStarsInternal className={className} {...props} />
+}
+
+export type { GitHubRepository, GitHubStarsProps }