@tscircuit/fake-snippets 0.0.121 → 0.0.122

package/src/components/package-port/QuickOpen.tsx

@@ -1,241 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react"
-import {
-  Search,
-  Code,
-  Braces,
-  FileIcon,
-  Hash,
-  BookOpen,
-  FileText,
-} from "lucide-react"
-import type { PackageFile } from "@/types/package"
-import { fuzzyMatch } from "../ViewPackagePage/utils/fuzz-search"
-
-interface ScoredFile extends PackageFile {
-  score: number
-  matches: number[]
-}
-
-interface QuickOpenProps {
-  files: PackageFile[]
-  currentFile: string | null
-  onFileSelect: (path: string) => void
-  onClose: () => void
-}
-
-const QuickOpen = ({
-  files,
-  currentFile,
-  onFileSelect,
-  onClose,
-}: QuickOpenProps) => {
-  const [query, setQuery] = useState("")
-  const [selected, setSelected] = useState(0)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const selectedItemRef = useRef<HTMLDivElement>(null)
-
-  const scoredFiles = useMemo((): ScoredFile[] => {
-    if (!query) return files.map((f) => ({ ...f, score: 0, matches: [] }))
-
-    return files
-      .map((file) => {
-        const { score, matches } = fuzzyMatch(query, file.path)
-        return { ...file, score, matches }
-      })
-      .filter((f) => f.score >= 0)
-      .sort((a, b) => {
-        // Current file gets priority
-        if (a.path === currentFile) return -1
-        if (b.path === currentFile) return 1
-        // Then by score
-        return b.score - a.score
-      })
-  }, [files, query, currentFile])
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      switch (e.key) {
-        case "ArrowDown":
-          e.preventDefault()
-          setSelected((prev) => Math.min(prev + 1, scoredFiles.length - 1))
-          break
-        case "ArrowUp":
-          e.preventDefault()
-          setSelected((prev) => Math.max(prev - 1, 0))
-          break
-        case "Enter":
-          e.preventDefault()
-          if (scoredFiles[selected]) {
-            onFileSelect(scoredFiles[selected].path)
-            onClose()
-          }
-          break
-        case "Escape":
-          e.preventDefault()
-          onClose()
-          break
-      }
-    },
-    [scoredFiles, selected, onFileSelect, onClose],
-  )
-
-  useEffect(() => {
-    inputRef.current?.focus()
-  }, [])
-
-  useEffect(() => {
-    setSelected(0)
-  }, [query])
-
-  useEffect(() => {
-    if (selectedItemRef.current) {
-      selectedItemRef.current.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-      })
-    }
-  }, [selected])
-
-  const getFileIcon = useCallback((path: string) => {
-    const ext = path.split(".").pop()?.toLowerCase()
-    const iconProps = { size: 16, className: "" }
-
-    switch (ext) {
-      case "tsx":
-        iconProps.className = "text-blue-500"
-        return <Code {...iconProps} />
-      case "ts":
-        iconProps.className = "text-blue-600"
-        return <Code {...iconProps} />
-      case "jsx":
-        iconProps.className = "text-cyan-500"
-        return <Code {...iconProps} />
-      case "js":
-        iconProps.className = "text-yellow-500"
-        return <Code {...iconProps} />
-      case "json":
-        iconProps.className = "text-orange-500"
-        return <Braces {...iconProps} />
-      case "md":
-        iconProps.className = "text-gray-600"
-        return <BookOpen {...iconProps} />
-      case "css":
-        iconProps.className = "text-pink-500"
-        return <Hash {...iconProps} />
-      case "html":
-        iconProps.className = "text-red-500"
-        return <FileText {...iconProps} />
-      default:
-        iconProps.className = "text-gray-400"
-        return <FileIcon {...iconProps} />
-    }
-  }, [])
-
-  const renderHighlighted = useCallback(
-    (file: ScoredFile) => {
-      if (!query) return file.path
-
-      const chars = file.path.split("")
-      return chars.map((char, i) => (
-        <span key={i} className={file.matches.includes(i) ? "bg-blue-200" : ""}>
-          {char}
-        </span>
-      ))
-    },
-    [query],
-  )
-
-  return (
-    <div
-      className="fixed inset-0 bg-black/20 backdrop-blur-sm flex items-start justify-center pt-16 sm:pt-20 z-50 p-4"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) {
-          onClose()
-        }
-      }}
-    >
-      <div
-        className="bg-white/95 backdrop-blur-md rounded-xl shadow-2xl border border-slate-200/50 w-full max-w-lg mx-auto"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="p-4 border-b border-slate-100">
-          <div className="relative">
-            <Search
-              size={16}
-              className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"
-            />
-            <input
-              ref={inputRef}
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder="Search files..."
-              className="w-full pl-10 pr-4 py-2.5 text-sm bg-slate-50/80 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-slate-950/10 focus:border-slate-400 transition-all duration-200"
-            />
-          </div>
-        </div>
-
-        <div className="max-h-80 overflow-y-auto py-2">
-          {scoredFiles.length === 0 ? (
-            <div className="p-6 text-center select-none text-slate-400 text-sm">
-              {query ? "No matching files" : "No files"}
-            </div>
-          ) : (
-            scoredFiles.map((file, index) => (
-              <div
-                key={file.path}
-                ref={index === selected ? selectedItemRef : null}
-                onClick={() => {
-                  onFileSelect(file.path)
-                  onClose()
-                }}
-                className={`px-4 py-2 cursor-pointer flex items-center gap-3 transition-all duration-150 ${
-                  index === selected
-                    ? "bg-slate-100 border-r-2 border-slate-500"
-                    : "hover:bg-slate-50"
-                }`}
-              >
-                <div className="flex-shrink-0">{getFileIcon(file.path)}</div>
-                <div className="flex-1 min-w-0 text-sm font-mono text-slate-900 truncate">
-                  {renderHighlighted(file)}
-                </div>
-                {file.path === currentFile && (
-                  <span className="text-xs px-2 py-0.5 rounded-full bg-slate-100 text-slate-700">
-                    current
-                  </span>
-                )}
-              </div>
-            ))
-          )}
-        </div>
-
-        <div className="px-4 select-none py-3 text-xs border-t border-slate-100 bg-slate-50/50 rounded-b-xl">
-          <div className="flex items-center justify-between text-slate-500">
-            <div className="flex gap-4">
-              <span className="flex items-center gap-1.5">
-                <kbd className="px-2 py-1 font-mono bg-white border border-slate-200 rounded shadow-sm">
-                  ↑↓
-                </kbd>
-                navigate
-              </span>
-              <span className="flex items-center gap-1.5">
-                <kbd className="px-2 py-1 font-mono bg-white border border-slate-200 rounded shadow-sm">
-                  ↵
-                </kbd>
-                select
-              </span>
-            </div>
-            <span className="flex items-center gap-1.5">
-              <kbd className="px-2 py-1 font-mono bg-white border border-slate-200 rounded shadow-sm">
-                esc
-              </kbd>
-              close
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default QuickOpen

