@tscircuit/fake-snippets 0.0.121 → 0.0.123

package/src/components/PackageCard.tsx

@@ -1,191 +0,0 @@
-import React from "react"
-import { Link } from "wouter"
-import { Package } from "fake-snippets-api/lib/db/schema"
-import { StarIcon, LockClosedIcon } from "@radix-ui/react-icons"
-import {
-  GlobeIcon,
-  MoreVertical,
-  PencilIcon,
-  Share2,
-  Trash2,
-  CircuitBoard,
-} from "lucide-react"
-import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { SnippetType, SnippetTypeIcon } from "./SnippetTypeIcon"
-import { timeAgo } from "@/lib/utils/timeAgo"
-import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
-import { getPackagePreviewImageUrl } from "@/lib/utils/getPackagePreviewImageUrl"
-
-export interface PackageCardProps {
-  /** The package data to display */
-  pkg: Package
-  /** Whether to show the owner name (useful in starred views) */
-  showOwner?: boolean
-  /** Whether this is the current user's package (enables edit/delete options) */
-  isCurrentUserPackage?: boolean
-  /** Callback when delete is clicked */
-  onDeleteClick?: (e: React.MouseEvent, pkg: Package) => void
-  /** Custom class name for the card container */
-  className?: string
-  /** Custom image size (default is h-16 w-16) */
-  imageSize?: string
-  /** Custom image transform style */
-  imageTransform?: string
-  /** Whether to render the card with a link to the package page */
-  withLink?: boolean
-  /** Custom render function for actions */
-  renderActions?: (pkg: Package) => React.ReactNode
-}
-
-export const PackageCard: React.FC<PackageCardProps> = ({
-  pkg,
-  showOwner = false,
-  isCurrentUserPackage = false,
-  onDeleteClick,
-  className = "",
-  imageSize = "h-16 w-16",
-  imageTransform = "transition-transform duration-300 -rotate-45 hover:rotate-0 hover:scale-110 scale-150",
-  withLink = true,
-  renderActions,
-}) => {
-  const handleDeleteClick = (e: React.MouseEvent) => {
-    e.preventDefault() // Prevent navigation
-    if (onDeleteClick) {
-      onDeleteClick(e, pkg)
-    }
-  }
-
-  const { copyToClipboard } = useCopyToClipboard()
-
-  const handleShareClick = (e: React.MouseEvent) => {
-    e.preventDefault()
-    const shareUrl = `${window.location.origin}/${pkg.name}`
-    copyToClipboard(shareUrl)
-  }
-
-  const availableImages = ["pcb", "schematic", "assembly", "3d"]
-
-  const previewImageUrl = getPackagePreviewImageUrl(
-    pkg,
-    pkg.default_view as "pcb" | "schematic" | "3d",
-  )
-
-  const cardContent = (
-    <div
-      className={`border p-4 rounded-md hover:shadow-md transition-shadow flex flex-col gap-4 ${className}`}
-    >
-      <div className="flex items-start gap-4">
-        <div
-          className={`${imageSize} flex-shrink-0 rounded-md overflow-hidden bg-gray-50 border flex items-center justify-center`}
-        >
-          <img
-            src={String(previewImageUrl)}
-            alt={`${pkg.unscoped_name} ${availableImages.includes(pkg.default_view || "") ? pkg.default_view : "3D"} view`}
-            className={`object-cover h-full w-full ${imageTransform}`}
-            onError={(e) => {
-              e.currentTarget.style.display = "none"
-              e.currentTarget.nextElementSibling?.classList.remove("hidden")
-              e.currentTarget.nextElementSibling?.classList.add("flex")
-            }}
-          />
-          <div className="hidden items-center justify-center h-full w-full">
-            <CircuitBoard className="w-6 h-6 text-gray-300" />
-          </div>
-        </div>
-        <div className="flex-1 min-w-0">
-          <div className="flex justify-between items-start mb-[2px] -mt-[3px]">
-            <h2 className="text-md font-semibold truncate pr-[30px]">
-              {showOwner && (
-                <>
-                  <span className="text-gray-700 text-md">
-                    {pkg.owner_github_username}
-                  </span>
-                  <span className="mx-1">/</span>
-                </>
-              )}
-              <span className="text-gray-900">{pkg.unscoped_name}</span>
-            </h2>
-            <div className="flex items-center gap-2">
-              <SnippetTypeIcon
-                type={pkg.snippet_type as SnippetType}
-                className="pt-[2.5px]"
-              />
-              <div className="flex items-center gap-1 text-gray-600">
-                <StarIcon className="w-4 h-4 pt-[2.5px]" />
-                <span className="text-[16px]">{pkg.star_count || 0}</span>
-              </div>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-[1.5rem] w-[1.5rem]"
-                  >
-                    <MoreVertical className="h-4 w-4" />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent>
-                  <DropdownMenuItem
-                    className="text-xs cursor-pointer"
-                    onClick={handleShareClick}
-                  >
-                    <Share2 className="mr-2 h-3 w-3" />
-                    Share Package
-                  </DropdownMenuItem>{" "}
-                  {isCurrentUserPackage && onDeleteClick && (
-                    <DropdownMenuItem
-                      className="text-xs text-red-600"
-                      onClick={handleDeleteClick}
-                    >
-                      <Trash2 className="mr-2 h-3 w-3" />
-                      Delete Package
-                    </DropdownMenuItem>
-                  )}
-                </DropdownMenuContent>
-              </DropdownMenu>
-              {renderActions && renderActions(pkg)}
-            </div>
-          </div>
-          <p
-            className={`${!pkg.description && "h-[1.25rem]"} text-sm text-gray-500 mb-1 truncate max-w-xs`}
-          >
-            {pkg.description ? pkg.description : " "}
-          </p>
-          <div className={`flex items-center gap-4`}>
-            {pkg.is_private ? (
-              <div className="flex items-center text-xs gap-1 text-gray-500">
-                <LockClosedIcon height={12} width={12} />
-                <span>Private</span>
-              </div>
-            ) : (
-              <div className="flex items-center text-xs gap-1 text-gray-500">
-                <GlobeIcon height={12} width={12} />
-                <span>Public</span>
-              </div>
-            )}
-            <div className="flex items-center text-xs gap-1 text-gray-500">
-              <PencilIcon height={12} width={12} />
-              <span>{timeAgo(new Date(pkg.updated_at))}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-
-  if (withLink) {
-    return (
-      <Link key={pkg.package_id} href={`/${pkg.name}`}>
-        {cardContent}
-      </Link>
-    )
-  }
-
-  return cardContent
-}

package/src/components/PackageCardSkeleton.tsx

@@ -1,17 +0,0 @@
-export const PackageCardSkeleton = () => {
-  return (
-    <div className="border p-4 rounded-md animate-pulse">
-      <div className="flex items-start gap-4">
-        <div className="h-16 w-16 flex-shrink-0 rounded-md bg-slate-200"></div>
-        <div className="flex-1">
-          <div className="h-5 bg-slate-200 rounded w-3/4 mb-2"></div>
-          <div className="h-4 bg-slate-200 rounded w-1/2 mb-2"></div>
-          <div className="flex gap-2">
-            <div className="h-3 bg-slate-200 rounded w-16"></div>
-            <div className="h-3 bg-slate-200 rounded w-16"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/PackageLink.tsx

@@ -1,29 +0,0 @@
-import { Link } from "wouter"
-import { Star } from "lucide-react"
-import { Package } from "fake-snippets-api/lib/db/schema"
-
-export const PackageLink = (pkg: Package) => {
-  return (
-    <>
-      <Link
-        className="text-blue-500 font-semibold hover:underline"
-        href={`/${pkg.owner_github_username}`}
-      >
-        {pkg.owner_github_username}
-      </Link>
-      <span className="px-0.5 text-gray-500">/</span>
-      <Link
-        className="text-blue-500  font-semibold hover:underline"
-        href={`/${pkg.unscoped_name}`}
-      >
-        {pkg.unscoped_name}
-      </Link>
-      {pkg.star_count !== undefined && (
-        <span className="ml-2 text-gray-500 text-xs flex items-center">
-          <Star className="w-3 h-3 mr-1" />
-          {pkg.star_count}
-        </span>
-      )}
-    </>
-  )
-}

package/src/components/PackageSearchResults.tsx

@@ -1,81 +0,0 @@
-import React from "react"
-import { Package } from "fake-snippets-api/lib/db/schema"
-import { PackageCardSkeleton } from "./PackageCardSkeleton"
-import { Search } from "lucide-react"
-import { PackageCard } from "./PackageCard"
-
-interface PackageSearchResultsProps {
-  isLoading: boolean
-  error: unknown
-  filteredPackages: Package[] | undefined
-  apiBaseUrl: string
-  emptyStateMessage: string
-}
-
-const PackageGrid = ({
-  packages,
-}: { packages: Package[]; baseUrl: string }) => (
-  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-    {packages.map((pkg) => (
-      <PackageCard key={pkg.package_id} pkg={pkg} showOwner={true} />
-    ))}
-  </div>
-)
-
-export const LoadingState = () => (
-  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-    {[...Array(6)].map((_, i) => (
-      <PackageCardSkeleton key={i} />
-    ))}
-  </div>
-)
-
-const ErrorState = () => (
-  <div className="bg-red-50 border border-red-200 text-red-700 p-6 rounded-xl shadow-sm max-w-2xl mx-auto">
-    <div className="flex items-start">
-      <div className="mr-4 bg-red-100 p-2 rounded-full">
-        <Search className="w-6 h-6 text-red-600" />
-      </div>
-      <div>
-        <h3 className="text-lg font-semibold mb-2">Error Loading packages</h3>
-        <p className="text-red-600">
-          We couldn't load the trending packages. Please try again later.
-        </p>
-      </div>
-    </div>
-  </div>
-)
-
-const EmptyState = ({
-  message,
-}: {
-  message?: string
-}) => (
-  <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 Matching Packages
-    </h3>
-    {message && (
-      <p className="text-slate-500 max-w-md mx-auto mb-6">{message}</p>
-    )}
-  </div>
-)
-
-const PackageSearchResults: React.FC<PackageSearchResultsProps> = ({
-  isLoading,
-  error,
-  filteredPackages,
-  apiBaseUrl,
-  emptyStateMessage,
-}) => {
-  if (isLoading) return <LoadingState />
-  if (error) return <ErrorState />
-  if (!filteredPackages?.length)
-    return <EmptyState message={emptyStateMessage} />
-  return <PackageGrid packages={filteredPackages} baseUrl={apiBaseUrl} />
-}
-
-export default PackageSearchResults

package/src/components/PackagesList.tsx

@@ -1,71 +0,0 @@
-import { Button } from "@/components/ui/button"
-import { ChevronDown, ChevronUp, Star } from "lucide-react"
-import { Link } from "wouter"
-import { Package } from "fake-snippets-api/lib/db/schema"
-
-interface PackagesListProps {
-  title: string
-  packages?: Package[]
-  showAll?: boolean
-  onToggleShowAll?: () => void
-  maxItems?: number
-}
-
-export const PackagesList = ({
-  title,
-  packages = [],
-  showAll = false,
-  onToggleShowAll,
-  maxItems = 5,
-}: PackagesListProps) => {
-  const displayedPackages = showAll ? packages : packages.slice(0, maxItems)
-
-  return (
-    <div>
-      <div className="flex items-center justify-between">
-        <h2 className="text-sm font-bold text-gray-700">{title}</h2>
-        {packages.length > maxItems && onToggleShowAll && (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onToggleShowAll}
-            className="text-blue-600 hover:text-blue-700 hover:bg-transparent"
-          >
-            {showAll ? (
-              <>
-                Show less <ChevronUp className="w-3 h-3 ml-1" />
-              </>
-            ) : (
-              <>
-                Show more <ChevronDown className="w-3 h-3 ml-1" />
-              </>
-            )}
-          </Button>
-        )}
-      </div>
-      <div className="border-b border-gray-200" />
-      {packages && (
-        <ul className="space-y-1 mt-2">
-          {displayedPackages.map((pkg) => (
-            <li key={pkg.package_id}>
-              <div className="flex items-center">
-                <Link
-                  href={`/${pkg.name}`}
-                  className="text-blue-600 hover:underline text-sm"
-                >
-                  {pkg.name}
-                </Link>
-                {pkg.star_count > 0 && (
-                  <span className="ml-2 text-gray-500 text-xs flex items-center">
-                    <Star className="w-3 h-3 mr-1" />
-                    {pkg.star_count}
-                  </span>
-                )}
-              </div>
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  )
-}

package/src/components/PcbViewerWithContainerHeight.tsx

@@ -1,47 +0,0 @@
-import React, { useRef, useState, useLayoutEffect } from "react"
-import { PCBViewer } from "@tscircuit/pcb-viewer"
-
-export const PcbViewerWithContainerHeight = ({
-  containerClassName,
-  ...props
-}: {
-  containerClassName?: string
-} & React.ComponentProps<typeof PCBViewer>) => {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [computedHeight, setComputedHeight] = useState(620)
-
-  useLayoutEffect(() => {
-    const updateHeight = () => {
-      if (containerRef.current) {
-        const containerHeight = containerRef.current.clientHeight
-        const screenHeight = window.innerHeight
-        setComputedHeight(
-          Math.min(Math.max(containerHeight, 620), screenHeight),
-        )
-      }
-    }
-
-    // Immediate synchronous calculation
-    updateHeight()
-
-    // Resize listener for dynamic changes
-    const resizeObserver = new ResizeObserver(updateHeight)
-    if (containerRef.current) {
-      resizeObserver.observe(containerRef.current)
-    }
-
-    // Fallback for window resize
-    window.addEventListener("resize", updateHeight)
-
-    return () => {
-      resizeObserver.disconnect()
-      window.removeEventListener("resize", updateHeight)
-    }
-  }, [])
-
-  return (
-    <div ref={containerRef} className={containerClassName || "w-full h-full"}>
-      <PCBViewer {...props} height={computedHeight} />
-    </div>
-  )
-}

package/src/components/PrefetchPageLink.tsx

@@ -1,114 +0,0 @@
-import { Link } from "wouter"
-import { useEffect } from "react"
-import { useInView } from "react-intersection-observer"
-import { useQueryClient } from "react-query"
-import { useAxios } from "@/hooks/use-axios"
-
-// Whitelist of known pages that can be safely prefetched
-const PREFETCHABLE_PAGES = new Set([
-  "landing",
-  "editor",
-  "search",
-  "trending",
-  "dashboard",
-  "latest",
-  "settings",
-  "quickstart",
-  "datasheets",
-])
-
-// Helper to check if a path is a package path (e.g. /username/package-name)
-const isPackagePath = (path: string) => {
-  const parts = path.split("/").filter(Boolean)
-  if (parts.length !== 2) return false
-
-  // Make sure we're not matching paths with query parameters in the first segment
-  const firstPart = parts[0].split("?")[0]
-  return firstPart.length > 0 && !PREFETCHABLE_PAGES.has(firstPart)
-}
-
-// Helper to check if a path is a user profile path
-const isUserProfilePath = (path: string) => {
-  const parts = path.split("/").filter(Boolean)
-  if (parts.length !== 1) return false
-
-  // Extract the base path without query parameters
-  const basePath = parts[0].split("?")[0]
-  return !PREFETCHABLE_PAGES.has(basePath)
-}
-
-export const PrefetchPageLink = ({
-  href,
-  children,
-  className,
-  ...props
-}: {
-  href: string
-  children: React.ReactNode
-  className?: string
-  [key: string]: any
-}) => {
-  const { ref, inView } = useInView({
-    triggerOnce: true,
-    threshold: 0,
-  })
-  const queryClient = useQueryClient()
-  const axios = useAxios()
-
-  useEffect(() => {
-    if (!inView) return
-
-    const path = href === "/" ? "landing" : href.slice(1)
-    if (!path) return
-
-    // Handle user profile paths
-    if (isUserProfilePath(path)) {
-      const username = path.split("/")[0]
-      // Prefetch user profile data
-      queryClient.prefetchQuery(["account", username], async () => {
-        const { data } = await axios.post("/accounts/get", {
-          github_username: username,
-        })
-        return data.account
-      })
-      return
-    }
-
-    // Handle package paths
-    if (isPackagePath(path)) {
-      const [owner, name] = path.split("/")
-      const packageName = name.split("#")[0]
-      // Prefetch package data
-      queryClient.prefetchQuery(
-        ["package", `${owner}/${packageName}`],
-        async () => {
-          const { data } = await axios.get("/packages/get", {
-            params: { name: `${owner}/${packageName}` },
-          })
-          return data.package
-        },
-      )
-      return
-    }
-
-    // Handle regular pages
-    const pageName = path.split("?")[0]
-    if (PREFETCHABLE_PAGES.has(pageName)) {
-      import(`@/pages/${pageName}.tsx`).catch((error) => {
-        console.error(`Failed to prefetch page module ${pageName}:`, error)
-      })
-    }
-  }, [inView, href])
-
-  return (
-    <Link
-      {...props}
-      href={href}
-      className={className}
-      draggable={false}
-      ref={ref}
-    >
-      {children}
-    </Link>
-  )
-}

package/src/components/PreviewEmptyState.tsx

@@ -1,16 +0,0 @@
-import { Button } from "@/components/ui/button"
-import { PlayIcon } from "lucide-react"
-
-const PreviewEmptyState = ({
-  triggerRunTsx,
-}: { triggerRunTsx: () => void }) => (
-  <div className="flex items-center gap-3 bg-gray-100 text-center justify-center py-10">
-    No circuit json loaded
-    <Button className="bg-blue-600 hover:bg-blue-500" onClick={triggerRunTsx}>
-      Run Code
-      <PlayIcon className="w-3 h-3 ml-2" />
-    </Button>
-  </div>
-)
-
-export default PreviewEmptyState

package/src/components/ProfileRouter.tsx

@@ -1,30 +0,0 @@
-import React from "react"
-import { useParams } from "wouter"
-import { OrganizationProfilePageContent } from "@/pages/organization-profile"
-import { UserProfilePage } from "@/pages/user-profile"
-import NotFoundPage from "@/pages/404"
-import { FullPageLoader } from "@/App"
-import { useOrganization } from "@/hooks/use-organization"
-
-const ProfileRouter: React.FC = () => {
-  const { username } = useParams()
-  const { organization, isLoading, error } = useOrganization({
-    orgName: username,
-  })
-
-  if (!username) {
-    return <NotFoundPage heading="Username Not Provided" />
-  }
-
-  if (isLoading) {
-    return <FullPageLoader />
-  }
-
-  if (organization && !organization.is_personal_org && !error) {
-    return <OrganizationProfilePageContent org={organization} />
-  }
-
-  return <UserProfilePage />
-}
-
-export default ProfileRouter

package/src/components/RunButton.tsx

@@ -1,27 +0,0 @@
-import { Loader2Icon, PlayIcon } from "lucide-react"
-import { Button } from "./ui/button"
-
-export const RunButton = ({
-  onClick,
-  disabled,
-  isRunningCode,
-}: {
-  onClick: () => void
-  disabled: boolean
-  isRunningCode?: boolean
-}) => {
-  return (
-    <Button
-      className="bg-blue-600 hover:bg-blue-500 run-button"
-      onClick={onClick}
-      disabled={disabled || isRunningCode}
-    >
-      Run
-      {isRunningCode ? (
-        <Loader2Icon className="w-3 h-3 ml-2 animate-spin" />
-      ) : (
-        <PlayIcon className="w-3 h-3 ml-2" />
-      )}
-    </Button>
-  )
-}