@tscircuit/fake-snippets 0.0.108 → 0.0.110

package/src/components/JLCPCBImportDialog.tsx

@@ -1,280 +0,0 @@
-import React, { useState } from "react"
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-  DialogDescription,
-} from "@/components/ui/dialog"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { useAxios } from "@/hooks/use-axios"
-import { useToast } from "@/hooks/use-toast"
-import { useLocation } from "wouter"
-import { useGlobalStore } from "@/hooks/use-global-store"
-import { PrefetchPageLink } from "./PrefetchPageLink"
-
-interface JLCPCBImportDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-}
-
-interface ImportState {
-  isLoading: boolean
-  error: string | null
-  existingComponent: {
-    partNumber: string
-    username: string
-  } | null
-}
-
-interface JLCPCBResponse {
-  ok: boolean
-  package: {
-    package_id: string
-  }
-}
-
-interface APIError {
-  status: number
-  data?: {
-    message?: string
-    existing_part_number?: string
-    part_number?: string
-    error?: {
-      message?: string
-    }
-  }
-}
-
-const extractErrorMessage = (error: APIError): string => {
-  return (
-    error?.data?.message ||
-    error?.data?.error?.message ||
-    "An unexpected error occurred"
-  )
-}
-
-const extractExistingPartNumber = (
-  error: APIError,
-  fallback: string,
-): string => {
-  return error?.data?.message || error?.data?.error?.message || fallback
-}
-
-const useJLCPCBImport = () => {
-  const [state, setState] = useState<ImportState>({
-    isLoading: false,
-    error: null,
-    existingComponent: null,
-  })
-
-  const axios = useAxios()
-  const { toast } = useToast()
-  const [, navigate] = useLocation()
-  const session = useGlobalStore((s) => s.session)
-
-  const resetState = () => {
-    setState({
-      isLoading: false,
-      error: null,
-      existingComponent: null,
-    })
-  }
-
-  const importComponent = async (partNumber: string) => {
-    if (!partNumber.startsWith("C") || partNumber.length < 2) {
-      toast({
-        title: "Invalid Part Number",
-        description:
-          "JLCPCB part numbers should start with 'C' and be at least 2 characters long.",
-        variant: "destructive",
-      })
-      return { success: false }
-    }
-
-    setState((prev) => ({
-      ...prev,
-      isLoading: true,
-      error: null,
-      existingComponent: null,
-    }))
-
-    try {
-      const response = await axios.post<JLCPCBResponse>(
-        "/packages/generate_from_jlcpcb",
-        {
-          jlcpcb_part_number: partNumber,
-        },
-      )
-
-      if (!response.data.ok) {
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          error: "Failed to generate package from JLCPCB part",
-        }))
-        return { success: false }
-      }
-
-      const { package: generatedPackage } = response.data
-
-      toast({
-        title: "Import Successful",
-        description: "JLCPCB component has been imported successfully.",
-      })
-
-      navigate(`/editor?package_id=${generatedPackage.package_id}`)
-      return { success: true }
-    } catch (error: any) {
-      const apiError = error as APIError
-
-      if (apiError.status === 404) {
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          error: `Component with JLCPCB part number ${partNumber} not found`,
-        }))
-      } else if (apiError.status === 409) {
-        const existingPartNumber = extractExistingPartNumber(
-          apiError,
-          partNumber,
-        )
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          existingComponent: {
-            partNumber: existingPartNumber,
-            username: session?.github_username || "",
-          },
-        }))
-      } else {
-        const errorMessage = extractErrorMessage(apiError)
-        setState((prev) => ({ ...prev, isLoading: false, error: errorMessage }))
-
-        toast({
-          title: "Import Failed",
-          description: errorMessage,
-          variant: "destructive",
-        })
-      }
-
-      return { success: false }
-    }
-  }
-
-  return {
-    ...state,
-    importComponent,
-    resetState,
-  }
-}
-
-export function JLCPCBImportDialog({
-  open,
-  onOpenChange,
-}: JLCPCBImportDialogProps) {
-  const [partNumber, setPartNumber] = useState("")
-  const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
-
-  const { isLoading, error, existingComponent, importComponent, resetState } =
-    useJLCPCBImport()
-
-  const handleImport = async () => {
-    const result = await importComponent(partNumber)
-    if (result.success) {
-      onOpenChange(false)
-    }
-  }
-
-  const handleInputChange = (value: string) => {
-    setPartNumber(value)
-    resetState()
-  }
-
-  const createGitHubIssue = () => {
-    const issueTitle = `[${partNumber}] Failed to import from JLCPCB`
-    const issueBody = `I tried to import the part number ${partNumber} from JLCPCB, but it failed. Here's the error I got:\n\`\`\`\n${error}\n\`\`\`\n\nCould be an issue in \`fetchEasyEDAComponent\` or \`convertRawEasyEdaToTs\``
-    const issueLabels = "snippets,good first issue"
-    const url = `https://github.com/tscircuit/easyeda-converter/issues/new?title=${encodeURIComponent(
-      issueTitle,
-    )}&body=${encodeURIComponent(issueBody)}&labels=${encodeURIComponent(issueLabels)}`
-    window.open(url, "_blank")
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Import from JLCPCB</DialogTitle>
-          <DialogDescription>
-            Enter the JLCPCB part number to import the component.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="py-4 text-center">
-          <a
-            href="https://yaqwsx.github.io/jlcparts/#/"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-blue-500 hover:underline opacity-80"
-          >
-            JLCPCB Part Search
-          </a>
-
-          <Input
-            className="mt-3"
-            placeholder="Enter JLCPCB part number (e.g., C46749)"
-            value={partNumber}
-            disabled={isLoading}
-            onChange={(e) => handleInputChange(e.target.value)}
-            onKeyDown={(e) => {
-              if (
-                e.key === "Enter" &&
-                !isLoading &&
-                isLoggedIn &&
-                partNumber.trim()
-              ) {
-                handleImport()
-              }
-            }}
-          />
-
-          {error && !existingComponent && (
-            <>
-              <p className="bg-red-100 p-2 mt-2 pre-wrap">{error}</p>
-              <div className="flex justify-end mt-2">
-                <Button variant="default" onClick={createGitHubIssue}>
-                  File Issue on GitHub (prefilled)
-                </Button>
-              </div>
-            </>
-          )}
-
-          {existingComponent && (
-            <p className="p-2 mt-2 pre-wrap text-md text-green-600">
-              This part number has already been imported to your profile.{" "}
-              <PrefetchPageLink
-                className="text-blue-500 hover:underline"
-                href={`/${existingComponent.username}/${existingComponent.partNumber}`}
-              >
-                View it here
-              </PrefetchPageLink>
-            </p>
-          )}
-        </div>
-
-        <DialogFooter>
-          <Button onClick={handleImport} disabled={isLoading || !isLoggedIn}>
-            {!isLoggedIn
-              ? "You must be logged in to import from JLCPCB"
-              : isLoading
-                ? "Importing..."
-                : "Import"}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}

package/src/components/PackageBuildsPage/LogContent.tsx

@@ -1,72 +0,0 @@
-type ErrorObject =
-  | {
-      message: string
-    }
-  | string
-
-const getErrorText = (error: ErrorObject | string) => {
-  if (typeof error === "string") {
-    return error
-  }
-  return error.message
-}
-
-export const LogContent = ({
-  logs,
-  error,
-}: {
-  logs: Array<{
-    type?: "info" | "success" | "error"
-    msg?: string
-    message?: string
-    timestamp?: string | number
-    [key: string]: unknown
-  }>
-  error?: ErrorObject | string | null
-}) => {
-  return (
-    <div className="font-mono text-xs space-y-1 min-w-0">
-      {logs.map((log, i) => {
-        const { type, msg, message, timestamp, ...rest } = log
-        const text = msg ?? message
-        if (!text) return null
-
-        return (
-          <div
-            key={i}
-            className={`break-words whitespace-pre-wrap ${
-              type === "error"
-                ? "text-red-600"
-                : type === "success"
-                  ? "text-green-600"
-                  : "text-gray-600"
-            }`}
-          >
-            {timestamp !== undefined && (
-              <span className="text-gray-500 whitespace-nowrap">
-                {new Date(Number(timestamp)).toLocaleTimeString()}
-              </span>
-            )}
-            {timestamp !== undefined && " "}
-            <span className="break-all">{text}</span>
-            {Object.keys(rest).filter((k) => k !== "package_release_id")
-              .length > 0 && (
-              <span className="text-gray-500">
-                {" "}
-                {Object.entries(rest)
-                  .filter(([key]) => key !== "package_release_id")
-                  .map(([key, value]) => `${key}: ${String(value)}`)
-                  .join(" ")}
-              </span>
-            )}
-          </div>
-        )
-      })}
-      {error && (
-        <div className="text-red-600 break-words whitespace-pre-wrap">
-          {getErrorText(error)}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/PackageBuildsPage/PackageBuildDetailsPage.tsx

@@ -1,115 +0,0 @@
-"use client"
-
-import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
-import { PackageRelease } from "fake-snippets-api/lib/db/schema"
-import { useState } from "react"
-import { LogContent } from "./LogContent"
-import { BuildPreviewContent } from "./build-preview-content"
-import { CollapsibleSection } from "./collapsible-section"
-import { PackageBuildDetailsPanel } from "./package-build-details-panel"
-import { PackageBuildHeader } from "./package-build-header"
-
-function computeDuration(
-  startedAt: string | null | undefined,
-  completedAt: string | null | undefined,
-) {
-  if (!startedAt || !completedAt) return ""
-  return `${Math.floor((new Date(completedAt).getTime() - new Date(startedAt).getTime()) / 1000)}s`
-}
-
-export const PackageBuildDetailsPage = () => {
-  const { packageRelease } = useCurrentPackageRelease({
-    include_logs: true,
-    refetchInterval: 2000,
-  })
-  const [openSections, setOpenSections] = useState<Record<string, boolean>>({})
-
-  const {
-    circuit_json_build_logs,
-    circuit_json_build_completed_at,
-    circuit_json_build_in_progress,
-    circuit_json_build_is_stale,
-    circuit_json_build_started_at,
-    circuit_json_build_error,
-    circuit_json_build_error_last_updated_at,
-    transpilation_completed_at,
-    transpilation_in_progress,
-    transpilation_is_stale,
-    transpilation_logs,
-    transpilation_started_at,
-    circuit_json_build_display_status,
-    transpilation_display_status,
-    transpilation_error,
-  } = packageRelease ?? ({} as Partial<PackageRelease>)
-
-  const toggleSection = (section: string) => {
-    setOpenSections((prev) => ({
-      ...prev,
-      [section]: !prev[section],
-    }))
-  }
-
-  return (
-    <div className="min-h-screen bg-gray-50 text-gray-900">
-      <PackageBuildHeader />
-
-      <div className="px-4 sm:px-6 py-4 sm:py-6 container mx-auto max-w-7xl">
-        {/* Main Content */}
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6 mb-6 sm:mb-8 items-start">
-          {/* Preview Section */}
-          <div className="lg:col-span-2">
-            <div className="bg-white border border-gray-200 rounded-lg p-4 flex items-center justify-center min-h-[280px] sm:min-h-[340px] lg:max-h-[420px]">
-              <BuildPreviewContent />
-            </div>
-          </div>
-
-          {/* Details Panel */}
-          <PackageBuildDetailsPanel />
-        </div>
-
-        {/* Collapsible Sections */}
-        <div className="space-y-4 mb-6 sm:mb-8">
-          <CollapsibleSection
-            title="Transpilation Logs"
-            duration={computeDuration(
-              transpilation_started_at,
-              transpilation_completed_at,
-            )}
-            displayStatus={transpilation_display_status}
-            isOpen={openSections.summary}
-            onToggle={() => toggleSection("summary")}
-          >
-            <LogContent
-              logs={
-                transpilation_logs ?? [
-                  { msg: "No transpilation logs available" },
-                ]
-              }
-              error={transpilation_error}
-            />
-          </CollapsibleSection>
-
-          <CollapsibleSection
-            title="Circuit JSON Build Logs"
-            duration={computeDuration(
-              circuit_json_build_started_at,
-              circuit_json_build_completed_at,
-            )}
-            displayStatus={circuit_json_build_display_status}
-            isOpen={openSections.logs}
-            onToggle={() => toggleSection("logs")}
-          >
-            <LogContent
-              logs={
-                circuit_json_build_logs ?? [
-                  { msg: "No Circuit JSON logs available" },
-                ]
-              }
-              error={circuit_json_build_error!}
-            />
-          </CollapsibleSection>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/PackageBuildsPage/build-preview-content.tsx

@@ -1,27 +0,0 @@
-import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
-import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
-
-export function BuildPreviewContent() {
-  const { packageRelease } = useCurrentPackageRelease({ refetchInterval: 2000 })
-  const { packageInfo } = useCurrentPackageInfo()
-
-  if (!packageRelease) {
-    return (
-      <div className="flex items-center justify-center w-full h-full">
-        <div className="w-32 h-32 sm:w-48 sm:h-48 bg-gray-200 rounded animate-pulse-slow"></div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex items-center justify-center w-full h-full">
-      <div className="rounded overflow-hidden w-full max-w-full">
-        <img
-          src={`https://api.tscircuit.com/packages/images/${packageInfo?.name}/pcb.png`}
-          alt="Package build preview"
-          className="object-contain rounded w-full h-auto max-h-[240px] sm:max-h-[300px] lg:max-h-[360px]"
-        />
-      </div>
-    </div>
-  )
-}

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>
-  )
-}