@tscircuit/fake-snippets 0.0.121 → 0.0.123

package/src/pages/preview-release.tsx

@@ -1,209 +0,0 @@
-import { useEffect, useState } from "react"
-import { useParams } from "wouter"
-import { Loader2, ChevronLeft, ChevronRight } from "lucide-react"
-import Header from "@/components/Header"
-import { cn } from "@/lib/utils"
-import { Link } from "wouter"
-import NotFoundPage from "./404"
-import { getBuildStatus } from "@/components/preview"
-import { usePackageReleaseById } from "@/hooks/use-package-release"
-import { usePackageBuild } from "@/hooks/use-package-builds"
-import { PackageBuild } from "fake-snippets-api/lib/db/schema"
-import { usePackageByName } from "@/hooks/use-package-by-package-name"
-import { RunFrameStaticBuildViewer } from "@tscircuit/runframe/runner"
-import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
-
-const StatusPill = ({ status }: { status: string }) => {
-  const color =
-    status === "success"
-      ? "bg-emerald-600"
-      : status === "failed"
-        ? "bg-red-600"
-        : status === "building"
-          ? "bg-blue-600 animate-pulse"
-          : "bg-gray-500"
-  return <span className={cn("inline-block w-2 h-2 rounded-full", color)} />
-}
-
-const fetchCircuitJson = async (fileRef: {
-  filePath: string
-  fileStaticAssetUrl: string
-}): Promise<object> => {
-  const res = await fetch(String(fileRef.fileStaticAssetUrl))
-  const resJson = await res.json()
-  const circuitJson = JSON.parse(resJson.package_file.content_text)
-  console.log(circuitJson)
-  return circuitJson
-}
-
-export default function PreviewBuildPage() {
-  const params = useParams<{
-    packageReleaseId: string
-    author: string
-    packageName: string
-  }>()
-  const packageReleaseId = params?.packageReleaseId || null
-  const author = params?.author || null
-  const packageName = params?.packageName || null
-
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(true)
-
-  const apiUrl = useApiBaseUrl()
-  const { data: packageRelease, isLoading: isLoadingRelease } =
-    usePackageReleaseById(packageReleaseId)
-  const { data: pkg, isLoading: isLoadingPackage } = usePackageByName(
-    author && packageName ? `${author}/${packageName}` : null,
-  )
-  const { data: build, isLoading: isLoadingBuild } = usePackageBuild(
-    packageRelease?.latest_package_build_id || null,
-  )
-
-  const isLoading = isLoadingRelease || isLoadingPackage || isLoadingBuild
-
-  if (!packageReleaseId) {
-    return <NotFoundPage heading="Package Release Not Found" />
-  }
-
-  if (!packageRelease && !isLoadingRelease) {
-    return <NotFoundPage heading="Package Release Not Found" />
-  }
-  const { status } = getBuildStatus(build as PackageBuild)
-
-  return (
-    <>
-      <Header />
-      <div className="flex flex-col h-screen overflow-hidden  !-mt-1">
-        <div className="flex flex-1 overflow-hidden">
-          <aside
-            className={cn(
-              "relative border-r border-gray-200 rounded-r-lg z-[5] h-full transition-all duration-300 ease-in-out bg-white",
-              sidebarCollapsed ? "w-2 md:w-3" : "w-80",
-            )}
-          >
-            <button
-              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
-              className="absolute top-4 -right-3 z-10 bg-white border border-gray-200 rounded-full p-1 hover:bg-gray-50"
-            >
-              {sidebarCollapsed ? (
-                <ChevronRight size={20} />
-              ) : (
-                <ChevronLeft size={20} />
-              )}
-            </button>
-
-            {!sidebarCollapsed && (
-              <div className="p-4">
-                <div className="space-y-3">
-                  <div className="flex items-center justify-between">
-                    <h2 className="text-lg font-semibold text-gray-900">
-                      Deployment
-                    </h2>
-                    <StatusPill status={status} />
-                  </div>
-
-                  <div className="space-y-2">
-                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
-                      <span className="text-xs text-gray-500 uppercase tracking-wide">
-                        ID
-                      </span>
-                      <Link
-                        href={`/${pkg?.name}/releases/${build?.package_release_id}`}
-                        title={build?.package_build_id}
-                        className="font-mono text-sm truncate text-gray-900 bg-gray-100 w-full px-2 py-1 rounded"
-                      >
-                        {build?.package_build_id}
-                      </Link>
-                    </div>
-                    {packageRelease?.commit_message && (
-                      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
-                        <span className="text-xs text-gray-500 uppercase tracking-wide">
-                          Commit
-                        </span>
-                        <a
-                          title={packageRelease?.commit_message}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          href={`https://github.com/${pkg?.github_repo_full_name}/commit/${packageRelease?.commit_message}`}
-                          className="font-mono text-xs text-gray-600 bg-gray-50 px-2 text-right py-1 rounded truncate"
-                        >
-                          {packageRelease?.commit_message}
-                        </a>
-                      </div>
-                    )}
-
-                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
-                      <span className="text-xs text-gray-500 uppercase tracking-wide">
-                        Status
-                      </span>
-                      <span
-                        className={`text-xs font-medium px-2 py-1 w-fit rounded-full capitalize ${
-                          status === "success"
-                            ? "bg-emerald-100 text-emerald-800"
-                            : status === "error"
-                              ? "bg-red-100 text-red-800"
-                              : status === "building"
-                                ? "bg-blue-100 text-blue-800"
-                                : "bg-gray-100 text-gray-800"
-                        }`}
-                      >
-                        {status}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            )}
-          </aside>
-
-          <main className="flex-1 overflow-y-auto">
-            <div className="flex flex-col h-full overflow-h-hidden">
-              {isLoading ? (
-                <div className="flex-1 flex items-center justify-center">
-                  <div className="flex flex-col items-center gap-3 text-gray-500">
-                    <Loader2 className="w-6 h-6 animate-spin" />
-                    <p>Loading package contents...</p>
-                  </div>
-                </div>
-              ) : status === "success" ? (
-                <RunFrameStaticBuildViewer
-                  files={[
-                    {
-                      filePath: "dist/circuit.json",
-                      fileStaticAssetUrl: `${apiUrl}/package_files/get?file_path=dist/circuit.json&package_release_id=${build?.package_release_id}`,
-                    },
-                  ]}
-                  onFetchFile={fetchCircuitJson as any}
-                />
-              ) : (
-                <div className="flex-1 flex items-center justify-center">
-                  {status === "building" ? (
-                    <div className="flex flex-col items-center gap-3 text-gray-500">
-                      <Loader2 className="w-6 h-6 animate-spin" />
-                      <p>Building…</p>
-                    </div>
-                  ) : status === "error" ? (
-                    <div className="text-center">
-                      <p className="text-red-600 font-medium mb-2">
-                        Build Failed
-                      </p>
-                    </div>
-                  ) : (
-                    <div className="text-center p-4">
-                      <p className="text-gray-600 font-medium mb-2">
-                        Build Status: {status}
-                      </p>
-                      <p className="text-sm text-gray-500 max-w-lg">
-                        Please wait while we process this build status. Try
-                        refreshing the page in a few moments.
-                      </p>
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          </main>
-        </div>
-      </div>
-    </>
-  )
-}

package/src/pages/quickstart.tsx

@@ -1,258 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from "react"
-import { useQuery, useQueryClient } from "react-query"
-import { useAxios } from "@/hooks/use-axios"
-import Header from "@/components/Header"
-import Footer from "@/components/Footer"
-import { Package } from "fake-snippets-api/lib/db/schema"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { TypeBadge } from "@/components/TypeBadge"
-import { CircuitJsonImportDialog } from "@/components/CircuitJsonImportDialog"
-import { useGlobalStore } from "@/hooks/use-global-store"
-import { useImportComponentDialog } from "@/components/dialogs/import-component-dialog"
-import { useJlcpcbComponentImport } from "@/hooks/use-jlcpcb-component-import"
-import { JlcpcbComponentTsxLoadedPayload } from "@tscircuit/runframe/runner"
-import { cn } from "@/lib/utils"
-import { Link } from "wouter"
-import { Loader2 } from "lucide-react"
-
-export const QuickstartPage = () => {
-  const axios = useAxios()
-  const queryClient = useQueryClient()
-  const [isCircuitJsonImportDialogOpen, setIsCircuitJsonImportDialogOpen] =
-    useState(false)
-  const session = useGlobalStore((s) => s.session)
-  const currentUser = session?.github_username
-  const isLoggedIn = Boolean(currentUser)
-  const { Dialog: ImportComponentDialog, openDialog: openImportDialog } =
-    useImportComponentDialog()
-  const { importComponent: importJlcpcbComponent } = useJlcpcbComponentImport()
-  const jlcpcbProxyRequestHeaders = useMemo(
-    () =>
-      session?.token
-        ? {
-            Authorization: `Bearer ${session.token}`,
-          }
-        : undefined,
-    [session?.token],
-  )
-  const handleJlcpcbComponentSelected = useCallback(
-    async (payload: JlcpcbComponentTsxLoadedPayload) => {
-      await importJlcpcbComponent(payload)
-    },
-    [importJlcpcbComponent],
-  )
-  useEffect(() => {
-    queryClient.removeQueries("userPackages")
-  }, [queryClient])
-  const { data: myPackages, isLoading } = useQuery<Package[]>(
-    ["userPackages", currentUser],
-    async () => {
-      const response = await axios.post(`/packages/list`, {
-        owner_github_username: currentUser,
-      })
-      return response.data.packages
-    },
-    {
-      enabled: isLoggedIn,
-    },
-  )
-
-  const blankTemplates: Array<{
-    name: string
-    type: string
-    disabled?: boolean
-  }> = [
-    { name: "Blank Circuit Board", type: "board" },
-    { name: "Blank Circuit Module", type: "package" },
-  ]
-
-  const templates = [
-    { name: "Blinking LED Board", type: "board" },
-    { name: "USB-C LED Flashlight", type: "board" },
-  ]
-
-  return (
-    <div className="min-h-screen">
-      <Header />
-      <div className="container mx-auto px-6 py-12">
-        {isLoggedIn && (
-          <div className="mb-16 hidden md:block">
-            <div className="mb-8">
-              <h2 className="text-2xl font-semibold text-slate-900">
-                Recent Packages
-              </h2>
-            </div>
-            {isLoading ? (
-              <div className="flex items-center justify-center py-12">
-                <Loader2 className="w-10 h-10 animate-spin text-blue-500 mb-4" />
-              </div>
-            ) : (
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-                {myPackages
-                  ?.sort(
-                    (a, b) =>
-                      new Date(b.created_at).getTime() -
-                      new Date(a.created_at).getTime(),
-                  )
-                  .slice(0, 4)
-                  .map((pkg) => (
-                    <Link
-                      key={pkg.package_id}
-                      href={`/editor?package_id=${pkg.package_id}`}
-                    >
-                      <Card className="hover:shadow-md border bg-white shadow-sm transition-shadow flex flex-col h-full rounded-md">
-                        <CardHeader>
-                          <CardTitle className="text-lg font-semibold text-slate-900">
-                            {pkg.unscoped_name}
-                          </CardTitle>
-                        </CardHeader>
-                        <CardContent className="-mt-4">
-                          <p className="text-sm text-slate-500">
-                            Last edited{" "}
-                            {new Date(pkg.updated_at).toLocaleDateString()}
-                          </p>
-                        </CardContent>
-                      </Card>
-                    </Link>
-                  ))}
-              </div>
-            )}
-          </div>
-        )}
-
-        <div className="mb-16">
-          <div className="mb-8">
-            <h2 className="text-2xl font-semibold text-slate-900">
-              Start Blank
-            </h2>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {blankTemplates.map((template, index) => (
-              <Link
-                key={index}
-                href={
-                  template.disabled
-                    ? "#"
-                    : `/editor?template=${template.name
-                        .toLowerCase()
-                        .replace(/ /g, "-")}`
-                }
-              >
-                <Card
-                  className={cn(
-                    "hover:shadow-md border bg-white transition-shadow h-full flex flex-col rounded-md",
-                    template.disabled && "opacity-50 cursor-not-allowed",
-                  )}
-                >
-                  <CardHeader className="p-6 flex-grow flex flex-col justify-between">
-                    <div>
-                      <CardTitle className="text-lg font-semibold text-slate-900 mb-3">
-                        {template.name}
-                      </CardTitle>
-                      <div className="flex justify-between items-center">
-                        <TypeBadge type={template.type as any} />
-                      </div>
-                    </div>
-                  </CardHeader>
-                </Card>
-              </Link>
-            ))}
-          </div>
-        </div>
-
-        <div className="mb-16">
-          <div className="mb-8">
-            <h2 className="text-2xl font-semibold text-slate-900">
-              Import Components
-            </h2>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            <Card className="hover:shadow-md border bg-white transition-shadow flex flex-col rounded-md">
-              <CardHeader className="p-6 pb-4">
-                <div className="flex items-center justify-between mb-2">
-                  <CardTitle className="text-lg font-semibold text-slate-900">
-                    JLCPCB Component
-                  </CardTitle>
-                  <TypeBadge type="package" />
-                </div>
-                <p className="text-sm text-slate-500">
-                  Import components from JLCPCB library
-                </p>
-              </CardHeader>
-              <CardContent className="p-6 pt-0 mt-auto">
-                <Button
-                  className="w-full text-white"
-                  onClick={() => openImportDialog()}
-                >
-                  Import JLCPCB
-                </Button>
-              </CardContent>
-            </Card>
-            <Card className="hover:shadow-md border bg-white transition-shadow flex flex-col rounded-md">
-              <CardHeader className="p-6 pb-4">
-                <div className="flex items-center justify-between mb-2">
-                  <CardTitle className="text-lg font-semibold text-slate-900">
-                    Circuit JSON
-                  </CardTitle>
-                  <TypeBadge type="package" />
-                </div>
-                <p className="text-sm text-slate-500">
-                  Import from Circuit JSON format
-                </p>
-              </CardHeader>
-              <CardContent className="p-6 pt-0 mt-auto">
-                <Button
-                  className="w-full text-white"
-                  onClick={() => setIsCircuitJsonImportDialogOpen(true)}
-                >
-                  Import JSON
-                </Button>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-
-        <ImportComponentDialog
-          onJlcpcbComponentTsxLoaded={handleJlcpcbComponentSelected}
-          jlcpcbProxyRequestHeaders={jlcpcbProxyRequestHeaders}
-        />
-
-        <CircuitJsonImportDialog
-          open={isCircuitJsonImportDialogOpen}
-          onOpenChange={setIsCircuitJsonImportDialogOpen}
-        />
-
-        <div className="mb-16">
-          <div className="mb-8">
-            <h2 className="text-2xl font-semibold text-slate-900">
-              Popular Templates
-            </h2>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {templates.map((template, index) => (
-              <Link
-                key={index}
-                href={`/editor?template=${template.name
-                  .toLowerCase()
-                  .replace(/ /g, "-")}`}
-              >
-                <Card className="hover:shadow-md border bg-white transition-shadow rounded-md">
-                  <CardHeader className="p-6">
-                    <div className="flex items-center justify-between ">
-                      <CardTitle className="text-lg font-semibold text-slate-900">
-                        {template.name}
-                      </CardTitle>
-                      <TypeBadge type={template.type as any} />
-                    </div>
-                  </CardHeader>
-                </Card>
-              </Link>
-            ))}
-          </div>
-        </div>
-      </div>
-      <Footer />
-    </div>
-  )
-}

package/src/pages/release-builds.tsx

@@ -1,99 +0,0 @@
-import { useParams } from "wouter"
-import NotFoundPage from "./404"
-import { usePackageByName } from "@/hooks/use-package-by-package-name"
-import { usePackageReleaseByIdOrVersion } from "@/hooks/use-package-release-by-id-or-version"
-import { usePackageBuildsByReleaseId } from "@/hooks/use-package-builds"
-import { BuildsList } from "@/components/preview/BuildsList"
-import Header from "@/components/Header"
-import { useLocation } from "wouter"
-import { PackageBreadcrumb } from "@/components/PackageBreadcrumb"
-import { PackageBuild } from "fake-snippets-api/lib/db/schema"
-
-export default function ReleaseBuildsPage() {
-  const params = useParams<{
-    author: string
-    packageName: string
-    releaseId: string
-  }>()
-
-  const packageName =
-    params?.author && params?.packageName
-      ? `${params.author}/${params.packageName}`
-      : null
-
-  const [, setLocation] = useLocation()
-
-  const {
-    data: pkg,
-    isLoading: isLoadingPackage,
-    error: packageError,
-  } = usePackageByName(packageName)
-
-  const {
-    data: packageRelease,
-    isLoading: isLoadingRelease,
-    error: releaseError,
-  } = usePackageReleaseByIdOrVersion(params?.releaseId ?? null, packageName)
-
-  const {
-    data: builds,
-    isLoading: isLoadingBuilds,
-    error: buildsError,
-  } = usePackageBuildsByReleaseId(params?.releaseId ?? null)
-
-  if (isLoadingPackage || isLoadingRelease || isLoadingBuilds) {
-    return null
-  }
-
-  if (packageError?.status === 404 || !pkg) {
-    return <NotFoundPage heading="Package Not Found" />
-  }
-
-  if (releaseError?.status === 404 || !packageRelease) {
-    return <NotFoundPage heading="Release Not Found" />
-  }
-
-  return (
-    <>
-      <Header />
-      <div className="min-h-screen bg-white">
-        <div className="bg-gray-50 border-b py-10">
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <PackageBreadcrumb
-              author={params?.author || ""}
-              packageName={packageName || ""}
-              unscopedName={pkg.unscoped_name}
-              currentPage="builds"
-              releaseVersion={
-                packageRelease.version ||
-                `v${packageRelease.package_release_id.slice(-6)}`
-              }
-            />
-            <div className="flex items-center gap-4">
-              <div>
-                <h1 className="text-3xl font-bold text-gray-900">
-                  {pkg.name} - Release Builds
-                </h1>
-                <p className="text-gray-600 mt-2">
-                  All builds for release {packageRelease.package_release_id}
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-          <div className="space-y-6">
-            <div className="flex items-center justify-between">
-              <h2 className="text-2xl font-bold text-gray-900">All Builds</h2>
-              <p className="text-sm text-gray-600">
-                {builds?.length} build{builds?.length !== 1 ? "s" : ""} found
-              </p>
-            </div>
-            {pkg && <BuildsList pkg={pkg} />}
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}