@tscircuit/fake-snippets 0.0.120 → 0.0.122

package/src/components/SearchComponent.tsx

@@ -1,282 +0,0 @@
-import { Input } from "@/components/ui/input"
-import { useAxios } from "@/hooks/use-axios"
-import { useLocation } from "wouter"
-import React, { useEffect, useRef, useState } from "react"
-import { useQuery } from "react-query"
-import { Alert } from "./ui/alert"
-import { Link } from "wouter"
-import { CircuitBoard } from "lucide-react"
-import { cn } from "@/lib/utils"
-
-interface SearchComponentProps {
-  onResultsFetched?: (results: any[]) => void
-  autofocus?: boolean
-  closeOnClick?: () => void
-}
-
-const LinkWithNewTabHandling = ({
-  shouldOpenInNewTab,
-  href,
-  className,
-  onClick,
-  children,
-}: {
-  shouldOpenInNewTab: boolean
-  href: string
-  className?: string
-  onClick?: () => void
-  children: React.ReactNode
-}) => {
-  if (shouldOpenInNewTab) {
-    return (
-      <a
-        href={href}
-        target="_blank"
-        rel="noopener noreferrer"
-        className={className}
-        onClick={onClick}
-      >
-        {children}
-      </a>
-    )
-  }
-  return (
-    <Link onClick={onClick} className={className} href={href}>
-      {children}
-    </Link>
-  )
-}
-
-const SearchComponent: React.FC<SearchComponentProps> = ({
-  onResultsFetched,
-  autofocus = false,
-  closeOnClick,
-}) => {
-  const [searchQuery, setSearchQuery] = useState("")
-  const [showResults, setShowResults] = useState(false)
-  const [highlightedIndex, setHighlightedIndex] = useState(-1)
-  const axios = useAxios()
-  const resultsRef = useRef<HTMLDivElement>(null)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const [location, setLocation] = useLocation()
-
-  const { data: searchResults, isLoading } = useQuery(
-    ["packageSearch", searchQuery],
-    async () => {
-      if (!searchQuery) return []
-      const { data } = await axios.post("/packages/search", {
-        query: searchQuery,
-      })
-      if (onResultsFetched) {
-        onResultsFetched(data.packages)
-      }
-      return data.packages
-    },
-    { enabled: Boolean(searchQuery) },
-  )
-
-  useEffect(() => {
-    setHighlightedIndex(-1)
-  }, [searchResults])
-
-  const handleSearch = (e: React.FormEvent) => {
-    e.preventDefault()
-    if (searchQuery.trim()) {
-      setLocation(`/search?q=${encodeURIComponent(searchQuery.trim())}`)
-    }
-  }
-
-  // Focus input on mount
-  useEffect(() => {
-    if (autofocus) {
-      inputRef.current?.focus()
-    }
-  }, [])
-
-  useEffect(() => {
-    if (highlightedIndex < 0) return
-    const items = resultsRef.current?.querySelectorAll("li")
-    const item = items?.[highlightedIndex] as HTMLElement | undefined
-    item?.scrollIntoView({ block: "nearest" })
-  }, [highlightedIndex])
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        resultsRef.current &&
-        !resultsRef.current.contains(event.target as Node)
-      ) {
-        setShowResults(false)
-      }
-    }
-
-    const handleEscapeKey = (event: KeyboardEvent) => {
-      if (event.key === "Escape") {
-        setShowResults(false)
-        if (closeOnClick) {
-          closeOnClick()
-        }
-      }
-    }
-
-    document.addEventListener("mousedown", handleClickOutside)
-    document.addEventListener("keydown", handleEscapeKey)
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside)
-      document.removeEventListener("keydown", handleEscapeKey)
-    }
-  }, [closeOnClick])
-
-  const shouldOpenInNewTab = location === "/editor" || location === "/ai"
-  const shouldOpenInEditor = location === "/editor" || location === "/ai"
-
-  return (
-    <form onSubmit={handleSearch} autoComplete="off" className="relative w-44">
-      <Input
-        autoComplete="off"
-        spellCheck={false}
-        autoCorrect="off"
-        autoCapitalize="off"
-        ref={inputRef}
-        type="search"
-        aria-autocomplete="none"
-        placeholder="Search"
-        className="pl-4 focus:border-blue-500 placeholder-gray-400 text-sm select-none"
-        value={searchQuery}
-        onChange={(e) => {
-          setSearchQuery(e.target.value)
-          setShowResults(!!e.target.value)
-        }}
-        onKeyDown={(e) => {
-          if (e.key === "Backspace" && !searchQuery && closeOnClick) {
-            closeOnClick()
-            return
-          }
-          if (!searchResults) return
-          if (e.key === "ArrowDown") {
-            e.preventDefault()
-            setShowResults(true)
-            setHighlightedIndex((prev) =>
-              Math.min(prev + 1, searchResults.length - 1),
-            )
-          } else if (e.key === "ArrowUp") {
-            e.preventDefault()
-            setHighlightedIndex((prev) => Math.max(prev - 1, 0))
-          } else if (e.key === "Enter" && highlightedIndex >= 0) {
-            e.preventDefault()
-            const pkg = searchResults[highlightedIndex]
-            if (pkg) {
-              const href = shouldOpenInEditor
-                ? `/editor?package_id=${pkg.package_id}`
-                : `/${pkg.name}`
-              if (shouldOpenInNewTab) {
-                window.open(href, "_blank")
-              } else {
-                setLocation(href)
-              }
-              setShowResults(false)
-              if (closeOnClick) {
-                closeOnClick()
-              }
-            }
-          }
-        }}
-        aria-label="Search packages"
-        role="searchbox"
-      />
-      {isLoading && (
-        <div className="absolute top-full w-lg left-0 right-0 mt-1 bg-white shadow-lg rounded-lg border w-80 grid place-items-center py-4 z-50 p-3">
-          <div className="flex items-center space-x-2">
-            <div className="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
-            <span className="text-gray-600 text-sm">Searching...</span>
-          </div>
-        </div>
-      )}
-
-      {showResults && searchResults && (
-        <div
-          ref={resultsRef}
-          className="absolute top-full md:left-0 right-0 no-scrollbar mt-2 bg-white shadow-lg rounded-md z-50 w-80 max-h-screen overflow-y-auto overflow-x-visible"
-        >
-          {searchResults.length > 0 ? (
-            <ul className="divide-y divide-gray-200 no-scrollbar">
-              {searchResults.map((pkg: any, index: number) => {
-                const previewImageUrl =
-                  pkg.latest_pcb_preview_image_url ??
-                  pkg.latest_cad_preview_image_url ??
-                  pkg.latest_sch_preview_image_url ??
-                  undefined
-                const hasPreviewImage = Boolean(previewImageUrl)
-
-                return (
-                  <li
-                    key={pkg.package_id}
-                    className={cn(
-                      "p-2 hover:bg-gray-50",
-                      index === highlightedIndex && "bg-gray-100",
-                    )}
-                  >
-                    <LinkWithNewTabHandling
-                      href={
-                        shouldOpenInEditor
-                          ? `/editor?package_id=${pkg.package_id}`
-                          : `/${pkg.name}`
-                      }
-                      shouldOpenInNewTab={shouldOpenInNewTab}
-                      className="flex"
-                      onClick={() => {
-                        setShowResults(false)
-                        if (closeOnClick) closeOnClick()
-                      }}
-                    >
-                      <div className="w-12 h-12 overflow-hidden mr-2 flex-shrink-0 rounded-sm bg-gray-50 border flex items-center justify-center">
-                        {hasPreviewImage ? (
-                          <img
-                            src={previewImageUrl}
-                            alt={`PCB preview for ${pkg.name}`}
-                            draggable={false}
-                            className="w-12 h-12 object-contain p-1 scale-[4] rotate-45"
-                            onError={(e) => {
-                              e.currentTarget.style.display = "none"
-                              e.currentTarget.nextElementSibling?.classList.remove(
-                                "hidden",
-                              )
-                              e.currentTarget.nextElementSibling?.classList.add(
-                                "flex",
-                              )
-                            }}
-                          />
-                        ) : null}
-                        <div
-                          className={`w-12 h-12 ${hasPreviewImage ? "hidden" : "flex"} items-center justify-center`}
-                        >
-                          <CircuitBoard className="w-6 h-6 text-gray-300" />
-                        </div>
-                      </div>
-                      <div className="flex-grow">
-                        <div className="font-medium text-blue-600 break-words text-xs">
-                          {pkg.name}
-                        </div>
-                        {pkg.description && (
-                          <div className="text-xs text-gray-500 break-words h-8 overflow-hidden">
-                            {pkg.description}
-                          </div>
-                        )}
-                      </div>
-                    </LinkWithNewTabHandling>
-                  </li>
-                )
-              })}
-            </ul>
-          ) : (
-            <Alert variant="default" className="p-4 text-center">
-              No results found for "{searchQuery}"
-            </Alert>
-          )}
-        </div>
-      )}
-    </form>
-  )
-}
-
-export default SearchComponent