package/src/components/preview/BuildsList.tsx

@@ -1,237 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Skeleton } from "@/components/ui/skeleton"
-import { GitBranch, MoreHorizontal, GitCommit } from "lucide-react"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table"
-import { getBuildStatus, StatusIcon } from "."
-import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
-import { Package, PackageBuild } from "fake-snippets-api/lib/db/schema"
-import { usePackageReleasesByPackageId } from "@/hooks/use-package-release"
-import { useQueries } from "react-query"
-import { useAxios } from "@/hooks/use-axios"
-import { useLocation } from "wouter"
-
-export const BuildsList = ({ pkg }: { pkg: Package }) => {
-  const { data: releases, isLoading: isLoadingReleases } =
-    usePackageReleasesByPackageId(pkg.package_id)
-  const axios = useAxios()
-  const [, setLocation] = useLocation()
-  // Get the latest build for each release to show status
-  const latestBuildQueries = useQueries(
-    (releases || [])
-      .filter((release) => release.latest_package_build_id)
-      .map((release) => ({
-        queryKey: ["packageBuild", release.latest_package_build_id],
-        queryFn: async () => {
-          if (!release.latest_package_build_id) return null
-          const { data } = await axios.get("/package_builds/get", {
-            params: { package_build_id: release.latest_package_build_id },
-          })
-          return data.package_build
-        },
-        enabled: Boolean(release.latest_package_build_id),
-        retry: false,
-        refetchOnWindowFocus: false,
-      })),
-  )
-
-  const isLoading =
-    isLoadingReleases || latestBuildQueries.some((q) => q.isLoading)
-
-  // Create a map of release ID to latest build for easy access
-  const latestBuildsMap = new Map<string, PackageBuild>()
-
-  latestBuildQueries.forEach((query, index) => {
-    if (query.data && releases?.[index]) {
-      latestBuildsMap.set(releases[index].package_release_id, query.data)
-    }
-  })
-  return (
-    <>
-      <div className="space-y-6">
-        <Card>
-          <CardHeader>
-            <CardTitle>Recent Releases</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="overflow-x-auto [&>div]:no-scrollbar">
-              <Table className="no-scrollbar">
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Status</TableHead>
-                    <TableHead>Release ID</TableHead>
-                    <TableHead>Version</TableHead>
-                    <TableHead>Branch/PR</TableHead>
-                    <TableHead>Latest Build</TableHead>
-                    <TableHead>Created</TableHead>
-                    <TableHead>Actions</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {isLoading
-                    ? Array.from({ length: 3 }).map((_, i) => (
-                        <TableRow key={i}>
-                          <TableCell>
-                            <Skeleton className="h-6 w-20" />
-                          </TableCell>
-                          <TableCell>
-                            <Skeleton className="h-6 w-16" />
-                          </TableCell>
-                          <TableCell>
-                            <Skeleton className="h-6 w-12" />
-                          </TableCell>
-                          <TableCell>
-                            <Skeleton className="h-6 w-32" />
-                          </TableCell>
-                          <TableCell>
-                            <Skeleton className="h-6 w-20" />
-                          </TableCell>
-                          <TableCell>
-                            <Skeleton className="h-6 w-16" />
-                          </TableCell>
-                          <TableCell>
-                            <Skeleton className="h-6 w-8" />
-                          </TableCell>
-                        </TableRow>
-                      ))
-                    : releases?.map((release) => {
-                        const latestBuild = latestBuildsMap.get(
-                          release.package_release_id,
-                        )
-                        const { status, label } = getBuildStatus(latestBuild)
-                        return (
-                          <TableRow
-                            key={release.package_release_id}
-                            className="cursor-pointer hover:bg-gray-50 no-scrollbar"
-                            onClick={() => {
-                              setLocation(
-                                `/${pkg.name}/releases/${release.package_release_id}`,
-                              )
-                            }}
-                          >
-                            <TableCell>
-                              <div className="flex items-center gap-2">
-                                <StatusIcon status={status} />
-                                <Badge
-                                  variant={
-                                    status === "success"
-                                      ? "default"
-                                      : status === "error"
-                                        ? "destructive"
-                                        : "secondary"
-                                  }
-                                  className="text-xs"
-                                >
-                                  {label}
-                                </Badge>
-                              </div>
-                            </TableCell>
-                            <TableCell>
-                              <code className="text-sm bg-gray-100 px-2 py-1 rounded">
-                                {release.package_release_id.slice(-8)}
-                              </code>
-                            </TableCell>
-                            <TableCell>
-                              <span className="text-sm font-medium">
-                                {release.version ||
-                                  "v" + release.package_release_id.slice(-6)}
-                              </span>
-                            </TableCell>
-                            <TableCell>
-                              <div className="flex items-center gap-2">
-                                {release.is_pr_preview ? (
-                                  <GitBranch className="w-3 h-3 text-gray-500" />
-                                ) : (
-                                  <GitCommit className="w-3 h-3 text-gray-500" />
-                                )}
-                                <Badge variant="outline" className="text-xs">
-                                  {release.is_pr_preview
-                                    ? `#${release.github_pr_number}`
-                                    : "main"}
-                                </Badge>
-                              </div>
-                            </TableCell>
-                            <TableCell>
-                              <div className="max-w-xs">
-                                {latestBuild ? (
-                                  <p className="text-sm text-gray-600">
-                                    {formatTimeAgo(latestBuild.created_at)}
-                                  </p>
-                                ) : (
-                                  <p className="text-sm text-gray-400">
-                                    No builds
-                                  </p>
-                                )}
-                              </div>
-                            </TableCell>
-                            <TableCell>
-                              <span className="text-sm text-gray-600">
-                                {formatTimeAgo(release.created_at)}
-                              </span>
-                            </TableCell>
-                            <TableCell>
-                              <div className="flex items-center gap-2">
-                                <DropdownMenu>
-                                  <DropdownMenuTrigger asChild>
-                                    <Button
-                                      variant="ghost"
-                                      size="sm"
-                                      onClick={(e) => e.stopPropagation()}
-                                    >
-                                      <MoreHorizontal className="w-3 h-3" />
-                                    </Button>
-                                  </DropdownMenuTrigger>
-                                  <DropdownMenuContent align="end">
-                                    <DropdownMenuItem
-                                      onClick={() => {
-                                        window.location.href = `/${pkg.name}/releases/${release.package_release_id}`
-                                      }}
-                                    >
-                                      View Release
-                                    </DropdownMenuItem>
-                                    {status !== "error" && (
-                                      <DropdownMenuItem>
-                                        <a
-                                          href={`/${pkg.name}/releases/${latestBuild?.package_release_id}/preview`}
-                                        >
-                                          Preview Release
-                                        </a>
-                                      </DropdownMenuItem>
-                                    )}
-                                    <DropdownMenuItem
-                                      onClick={() => {
-                                        window.location.href = `/${pkg.name}/releases/${release.package_release_id}/builds`
-                                      }}
-                                    >
-                                      View All Builds
-                                    </DropdownMenuItem>
-                                  </DropdownMenuContent>
-                                </DropdownMenu>
-                              </div>
-                            </TableCell>
-                          </TableRow>
-                        )
-                      })}
-                </TableBody>
-              </Table>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </>
-  )
-}