@moontra/moonui-pro 2.17.4 → 2.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.17.4",
+  "version": "2.18.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",
@@ -92,6 +92,7 @@
     "@radix-ui/react-toast": "^1.2.14",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tanstack/react-table": "^8.20.5",
+    "canvas-confetti": "^1.9.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
@@ -114,6 +115,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/canvas-confetti": "^1.9.0",
     "@types/jest": "^30.0.0",
     "@types/node": "^18.16.0",
     "@types/react": "^19.0.0",

package/src/components/calendar-pro/index.tsx

@@ -271,7 +271,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel,
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '../ui/command'
 import { motion, AnimatePresence, LayoutGroup, useMotionValue, useTransform, animate } from 'framer-motion'
 import { format, startOfMonth, endOfMonth, startOfWeek, endOfWeek, addDays, addWeeks, addMonths, addYears, subMonths, subYears, isSameMonth, isSameDay, isToday, isBefore, isAfter, differenceInDays, differenceInWeeks, differenceInMonths, parseISO, startOfDay, endOfDay, isWithinInterval, eachDayOfInterval, getDay, setHours, setMinutes, startOfYear, endOfYear, eachMonthOfInterval, getDaysInMonth, getWeek, startOfISOWeek, endOfISOWeek, addHours, subHours, isSameHour, differenceInHours, differenceInMinutes, addMinutes, subMinutes, isSameMinute, setSeconds, setMilliseconds, subDays, subWeeks } from 'date-fns'
-import { DragDropContext, Droppable, Draggable, DropResult, DraggableProvided, DraggableStateSnapshot, DroppableProvided } from 'react-beautiful-dnd'
+// Removed react-beautiful-dnd imports - using HTML5 drag & drop instead
 import { Calendar as CalendarBase } from '../ui/calendar'
 import { HexColorPicker } from 'react-colorful'
 
