@tscircuit/fake-snippets 0.0.109 → 0.0.110

package/src/components/PackageBuildsPage/collapsible-section.tsx

@@ -1,63 +0,0 @@
-import type React from "react"
-import { ChevronRight } from "lucide-react"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible"
-import { getColorForDisplayStatus } from "./getColorForDisplayStatus"
-import { PackageRelease } from "fake-snippets-api/lib/db/schema"
-import { ErrorObjectOrString } from "./ErrorObject"
-import { capitalCase } from "./capitalCase"
-
-interface CollapsibleSectionProps {
-  title: string
-  duration?: string
-  error?: ErrorObjectOrString | null
-  displayStatus?: PackageRelease["display_status"]
-  isOpen: boolean
-  onToggle: () => void
-  children?: React.ReactNode
-}
-
-export function CollapsibleSection({
-  title,
-  duration,
-  displayStatus,
-  isOpen,
-  onToggle,
-  children,
-}: CollapsibleSectionProps) {
-  return (
-    <Collapsible open={isOpen} onOpenChange={onToggle}>
-      <CollapsibleTrigger asChild>
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-4 bg-white border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100">
-          <div className="flex items-center gap-2 min-w-0">
-            <ChevronRight
-              className={`w-4 h-4 flex-shrink-0 transition-transform ${isOpen ? "rotate-90" : ""}`}
-            />
-            <span className="font-medium truncate">{title}</span>
-          </div>
-          <div className="flex items-center gap-2 flex-shrink-0 ml-6 sm:ml-0">
-            {duration && (
-              <span className="text-sm text-gray-600 whitespace-nowrap">
-                {duration}
-              </span>
-            )}
-            <div
-              className={`w-2 h-2 rounded-lg flex-shrink-0 ${getColorForDisplayStatus(displayStatus)}`}
-            />
-            <div className="text-gray-600 text-xs font-medium whitespace-nowrap">
-              {capitalCase(displayStatus) || "???"}
-            </div>
-          </div>
-        </div>
-      </CollapsibleTrigger>
-      <CollapsibleContent>
-        <div className="bg-white border-x border-b border-gray-200 rounded-b-lg overflow-hidden">
-          <div className="p-4 overflow-x-auto max-w-full">{children}</div>
-        </div>
-      </CollapsibleContent>
-    </Collapsible>
-  )
-}

package/src/components/PackageBuildsPage/package-build-details-panel.tsx