package/src/components/SentryNotFoundReporter.tsx

@@ -1,44 +0,0 @@
-import { useEffect, useRef } from "react"
-import { Sentry } from "@/lib/sentry"
-
-type NotFoundContext = "package" | "package_release"
-
-type SentryNotFoundReporterProps = {
-  context: NotFoundContext
-  slug: string
-  status?: number
-  message?: string
-}
-
-export const SentryNotFoundReporter = ({
-  context,
-  slug,
-  status,
-  message,
-}: SentryNotFoundReporterProps) => {
-  const hasLoggedRef = useRef(false)
-
-  useEffect(() => {
-    if (typeof window === "undefined") return
-    if (typeof slug !== "string" || slug.length === 0) return
-    if (typeof status === "number" && status !== 404) return
-    if (hasLoggedRef.current) return
-
-    hasLoggedRef.current = true
-
-    Sentry.captureMessage(`package:view:${context}-not-found`, {
-      level: "warning",
-      tags: {
-        slug,
-      },
-      extra: {
-        status,
-        message,
-      },
-    })
-  }, [context, slug, status, message])
-
-  return null
-}
-
-export default SentryNotFoundReporter

package/src/components/SnippetTypeIcon.tsx

@@ -1,60 +0,0 @@
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
-import { cn } from "@/lib/utils"
-import { Box, CircuitBoard, Layers, Rotate3D } from "lucide-react"
-import type React from "react"
-
-export type SnippetType = "board" | "package" | "footprint" | "model"
-
-interface SnippetTypeIconProps {
-  type: SnippetType
-  className?: string
-}
-
-const typeIcons: Record<SnippetType, React.ReactNode> = {
-  board: <CircuitBoard className="w-4 h-4" />,
-  package: <Box className="w-4 h-4" />,
-  footprint: <Layers className="w-4 h-4" />,
-  model: <Rotate3D className="w-4 h-4" />,
-}
-
-const typeColors: Record<SnippetType, string> = {
-  board: "text-blue-500",
-  package: "text-green-500",
-  footprint: "text-purple-500",
-  model: "text-indigo-500",
-}
-
-const typeLabels: Record<SnippetType, string> = {
-  board: "Board",
-  package: "Package",
-  footprint: "Footprint",
-  model: "Model",
-}
-
-export const SnippetTypeIcon: React.FC<SnippetTypeIconProps> = ({
-  type,
-  className,
-}) => {
-  if (!type || !(type in typeIcons)) return null
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <span
-            className={cn("flex items-center", typeColors[type], className)}
-          >
-            {typeIcons[type]}
-          </span>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>{typeLabels[type]}</p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  )
-}