@@ -441,6 +441,9 @@ export const CalendarPro = React.forwardRef<HTMLDivElement, CalendarProProps>(({
   theme = 'system',
   ...props
 }, ref) => {
+  // Drag state
+  const [draggedEventId, setDraggedEventId] = useState<string | null>(null)
+  const [dragOverInfo, setDragOverInfo] = useState<{ date: Date; hour?: number } | null>(null)
   const [internalSidebarCollapsed, setInternalSidebarCollapsed] = useState(false)
   const sidebarCollapsed = controlledSidebarCollapsed ?? internalSidebarCollapsed
   
@@ -617,29 +620,91 @@ export const CalendarPro = React.forwardRef<HTMLDivElement, CalendarProProps>(({
   }, [selectedEvent, onEventDelete])
   
   // Handle drag start
-  const handleDragStart = useCallback((event: CalendarEvent) => {
+  const handleDragStart = useCallback((e: React.DragEvent, event: CalendarEvent) => {
     if (!allowEventDragging) return
+    
+    setDraggedEventId(event.id)
     setIsDragging(true)
-    setDraggedEvent(event)
+    
+    // Store event data in dataTransfer
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', event.id)
+    
+    // Create drag image with preserved dimensions
+    const dragImage = e.currentTarget.cloneNode(true) as HTMLElement
+    const originalRect = e.currentTarget.getBoundingClientRect()
+    dragImage.style.opacity = '0.8'
+    dragImage.style.position = 'absolute'
+    dragImage.style.top = '-1000px'
+    dragImage.style.width = `${originalRect.width}px`
+    dragImage.style.height = `${originalRect.height}px`
+    dragImage.style.boxSizing = 'border-box'
+    document.body.appendChild(dragImage)
+    e.dataTransfer.setDragImage(dragImage, e.nativeEvent.offsetX, e.nativeEvent.offsetY)
+    setTimeout(() => document.body.removeChild(dragImage), 0)
   }, [allowEventDragging])
   
-  // Handle drag end
-  const handleDragEnd = useCallback((result: DropResult) => {
-    setIsDragging(false)
-    setDraggedEvent(null)
-    setDropTarget(null)
+  // Handle drag over
+  const handleDragOver = useCallback((e: React.DragEvent, date: Date, hour?: number) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    setDragOverInfo({ date, hour })
+  }, [])
+  
+  // Handle drag leave
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    // Only clear if we're leaving the drop zone entirely
+    const rect = e.currentTarget.getBoundingClientRect()
+    const x = e.clientX
+    const y = e.clientY
+    
+    if (x < rect.left || x >= rect.right || y < rect.top || y >= rect.bottom) {
+      setDragOverInfo(null)
+    }
+  }, [])
+  
+  // Handle drop
+  const handleDrop = useCallback((e: React.DragEvent, date: Date, hour?: number) => {
+    e.preventDefault()
+    
+    const eventId = e.dataTransfer.getData('text/plain')
+    const draggedEvent = events.find(ev => ev.id === eventId)
+    
+    if (!draggedEvent || !onEventDrop) return
+    
+    // Calculate new start and end times
+    let newStart: Date
+    let newEnd: Date
     
-    if (!result.destination || !draggedEvent || !onEventDrop) return
+    if (hour !== undefined) {
+      // Dropped on a specific hour slot
+      newStart = setHours(setMinutes(date, 0), hour)
+    } else {
+      // Dropped on a day (keep original time)
+      const originalHours = draggedEvent.start.getHours()
+      const originalMinutes = draggedEvent.start.getMinutes()
+      newStart = setHours(setMinutes(date, originalMinutes), originalHours)
+    }
     
-    // Calculate new start and end dates based on drop position
-    // This is a simplified version - you'd need to implement proper date calculation
-    // based on the view and drop position
-    const newStart = new Date(result.destination.droppableId)
+    // Keep the same duration
     const duration = differenceInMinutes(draggedEvent.end, draggedEvent.start)
-    const newEnd = addMinutes(newStart, duration)
+    newEnd = addMinutes(newStart, duration)
     
+    // Update event
     onEventDrop(draggedEvent.id, newStart, newEnd)
-  }, [draggedEvent, onEventDrop])
+    
+    // Reset drag state
+    setDraggedEventId(null)
+    setDragOverInfo(null)
+    setIsDragging(false)
+  }, [events, onEventDrop])
+  
+  // Handle drag end (cleanup)
+  const handleDragEnd = useCallback(() => {
+    setDraggedEventId(null)
+    setDragOverInfo(null)
+    setIsDragging(false)
+  }, [])
   
   // Export calendar
   const exportCalendar = useCallback((format: 'ics' | 'csv' | 'json') => {
@@ -721,7 +786,15 @@ END:VCALENDAR`
         <div className="flex-1 overflow-auto">
           <div className="min-h-full">
             {/* All day events */}
-            <div className="border-b p-2">
+            <div 
+              className={cn(
+                "border-b p-2",
+                dragOverInfo?.date && !dragOverInfo?.hour && isSameDay(dragOverInfo.date, currentDate) && "bg-primary/10"
+              )}
+              onDragOver={(e) => handleDragOver(e, currentDate)}
+              onDragLeave={handleDragLeave}
+              onDrop={(e) => handleDrop(e, currentDate)}
+            >
               <div className="text-xs text-muted-foreground mb-1">All Day</div>
               <div className="space-y-1">
                 {dayEvents
@@ -729,10 +802,14 @@ END:VCALENDAR`
                   .map(event => (
                     <div
                       key={event.id}
+                      draggable={allowEventDragging}
+                      onDragStart={(e) => handleDragStart(e, event)}
+                      onDragEnd={handleDragEnd}
                       className="p-2 rounded text-xs cursor-pointer hover:opacity-80"
                       style={{ 
                         backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6',
-                        color: '#ffffff'
+                        color: '#ffffff',
+                        opacity: draggedEventId === event.id ? 0.5 : 1
                       }}
                       onClick={(e) => handleEventClick(event, e)}
                     >
@@ -750,7 +827,13 @@ END:VCALENDAR`
                     {format(setHours(new Date(), hour), timeFormat === '12h' ? 'h a' : 'HH:00')}
                   </div>
                   <div 
-                    className="flex-1 relative border-l cursor-pointer hover:bg-muted/20"
+                    className={cn(
+                      "flex-1 relative border-l cursor-pointer hover:bg-muted/20",
+                      dragOverInfo?.date && dragOverInfo?.hour === hour && isSameDay(dragOverInfo.date, currentDate) && "bg-primary/10"
+                    )}
+                    onDragOver={(e) => handleDragOver(e, currentDate, hour)}
+                    onDragLeave={handleDragLeave}
+                    onDrop={(e) => handleDrop(e, currentDate, hour)}
                     onClick={() => {
                       if (allowEventCreation) {
                         const clickedTime = setHours(setMinutes(currentDate, 0), hour)
@@ -783,13 +866,18 @@ END:VCALENDAR`
                         return (
                           <div
                             key={event.id}
+                            draggable={allowEventDragging}
+                            onDragStart={(e) => handleDragStart(e, event)}
+                            onDragEnd={handleDragEnd}
                             className="absolute left-0 right-0 mx-1 p-1 rounded text-xs cursor-pointer hover:opacity-80 overflow-hidden"
                             style={{
                               top: `${top}px`,
                               height: `${height}px`,
                               backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6',
                               color: '#ffffff',
-                              zIndex: 10
+                              zIndex: 10,
+                              opacity: draggedEventId === event.id ? 0.5 : 1,
+                              cursor: allowEventDragging ? 'move' : 'pointer'
                             }}
                             onClick={(e) => {
                               e.stopPropagation()
@@ -860,14 +948,17 @@ END:VCALENDAR`
                     const dayEvents = eventsInView.filter(event => 
                       isSameDay(new Date(event.start), day) && !event.allDay
                     )
-                    
                     return (
                       <div 
                         key={day.toISOString()} 
                         className={cn(
                           "flex-1 relative border-l border-b cursor-pointer hover:bg-muted/20",
-                          isToday(day) && "bg-primary/5"
+                          isToday(day) && "bg-primary/5",
+                          dragOverInfo?.date && dragOverInfo?.hour === hour && isSameDay(dragOverInfo.date, day) && "bg-primary/10"
                         )}
+                        onDragOver={(e) => handleDragOver(e, day, hour)}
+                        onDragLeave={handleDragLeave}
+                        onDrop={(e) => handleDrop(e, day, hour)}
                         onClick={() => {
                           if (allowEventCreation) {
                             const clickedTime = setHours(setMinutes(day, 0), hour)
@@ -898,13 +989,18 @@ END:VCALENDAR`
                             return (
                               <div
                                 key={event.id}
+                                draggable={allowEventDragging}
+                                onDragStart={(e) => handleDragStart(e, event)}
+                                onDragEnd={handleDragEnd}
                                 className="absolute left-0 right-0 mx-1 p-1 rounded text-xs cursor-pointer hover:opacity-80 overflow-hidden"
                                 style={{
                                   top: `${top}px`,
                                   height: `${height}px`,
                                   backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6',
                                   color: '#ffffff',
-                                  zIndex: 10
+                                  zIndex: 10,
+                                  opacity: draggedEventId === event.id ? 0.5 : 1,
+                                  cursor: allowEventDragging ? 'move' : 'pointer'
                                 }}
                                 onClick={(e) => {
                                   e.stopPropagation()
@@ -971,8 +1067,12 @@ END:VCALENDAR`
                       "min-h-[100px] p-2 border rounded-lg cursor-pointer transition-colors",
                       !isCurrentMonth && "opacity-50",
                       isToday(day) && "bg-primary/10 border-primary",
-                      "hover:bg-muted/50"
+                      "hover:bg-muted/50",
+                      dragOverInfo?.date && !dragOverInfo?.hour && isSameDay(dragOverInfo.date, day) && "bg-primary/20 border-primary"
                     )}
+                    onDragOver={(e) => handleDragOver(e, day)}
+                    onDragLeave={handleDragLeave}
+                    onDrop={(e) => handleDrop(e, day)}
                     onClick={() => handleDateSelect(day)}
                   >
                     <div className={cn(
@@ -986,10 +1086,15 @@ END:VCALENDAR`
                         return (
                           <motion.div
                             key={event.id}
+                            draggable={allowEventDragging}
+                            onDragStart={(e) => handleDragStart(e, event)}
+                            onDragEnd={handleDragEnd}
                             className="text-xs p-1 rounded cursor-pointer truncate"
                             style={{
                               backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6',
-                              color: '#ffffff'
+                              color: '#ffffff',
+                              opacity: draggedEventId === event.id ? 0.5 : 1,
+                              cursor: allowEventDragging ? 'move' : 'pointer'
                             }}
                             whileHover={{ scale: 1.02 }}
                             whileTap={{ scale: 0.98 }}

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

@@ -0,0 +1,413 @@
+import { GitHubRepository, GitHubStats, GitHubActivity, LanguageStats, RateLimitInfo, StarHistory } from "./types"
+
+// Cache management
+const cache = new Map<string, { data: any; timestamp: number; expiresAt: number }>()
+
+// Language colors
+export const LANGUAGE_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",
+  Shell: "#89e051",
+  Dart: "#0175c2",
+  Elixir: "#6e4a7e",
+  Scala: "#c22d40",
+  R: "#198ce7",
+  Julia: "#9558b2",
+  Lua: "#000080",
+  Perl: "#39457e",
+  Haskell: "#5e5086",
+  Clojure: "#db5855",
+  Erlang: "#b83998",
+  Objective_C: "#438eff",
+  // Add more as needed
+}
+
+// API base URL
+const API_BASE = "https://api.github.com"
+
+// Helper to make authenticated requests
+async function githubFetch(url: string, token?: string): Promise<Response> {
+  const headers: HeadersInit = {
+    Accept: "application/vnd.github.v3+json",
+  }
+
+  if (token) {
+    headers.Authorization = `token ${token}`
+  }
+
+  const response = await fetch(url, { headers })
+
+  if (response.status === 403 && response.headers.get("X-RateLimit-Remaining") === "0") {
+    const resetTime = parseInt(response.headers.get("X-RateLimit-Reset") || "0") * 1000
+    const resetDate = new Date(resetTime)
+    throw new Error(`GitHub API rate limit exceeded. Resets at ${resetDate.toLocaleTimeString()}`)
+  }
+
+  if (!response.ok) {
+    throw new Error(`GitHub API error: ${response.status} ${response.statusText}`)
+  }
+
+  return response
+}
+
+// Get rate limit info
+export async function getRateLimitInfo(token?: string): Promise<RateLimitInfo> {
+  const cacheKey = `rate-limit-${token || "public"}`
+  const cached = cache.get(cacheKey)
+
+  if (cached && cached.expiresAt > Date.now()) {
+    return cached.data
+  }
+
+  const response = await githubFetch(`${API_BASE}/rate_limit`, token)
+  const data = await response.json()
+
+  const rateLimitInfo: RateLimitInfo = {
+    limit: data.rate.limit,
+    remaining: data.rate.remaining,
+    reset: data.rate.reset * 1000,
+    used: data.rate.used,
+  }
+
+  cache.set(cacheKey, {
+    data: rateLimitInfo,
+    timestamp: Date.now(),
+    expiresAt: Date.now() + 60000, // Cache for 1 minute
+  })
+
+  return rateLimitInfo
+}
+
+// Fetch user repositories
+export async function fetchUserRepositories(
+  username: string,
+  token?: string,
+  options?: {
+    sort?: string
+    per_page?: number
+    page?: number
+  }
+): Promise<GitHubRepository[]> {
+  const params = new URLSearchParams({
+    sort: options?.sort || "updated",
+    per_page: String(options?.per_page || 100),
+    page: String(options?.page || 1),
+  })
+
+  const cacheKey = `repos-${username}-${params.toString()}`
+  const cached = cache.get(cacheKey)
+
+  if (cached && cached.expiresAt > Date.now()) {
+    return cached.data
+  }
+
+  const response = await githubFetch(`${API_BASE}/users/${username}/repos?${params}`, token)
+  const repos = await response.json()
+
+  cache.set(cacheKey, {
+    data: repos,
+    timestamp: Date.now(),
+    expiresAt: Date.now() + 300000, // Cache for 5 minutes
+  })
+
+  return repos
+}
+
+// Fetch single repository
+export async function fetchRepository(
+  owner: string,
+  repo: string,
+  token?: string
+): Promise<GitHubRepository> {
+  const cacheKey = `repo-${owner}-${repo}`
+  const cached = cache.get(cacheKey)
+
+  if (cached && cached.expiresAt > Date.now()) {
+    return cached.data
+  }
+
+  const response = await githubFetch(`${API_BASE}/repos/${owner}/${repo}`, token)
+  const repository = await response.json()
+
+  cache.set(cacheKey, {
+    data: repository,
+    timestamp: Date.now(),
+    expiresAt: Date.now() + 300000, // Cache for 5 minutes
+  })
+
+  return repository
+}
+
+// Fetch repository contributors count
+export async function fetchContributorsCount(
+  owner: string,
+  repo: string,
+  token?: string
+): Promise<number> {
+  const cacheKey = `contributors-${owner}-${repo}`
+  const cached = cache.get(cacheKey)
+
+  if (cached && cached.expiresAt > Date.now()) {
+    return cached.data
+  }
+
+  try {
+    const response = await githubFetch(
+      `${API_BASE}/repos/${owner}/${repo}/contributors?per_page=1&anon=true`,
+      token
+    )
+    
+    // Get total count from Link header
+    const linkHeader = response.headers.get("Link")
+    if (linkHeader) {
+      const match = linkHeader.match(/page=(\d+)>; rel="last"/)
+      if (match) {
+        const count = parseInt(match[1])
+        cache.set(cacheKey, {
+          data: count,
+          timestamp: Date.now(),
+          expiresAt: Date.now() + 3600000, // Cache for 1 hour
+        })
+        return count
+      }
+    }
+    
+    // If no pagination, count the results
+    const contributors = await response.json()
+    const count = contributors.length
+    
+    cache.set(cacheKey, {
+      data: count,
+      timestamp: Date.now(),
+      expiresAt: Date.now() + 3600000, // Cache for 1 hour
+    })
+    
+    return count
+  } catch (error) {
+    console.error("Failed to fetch contributors:", error)
+    return 0
+  }
+}
+
+// Fetch repository star history (limited without token)
+export async function fetchStarHistory(
+  owner: string,
+  repo: string,
+  token?: string
+): Promise<StarHistory[]> {
+  const cacheKey = `star-history-${owner}-${repo}`
+  const cached = cache.get(cacheKey)
+
+  if (cached && cached.expiresAt > Date.now()) {
+    return cached.data
+  }
+
+  try {
+    // This is a simplified version - for full star history you'd need
+    // to use the stargazers API with Accept: application/vnd.github.v3.star+json
+    // header and paginate through all results
+    const response = await githubFetch(`${API_BASE}/repos/${owner}/${repo}`, token)
+    const repoData = await response.json()
+    
+    // For now, return current count as single data point
+    const history: StarHistory[] = [{
+      date: new Date().toISOString(),
+      count: repoData.stargazers_count,
+      repository: repoData.full_name,
+    }]
+    
+    cache.set(cacheKey, {
+      data: history,
+      timestamp: Date.now(),
+      expiresAt: Date.now() + 3600000, // Cache for 1 hour
+    })
+    
+    return history
+  } catch (error) {
+    console.error("Failed to fetch star history:", error)
+    return []
+  }
+}
+
+// Calculate repository statistics
+export function calculateStats(repositories: GitHubRepository[]): GitHubStats {
+  const totalStars = repositories.reduce((sum, repo) => sum + repo.stargazers_count, 0)
+  const totalForks = repositories.reduce((sum, repo) => sum + repo.forks_count, 0)
+  const totalWatchers = repositories.reduce((sum, repo) => sum + repo.watchers_count, 0)
+  const totalIssues = repositories.reduce((sum, repo) => sum + repo.open_issues_count, 0)
+  
+  const avgStarsPerRepo = repositories.length > 0 ? totalStars / repositories.length : 0
+  
+  const mostStarredRepo = repositories.reduce((max, repo) => 
+    repo.stargazers_count > (max?.stargazers_count || 0) ? repo : max
+  , null as GitHubRepository | null)
+  
+  // Calculate language statistics
+  const languageMap = new Map<string, number>()
+  repositories.forEach(repo => {
+    if (repo.language) {
+      languageMap.set(repo.language, (languageMap.get(repo.language) || 0) + 1)
+    }
+  })
+  
+  const totalRepos = repositories.length
+  const languages: LanguageStats[] = Array.from(languageMap.entries())
+    .map(([language, count]) => ({
+      language,
+      count,
+      percentage: (count / totalRepos) * 100,
+      color: LANGUAGE_COLORS[language] || "#6b7280",
+    }))
+    .sort((a, b) => b.count - a.count)
+  
+  // Generate recent activity (mock for now)
+  const recentActivity: GitHubActivity[] = repositories
+    .slice(0, 5)
+    .map(repo => ({
+      type: "star" as const,
+      repository: repo.full_name,
+      timestamp: repo.updated_at,
+      description: `Repository updated`,
+    }))
+  
+  return {
+    totalStars,
+    totalForks,
+    totalWatchers,
+    totalIssues,
+    avgStarsPerRepo,
+    mostStarredRepo,
+    recentActivity,
+    languages,
+  }
+}
+
+// Format numbers for display
+export function formatNumber(num: number): string {
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(1) + "M"
+  }
+  if (num >= 1000) {
+    return (num / 1000).toFixed(1) + "k"
+  }
+  return num.toString()
+}
+
+// Format date for display
+export function formatDate(dateString: string): string {
+  const date = new Date(dateString)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
+  
+  if (diffDays === 0) {
+    const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
+    if (diffHours === 0) {
+      const diffMinutes = Math.floor(diffMs / (1000 * 60))
+      return `${diffMinutes} minutes ago`
+    }
+    return `${diffHours} hours ago`
+  }
+  
+  if (diffDays === 1) return "yesterday"
+  if (diffDays < 7) return `${diffDays} days ago`
+  if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`
+  if (diffDays < 365) return `${Math.floor(diffDays / 30)} months ago`
+  
+  return date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  })
+}
+
+// Clear cache
+export function clearCache(pattern?: string): void {
+  if (pattern) {
+    for (const key of cache.keys()) {
+      if (key.includes(pattern)) {
+        cache.delete(key)
+      }
+    }
+  } else {
+    cache.clear()
+  }
+}
+
+// Export data as JSON
+export function exportData(data: any, filename: string): void {
+  const jsonString = JSON.stringify(data, null, 2)
+  const blob = new Blob([jsonString], { type: "application/json" })
+  const url = URL.createObjectURL(blob)
+  
+  const link = document.createElement("a")
+  link.href = url
+  link.download = filename
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  
+  URL.revokeObjectURL(url)
+}
+
+// Export data as CSV
+export function exportAsCSV(repositories: GitHubRepository[], filename: string): void {
+  const headers = [
+    "Name",
+    "Owner",
+    "Stars",
+    "Forks",
+    "Watchers",
+    "Issues",
+    "Language",
+    "Description",
+    "URL",
+    "Created",
+    "Updated",
+  ]
+  
+  const rows = repositories.map(repo => [
+    repo.name,
+    repo.owner.login,
+    repo.stargazers_count,
+    repo.forks_count,
+    repo.watchers_count,
+    repo.open_issues_count,
+    repo.language || "",
+    repo.description || "",
+    repo.html_url,
+    new Date(repo.created_at).toLocaleDateString(),
+    new Date(repo.updated_at).toLocaleDateString(),
+  ])
+  
+  const csvContent = [
+    headers.join(","),
+    ...rows.map(row => row.map(cell => `"${cell}"`).join(",")),
+  ].join("\n")
+  
+  const blob = new Blob([csvContent], { type: "text/csv" })
+  const url = URL.createObjectURL(blob)
+  
+  const link = document.createElement("a")
+  link.href = url
+  link.download = filename
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  
+  URL.revokeObjectURL(url)
+}