@@ -1,166 +0,0 @@
-import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
-import { useNow } from "@/hooks/use-now"
-import { timeAgo } from "@/lib/utils/timeAgo"
-import { PackageRelease } from "fake-snippets-api/lib/db/schema"
-import { Clock, GitBranch, GitCommit, Globe } from "lucide-react"
-import { useParams } from "wouter"
-
-const capitalCase = (str: string) => {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}
-
-function getColorFromDisplayStatus(
-  display_status: PackageRelease["display_status"],
-) {
-  switch (display_status) {
-    case "pending":
-      return "bg-yellow-500"
-    case "building":
-      return "bg-blue-500"
-    case "complete":
-      return "bg-green-500"
-    case "error":
-      return "bg-red-500"
-  }
-}
-
-export function PackageBuildDetailsPanel() {
-  const { packageRelease } = useCurrentPackageRelease({ refetchInterval: 2000 })
-  const { author } = useParams() // TODO use packageRelease.author_account_id when it's added by backed
-  const now = useNow(1000)
-
-  if (!packageRelease) {
-    // TODO show skeleton instead
-    return null
-  }
-
-  const {
-    circuit_json_build_display_status,
-    circuit_json_build_in_progress,
-    circuit_json_build_is_stale,
-    circuit_json_build_logs,
-    transpilation_display_status,
-    transpilation_in_progress,
-    transpilation_logs,
-    circuit_json_build_completed_at,
-    transpilation_is_stale,
-    display_status,
-    created_at,
-    has_transpiled,
-    circuit_json_build_started_at,
-    circuit_json_build_error,
-    circuit_json_build_error_last_updated_at,
-    total_build_duration_ms,
-    transpilation_completed_at,
-    transpilation_error,
-    transpilation_started_at,
-    commit_sha,
-  } = packageRelease
-
-  const buildStartedAt = (() => {
-    if (transpilation_started_at && circuit_json_build_started_at) {
-      return new Date(transpilation_started_at) <
-        new Date(circuit_json_build_started_at)
-        ? transpilation_started_at
-        : circuit_json_build_started_at
-    }
-    return transpilation_started_at || circuit_json_build_started_at || null
-  })()
-
-  const buildCompletedAt =
-    circuit_json_build_completed_at || transpilation_completed_at || null
-
-  const elapsedMs = buildStartedAt
-    ? (buildCompletedAt ? new Date(buildCompletedAt).getTime() : now) -
-      new Date(buildStartedAt).getTime()
-    : null
-
-  return (
-    <div className="space-y-4 sm:space-y-6 bg-white p-3 sm:p-4 border border-gray-200 rounded-lg">
-      {/* Created */}
-      <div>
-        <h3 className="text-sm font-medium text-gray-600 mb-2">Created</h3>
-        <div className="flex items-center gap-2 min-w-0">
-          <div className="w-6 h-6 bg-orange-500 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">
-            I
-          </div>
-          <span className="text-sm truncate">{author}</span>
-          <span className="text-sm text-gray-500 flex-shrink-0">
-            {timeAgo(created_at, "")}
-          </span>
-        </div>
-      </div>
-
-      {/* Status */}
-      <div>
-        <h3 className="text-sm font-medium text-gray-600 mb-2">Status</h3>
-        <div className="flex items-center gap-2">
-          <div
-            className={`w-2 h-2 ${getColorFromDisplayStatus(display_status)} rounded-full flex-shrink-0`}
-          ></div>
-          <span className="text-sm">{capitalCase(display_status)}</span>
-          {/* <Badge
-            variant="secondary"
-            className="bg-gray-200 text-gray-700 text-xs"
-          >
-            Latest
-          </Badge> */}
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-medium text-gray-600 mb-2">Build Time</h3>
-        <div className="flex items-center gap-2 min-w-0">
-          <Clock className="w-4 h-4 text-gray-500 flex-shrink-0" />
-          {elapsedMs !== null && (
-            <span className="text-sm flex-shrink-0">
-              {Math.floor(elapsedMs / 1000)}s
-            </span>
-          )}
-          <span className="text-sm text-gray-500 truncate">
-            {buildStartedAt
-              ? `Started ${timeAgo(buildStartedAt)}`
-              : "waiting..."}
-          </span>
-        </div>
-      </div>
-
-      {/* Version */}
-      <div>
-        <h3 className="text-sm font-medium text-gray-600 mb-2">Version</h3>
-        <div className="flex items-center gap-2 min-w-0">
-          <Globe className="w-4 h-4 text-gray-500 flex-shrink-0" />
-          <span className="text-sm break-all">{packageRelease.version}</span>
-          {/* <Badge variant="default" className="bg-blue-600 text-white text-xs">
-            Current
-          </Badge> */}
-        </div>
-      </div>
-
-      {/* Outputs */}
-      <div>
-        <h3 className="text-sm font-medium text-gray-600 mb-2">Outputs</h3>
-        <div>
-          <span className="text-sm text-gray-400">None</span>
-        </div>
-      </div>
-
-      {/* Source */}
-      {/* <div>
-        <h3 className="text-sm font-medium text-gray-600 mb-2">Source</h3>
-        <div className="space-y-2">
-          <div className="flex items-center gap-2">
-            <GitBranch className="w-4 h-4 text-gray-500" />
-            <span className="text-sm">main</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <GitCommit className="w-4 h-4 text-gray-500" />
-            <span className="text-sm text-gray-500">
-              edfdc67 support empty file creation (#356)
-            </span>
-          </div>
-        </div>
-      </div> */}
-    </div>
-  )
-}

package/src/components/PackageBuildsPage/package-build-header.tsx