package/src/components/StaticPreviewContent.tsx

@@ -1,89 +0,0 @@
-import React from "react"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { Button } from "@/components/ui/button"
-import { Share, PlayIcon, Download, EllipsisIcon } from "lucide-react"
-import { Skeleton } from "@/components/ui/skeleton"
-
-const SkeletonContent = () => (
-  <div className="h-full p-4 space-y-4">
-    <Skeleton className="h-10 w-full" />
-    <Skeleton className="h-10 w-full" />
-    <div className="space-y-2">
-      <Skeleton className="h-4 w-full" />
-      <Skeleton className="h-4 w-3/4" />
-      <Skeleton className="h-4 w-1/2" />
-    </div>
-    <div className="space-y-2 mt-4">
-      <Skeleton className="h-4 w-full" />
-      <Skeleton className="h-4 w-3/4" />
-      <Skeleton className="h-4 w-1/2" />
-    </div>
-  </div>
-)
-
-export default function StaticPreviewLoading() {
-  return (
-    <div className="flex flex-col relative h-full">
-      <div className="md:sticky md:top-2">
-        <Tabs defaultValue="code" className="flex-grow flex flex-col">
-          <div className="p-4 border-b border-gray-200 flex items-center gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-6 px-2 text-xs loading-placeholder"
-              disabled
-              aria-label="Loading placeholder"
-            >
-              <Share className="mr-1 h-3 w-3" />
-              Copy URL
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="px-2 text-xs loading-placeholder"
-              disabled
-              aria-label="Loading placeholder"
-            >
-              <Download className="mr-1 h-3 w-3" />
-              Download
-            </Button>
-            <div className="flex-grow" />
-            <Button
-              disabled
-              className="bg-blue-600 hover:bg-blue-500 cursor-not-allowed loading-placeholder"
-              aria-label="Loading placeholder"
-            >
-              Run
-              <PlayIcon className="w-3 h-3 ml-2" />
-            </Button>
-            <TabsList>
-              <TabsTrigger value="code">Code</TabsTrigger>
-              <TabsTrigger value="pcb" className="whitespace-nowrap">
-                PCB
-              </TabsTrigger>
-              <TabsTrigger value="schematic" className="whitespace-nowrap">
-                Schematic
-              </TabsTrigger>
-              <TabsTrigger value="cad">3D</TabsTrigger>
-              <div className="whitespace-nowrap p-2 mr-1 cursor-pointer relative">
-                <EllipsisIcon className="w-4 h-4" />
-              </div>
-            </TabsList>
-          </div>
-          <TabsContent value="code" className="flex-grow overflow-hidden">
-            <SkeletonContent />
-          </TabsContent>
-          <TabsContent value="pcb" className="h-[500px]">
-            <SkeletonContent />
-          </TabsContent>
-          <TabsContent value="schematic" className="h-[500px]">
-            <SkeletonContent />
-          </TabsContent>
-          <TabsContent value="cad" className="h-[500px]">
-            <SkeletonContent />
-          </TabsContent>
-        </Tabs>
-      </div>
-    </div>
-  )
-}

package/src/components/StaticViewSnippetSidebar.tsx

@@ -1,100 +0,0 @@
-import React from "react"
-import { cn } from "@/lib/utils"
-import { Code, Bot, GitFork, AtSign, Package, Clock, File } from "lucide-react"
-import { Skeleton } from "./ui/skeleton"
-
-export default function StaticViewSnippetSidebar({
-  className,
-}: {
-  className?: string
-}) {
-  const sidebarItems = [
-    {
-      icon: <Code className="w-5 h-5" />,
-      label: "Edit Code",
-      href: "#",
-    },
-    {
-      icon: <Bot className="w-5 h-5" />,
-      label: "Edit with AI",
-      badge: "AI",
-      href: "#",
-    },
-    {
-      icon: <GitFork className="w-5 h-5" />,
-      label: "Forks",
-      notImplemented: true,
-    },
-    {
-      icon: <AtSign className="w-5 h-5" />,
-      label: "References",
-      notImplemented: true,
-    },
-    {
-      icon: <Package className="w-5 h-5" />,
-      label: "Dependencies",
-      notImplemented: true,
-    },
-    {
-      icon: <Clock className="w-5 h-5" />,
-      label: "Versions",
-      notImplemented: true,
-    },
-    {
-      icon: <File className="w-5 h-5" />,
-      label: "Files",
-      href: "#",
-    },
-  ]
-
-  return (
-    <div
-      className={cn(
-        "w-64 h-full bg-gray-100 text-gray-700 flex flex-col flex-shrink-0",
-        "hidden sm:block h-screen sticky top-0",
-        className,
-      )}
-    >
-      <nav className="flex-grow overflow-y-auto">
-        <ul className="p-2 space-y-2">
-          {sidebarItems.map((item, index) => (
-            <li key={index}>
-              <a
-                href={item.href ?? "#"}
-                className="flex items-center gap-3 px-2 py-1.5 hover:bg-gray-200 rounded-md disabled opacity-50 cursor-not-allowed"
-              >
-                {item.icon}
-                <span className="text-sm">{item.label}</span>
-                {item.badge && (
-                  <span className="ml-auto bg-blue-500 text-white text-xs px-1.5 py-0.5 rounded">
-                    {item.badge}
-                  </span>
-                )}
-              </a>
-            </li>
-          ))}
-        </ul>
-      </nav>
-      <div className="p-4 border-t border-gray-200 space-y-4">
-        <div className="space-y-1">
-          <div className="text-xs font-medium">Copy embed code</div>
-          <div className="text-[0.5em] p-2 rounded-sm bg-blue-50 border border-blue-200 cursor-pointer font-mono whitespace-nowrap overflow-hidden text-ellipsis">
-            <Skeleton className="h-4 w-full rounded-sm" />
-          </div>
-        </div>
-        <div className="space-y-1">
-          <div className="text-xs font-medium">Copy import code</div>
-          <div className="text-[0.5em] p-2 rounded-sm bg-blue-50 border border-blue-200 cursor-pointer font-mono whitespace-nowrap overflow-hidden text-ellipsis">
-            <Skeleton className="h-4 w-full rounded-sm" />
-          </div>
-        </div>
-        <div className="space-y-1">
-          <div className="text-xs font-medium">Copy install command</div>
-          <div className="text-[0.5em] p-2 rounded-sm bg-blue-50 border border-blue-200 cursor-pointer font-mono whitespace-nowrap overflow-hidden text-ellipsis">
-            <Skeleton className="h-4 w-full rounded-sm" />
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/SuspenseRunFrame.tsx

@@ -1,28 +0,0 @@
-import { lazy, Suspense } from "react"
-
-const RunFrame = lazy(async () => {
-  const { RunFrame } = await import("@tscircuit/runframe/runner")
-  return { default: RunFrame }
-})
-
-export const SuspenseRunFrame = (
-  props: React.ComponentProps<typeof RunFrame> & { className?: string },
-) => {
-  return (
-    <Suspense
-      fallback={
-        <div className="flex justify-center items-center h-full">
-          <div className="w-48">
-            <div className="loading">
-              <div className="loading-bar"></div>
-            </div>
-          </div>
-        </div>
-      }
-    >
-      <div className={`h-[98vh] ${props.className}`}>
-        <RunFrame {...props} />
-      </div>
-    </Suspense>
-  )
-}