@@ -1,79 +0,0 @@
-import { Button } from "@/components/ui/button"
-import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
-import { useRebuildPackageReleaseMutation } from "@/hooks/use-rebuild-package-release-mutation"
-import { Github, RefreshCw } from "lucide-react"
-import { useParams } from "wouter"
-import { DownloadButtonAndMenu } from "../DownloadButtonAndMenu"
-import { useGlobalStore } from "@/hooks/use-global-store"
-import { useCurrentPackageCircuitJson } from "../ViewPackagePage/hooks/use-current-package-circuit-json"
-
-export function PackageBuildHeader() {
-  const { author, packageName } = useParams()
-  const session = useGlobalStore((s) => s.session)
-  const { packageRelease } = useCurrentPackageRelease({
-    include_logs: true,
-  })
-  const { mutate: rebuildPackage, isLoading } =
-    useRebuildPackageReleaseMutation()
-
-  const { circuitJson } = useCurrentPackageCircuitJson()
-
-  return (
-    <div className="border-b border-gray-200 bg-white px-4 sm:px-6 py-4">
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4 container mx-auto max-w-7xl">
-        <div className="min-w-0 flex-1">
-          <h1 className="text-xl sm:text-2xl font-semibold flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2">
-            <span className="whitespace-nowrap">Package Build</span>
-            <a
-              className="bg-gray-100 px-2 py-1 rounded font-mono text-blue-600 text-sm sm:text-base truncate w-fit"
-              href={`/${author}/${packageName}`}
-            >
-              {author}/{packageName}
-            </a>
-          </h1>
-        </div>
-        <div className="flex items-center gap-2 sm:gap-3 flex-shrink-0">
-          <Button
-            variant="outline"
-            size="sm"
-            className="border-gray-300 bg-white hover:bg-gray-50 text-xs sm:text-sm"
-            asChild
-          >
-            <a
-              href="https://github.com/tscircuit/tscircuit.com/issues/new"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <Github className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
-              <span className="hidden xs:inline">Report Issue</span>
-              <span className="xs:hidden">Report</span>
-            </a>
-          </Button>
-          {session?.github_username == author && (
-            <Button
-              variant="outline"
-              size="sm"
-              className="border-gray-300 bg-white hover:bg-gray-50 text-xs sm:text-sm"
-              disabled={isLoading || !packageRelease}
-              onClick={() =>
-                packageRelease &&
-                rebuildPackage({
-                  package_release_id: packageRelease.package_release_id,
-                })
-              }
-            >
-              <RefreshCw className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
-              {isLoading ? "Rebuilding..." : "Rebuild"}
-            </Button>
-          )}
-          <DownloadButtonAndMenu
-            offerMultipleImageFormats
-            circuitJson={circuitJson}
-            unscopedName={packageName}
-            author={author}
-          />
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/PageSearchComponent.tsx

@@ -1,148 +0,0 @@
-import { Input } from "@/components/ui/input"
-import { useAxios } from "@/hooks/use-axios"
-import { useLocation } from "wouter"
-import React, { useState } from "react"
-import { useQuery } from "react-query"
-import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
-import { Search } from "lucide-react"
-import { Button } from "./ui/button"
-import { PackageCardSkeleton } from "./PackageCardSkeleton"
-import { PackageCard } from "./PackageCard"
-
-interface PageSearchComponentProps {
-  onResultsFetched?: (results: any[]) => void
-}
-
-const EXAMPLE_SEARCHES = ["keyboard", "esp32", "arduino"]
-
-const PageSearchComponent: React.FC<PageSearchComponentProps> = ({
-  onResultsFetched,
-}) => {
-  const [location, setLocation] = useLocation()
-  const axios = useAxios()
-  const snippetsBaseApiUrl = useApiBaseUrl()
-
-  // Initialize search query directly from URL
-  const [searchQuery, setSearchQuery] = useState(
-    () => new URLSearchParams(window.location.search).get("q") ?? "",
-  )
-
-  const { data: searchResults, isLoading: isLoadingSearchResults } = useQuery(
-    ["packageSearch", searchQuery],
-    async () => {
-      if (!searchQuery) return []
-      const { data } = await axios.get("/packages/search", {
-        params: { q: searchQuery },
-      })
-      if (onResultsFetched) {
-        onResultsFetched(data.packages)
-      }
-      return data.packages
-    },
-    { enabled: Boolean(searchQuery) },
-  )
-
-  // Update URL while preserving other parameters
-  const handleSearchChange = (newQuery: string) => {
-    if (!newQuery.trim()) {
-      // if empty reset
-      setSearchQuery("")
-      const params = new URLSearchParams(window.location.search)
-      params.delete("q")
-      const baseUrl = location.split("?")[0]
-      const newUrl = params.toString()
-        ? `${baseUrl}?${params.toString()}`
-        : baseUrl
-      setLocation(newUrl)
-      return
-    }
-    setSearchQuery(newQuery)
-    const params = new URLSearchParams(window.location.search)
-    params.set("q", newQuery)
-    const baseUrl = location.split("?")[0]
-    const newUrl = `${baseUrl}?${params.toString()}`
-
-    if (newUrl !== location) {
-      setLocation(newUrl)
-    }
-  }
-
-  return (
-    <div className="min-h-[calc(100vh-20rem)]">
-      <div className="mb-6">
-        <div className="flex flex-col sm:flex-row gap-4 mb-4">
-          <div className="relative flex-grow">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
-            <Input
-              type="search"
-              placeholder="Search packages..."
-              className="pl-10"
-              value={searchQuery}
-              onChange={(e) => handleSearchChange(e.target.value)}
-              aria-label="Search packages"
-              role="searchbox"
-            />
-          </div>
-        </div>
-      </div>
-
-      {isLoadingSearchResults ? (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-          {[...Array(6)].map((_, i) => (
-            <PackageCardSkeleton key={i} />
-          ))}
-        </div>
-      ) : searchResults && searchResults.length > 0 ? (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-          {searchResults.map((pkg: any) => (
-            <PackageCard
-              key={pkg.package_id}
-              pkg={pkg}
-              baseUrl={snippetsBaseApiUrl}
-              showOwner={true}
-              withLink={true}
-              className="hover:bg-gray-50"
-            />
-          ))}
-        </div>
-      ) : searchQuery ? (
-        <div className="text-center py-12 px-4">
-          <div className="bg-slate-50 inline-flex rounded-full p-4 mb-4">
-            <Search className="w-8 h-8 text-slate-400" />
-          </div>
-          <h3 className="text-xl font-medium text-slate-900 mb-2">
-            No Results for "{searchQuery}"
-          </h3>
-          <p className="text-slate-500 max-w-md mx-auto mb-6">
-            Try searching for something else or browse trending packages.
-          </p>
-        </div>
-      ) : (
-        <div className="text-center py-12 px-4">
-          <div className="bg-slate-50 inline-flex rounded-full p-4 mb-4">
-            <Search className="w-8 h-8 text-slate-400" />
-          </div>
-          <h3 className="text-xl font-medium text-slate-900 mb-2">
-            Search for any package above
-          </h3>
-          <p className="text-slate-500 max-w-md mx-auto mb-6">
-            Try searching for:
-          </p>
-          <div className="flex gap-2 justify-center flex-wrap">
-            {EXAMPLE_SEARCHES.map((term) => (
-              <Button
-                key={term}
-                variant="outline"
-                onClick={() => handleSearchChange(term)}
-              >
-                {term}
-              </Button>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default PageSearchComponent

package/src/pages/package-builds.tsx

@@ -1,33 +0,0 @@
-import { CodeAndPreview } from "@/components/package-port/CodeAndPreview"
-import Footer from "@/components/Footer"
-import Header from "@/components/Header"
-import { usePackage } from "@/hooks/use-package"
-import { Helmet } from "react-helmet-async"
-import { useCurrentPackageId } from "@/hooks/use-current-package-id"
-import { NotFound } from "@/components/NotFound"
-import { ErrorOutline } from "@/components/ErrorOutline"
-import { PackageBuildDetailsPage } from "@/components/PackageBuildsPage/PackageBuildDetailsPage"
-
-export const EditorPage = () => {
-  const { packageId } = useCurrentPackageId()
-  const { data: pkg, error } = usePackage(packageId)
-  const uuid4RegExp = new RegExp(
-    /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-4[0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$/,
-  )
-
-  return (
-    <div className="overflow-x-hidden">
-      <Helmet>
-        <title>{pkg ? `${pkg.name} Package Builds` : "Package Builds"}</title>
-        {pkg && (
-          <>
-            <meta property="og:title" content={`${pkg.name} Package Builds`} />
-          </>
-        )}
-      </Helmet>
-      <Header />
-      <PackageBuildDetailsPage />
-      <Footer />
-    </div>
-  )
-}