@tscircuit/fake-snippets 0.0.106 → 0.0.108

package/src/pages/release-detail.tsx

@@ -0,0 +1,120 @@
+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 { usePackageBuild } from "@/hooks/use-package-builds"
+import { ConnectedRepoOverview } from "@/components/preview/ConnectedRepoOverview"
+import Header from "@/components/Header"
+import { Badge } from "@/components/ui/badge"
+import { Calendar, GitBranch } from "lucide-react"
+import { useState } from "react"
+import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
+import { PackageBreadcrumb } from "@/components/PackageBreadcrumb"
+
+export default function ReleaseDetailPage() {
+  const params = useParams<{
+    author: string
+    packageName: string
+    releaseId?: string
+    packageReleaseId?: string
+  }>()
+
+  const packageName =
+    params?.author && params?.packageName
+      ? `${params.author}/${params.packageName}`
+      : null
+
+  const [copied, setCopied] = useState(false)
+
+  const {
+    data: pkg,
+    isLoading: isLoadingPackage,
+    error: packageError,
+  } = usePackageByName(packageName)
+
+  const releaseIdOrVersion =
+    params?.releaseId ?? params?.packageReleaseId ?? null
+
+  const {
+    data: packageRelease,
+    isLoading: isLoadingRelease,
+    error: releaseError,
+  } = usePackageReleaseByIdOrVersion(releaseIdOrVersion, packageName)
+
+  const {
+    data: latestBuild,
+    isLoading: isLoadingBuild,
+    error: buildError,
+  } = usePackageBuild(packageRelease?.latest_package_build_id ?? null)
+
+  if (isLoadingPackage || isLoadingRelease) {
+    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">
+        {/* Page Header */}
+        <div className="bg-gray-50 border-b py-6">
+          <div className="max-w-7xl lg:flex lg:justify-between mx-auto px-4 sm:px-6 lg:px-8">
+            {/* Breadcrumb */}
+            <PackageBreadcrumb
+              author={pkg.owner_github_username || ""}
+              packageName={pkg.name}
+              unscopedName={pkg.unscoped_name}
+              releaseVersion={
+                packageRelease.version ||
+                `v${packageRelease.package_release_id.slice(-6)}`
+              }
+            />
+
+            {/* Header Content */}
+            <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-2">
+              <div className="flex-1">
+                <div className="flex items-center gap-4 text-sm text-gray-600">
+                  {packageRelease.is_pr_preview && (
+                    <a
+                      href={`https://github.com/${pkg.github_repo_full_name}/pull/${packageRelease.github_pr_number}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <div className="flex items-center gap-1">
+                        <GitBranch className="w-4 h-4" />
+                        <Badge variant="outline" className="text-xs">
+                          PR #{packageRelease.github_pr_number}
+                        </Badge>
+                      </div>
+                    </a>
+                  )}
+                  <div className="flex items-center gap-1">
+                    <Calendar className="w-4 h-4" />
+                    <span>
+                      Created {formatTimeAgo(packageRelease.created_at)}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Main Content */}
+        <ConnectedRepoOverview
+          packageBuild={latestBuild ?? null}
+          isLoadingBuild={isLoadingBuild}
+          pkg={pkg}
+          packageRelease={packageRelease}
+        />
+      </div>
+    </>
+  )
+}

package/src/pages/releases.tsx

@@ -0,0 +1,55 @@
+import { useParams } from "wouter"
+import NotFoundPage from "./404"
+import { useLatestPackageRelease } from "@/hooks/use-package-release"
+import { usePackageBuild } from "@/hooks/use-package-builds"
+import { usePackageByName } from "@/hooks/use-package-by-package-name"
+import { PackageReleasesDashboard } from "@/components/preview/PackageReleasesDashboard"
+
+export default function ReleasesPage() {
+  const params = useParams<{ author: string; packageName: string }>()
+  const packageName =
+    params?.author && params?.packageName
+      ? `${params.author}/${params.packageName}`
+      : null
+
+  const {
+    data: pkg,
+    isLoading: isLoadingPackage,
+    error: packageError,
+  } = usePackageByName(packageName)
+
+  const {
+    data: latestRelease,
+    isLoading: isLoadingRelease,
+    error: releaseError,
+  } = useLatestPackageRelease(pkg?.package_id ?? null)
+
+  // Get the latest build for the latest release to show status and metadata
+  const {
+    data: latestBuild,
+    isLoading: isLoadingBuild,
+    error: buildError,
+  } = usePackageBuild(latestRelease?.latest_package_build_id ?? null)
+
+  if (isLoadingPackage || isLoadingRelease || isLoadingBuild) {
+    return null
+  }
+
+  if (packageError?.status === 404 || !pkg) {
+    return <NotFoundPage heading="Package Not Found" />
+  }
+
+  if (releaseError?.status === 404 || !latestRelease) {
+    return <NotFoundPage heading="No Releases Found" />
+  }
+
+  // If there's no build, we still want to show the releases page
+  // The PackageReleasesDashboard will handle the case where latestBuild is null
+  return (
+    <PackageReleasesDashboard
+      latestRelease={latestRelease}
+      latestBuild={latestBuild ?? null}
+      pkg={pkg}
+    />
+  )
+}

package/fake-snippets-api/routes/api/package_builds/latest.ts

@@ -1,109 +0,0 @@
-import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
-import { z } from "zod"
-import { publicMapPackageBuild } from "fake-snippets-api/lib/public-mapping/public-map-package-build"
-
-export default withRouteSpec({
-  methods: ["GET"],
-  auth: "session",
-  queryParams: z.object({
-    package_id: z.string().optional(),
-    package_release_id: z.string().optional(),
-  }),
-  jsonResponse: z.object({
-    package_build: z.any().nullable(),
-  }),
-})(async (req, ctx) => {
-  const { package_id, package_release_id } = req.query
-
-  if (!package_id && !package_release_id) {
-    return ctx.error(400, {
-      error_code: "invalid_request",
-      message: "Either package_id or package_release_id must be provided",
-    })
-  }
-
-  let targetPackageId = package_id
-
-  if (package_release_id) {
-    const packageRelease = ctx.db.packageReleases.find(
-      (pr) => pr.package_release_id === package_release_id,
-    )
-    if (!packageRelease) {
-      return ctx.error(404, {
-        error_code: "package_release_not_found",
-        message: "Package release not found",
-      })
-    }
-    targetPackageId = packageRelease.package_id
-  }
-
-  if (targetPackageId) {
-    const pkg = ctx.db.packages.find((p) => p.package_id === targetPackageId)
-    if (!pkg) {
-      return ctx.error(404, {
-        error_code: "package_not_found",
-        message: "Package not found",
-      })
-    }
-    if (pkg.creator_account_id !== ctx.auth.account_id) {
-      console.log(
-        pkg.creator_account_id !== ctx.auth.account_id,
-        pkg.creator_account_id,
-        ctx.auth.account_id,
-      )
-      return ctx.error(403, {
-        error_code: "unauthorized",
-        message: "You are not authorized to access this package",
-      })
-    }
-  }
-
-  let builds = ctx.db.packageBuilds
-
-  if (package_id) {
-    const packageReleases = ctx.db.packageReleases.filter(
-      (x) => x.package_id === package_id,
-    )
-    if (packageReleases.length === 0) {
-      return ctx.error(404, {
-        error_code: "package_not_found",
-        message: "Package not found",
-      })
-    }
-
-    const packageReleaseIds = packageReleases
-      .filter((pr) => pr.package_id === package_id)
-      .map((pr) => pr.package_release_id)
-
-    builds = builds.filter((build) =>
-      packageReleaseIds.includes(build.package_release_id),
-    )
-  }
-
-  if (package_release_id) {
-    builds = builds.filter(
-      (build) => build.package_release_id === package_release_id,
-    )
-  }
-
-  builds = builds.sort(
-    (a, b) =>
-      new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
-  )
-
-  const latestBuild = builds[0] || null
-
-  if (!latestBuild) {
-    return ctx.json({
-      package_build: null,
-    })
-  }
-
-  const publicBuild = publicMapPackageBuild(latestBuild, {
-    include_logs: true,
-  })
-
-  return ctx.json({
-    package_build: publicBuild,
-  })
-})

package/src/hooks/use-snippets-base-api-url.ts

@@ -1,3 +0,0 @@
-export const useSnippetsBaseApiUrl = () => {
-  return import.meta.env.VITE_SNIPPETS_API_URL ?? "/api"
-}

package/src/pages/preview-build.tsx

@@ -1,380 +0,0 @@
-import { useState } from "react"
-import { useParams } from "wouter"
-import { Loader2, ChevronLeft, ChevronRight, File, Folder } from "lucide-react"
-import Header from "@/components/Header"
-import { SuspenseRunFrame } from "@/components/SuspenseRunFrame"
-import { TreeView, TreeDataItem } from "@/components/ui/tree-view"
-import { cn } from "@/lib/utils"
-import { PrefetchPageLink } from "@/components/PrefetchPageLink"
-import NotFoundPage from "./404"
-import { getBuildStatus, MOCK_DEPLOYMENTS } from "@/components/preview"
-
-const MOCK_DEPLOYMENT_FILES: Record<
-  string,
-  Array<{ path: string; content: string }>
-> = {
-  pb_1a2b3c4d: [
-    {
-      path: "index.tsx",
-      content: `export default () => (
-  <board width="10mm" height="10mm">
-    <resistor
-      resistance="1k"
-      footprint="0402"
-      name="R1"
-      schX={3}
-      pcbX={3}
-    />
-    <capacitor
-      capacitance="1000pF"
-      footprint="0402"
-      name="C1"
-      schX={-3}
-      pcbX={-3}
-    />
-    <trace from=".R1 > .pin1" to=".C1 > .pin1" />
-  </board>
-)`,
-    },
-    {
-      path: "components/Button.tsx",
-      content: `export default () => (
-  <board width="10mm" height="10mm">
-    <resistor
-      resistance="1k"
-      footprint="0402"
-      name="R1"
-      schX={3}
-      pcbX={3}
-    />
-    <capacitor
-      capacitance="1000pF"
-      footprint="0402"
-      name="C1"
-      schX={-3}
-      pcbX={-3}
-    />
-    <trace from=".R1 > .pin1" to=".C1 > .pin1" />
-  </board>
-)`,
-    },
-  ],
-  pb_9i8j7k6l: [
-    {
-      path: "index.tsx",
-      content: `export default () => (
-  <board width="10mm" height="10mm">
-    <resistor
-      resistance="1k"
-      footprint="0402"
-      name="R1"
-      schX={3}
-      pcbX={3}
-    />
-    <capacitor
-      capacitance="1000pF"
-      footprint="0402"
-      name="C1"
-      schX={-3}
-      pcbX={-3}
-    />
-    <trace from=".R1 > .pin1" to=".C1 > .pin1" />
-  </board>
-)`,
-    },
-    {
-      path: "utils/helpers.ts",
-      content: `export default () => (
-  <board width="10mm" height="10mm">
-    <resistor
-      resistance="1k"
-      footprint="0402"
-      name="R1"
-      schX={3}
-      pcbX={3}
-    />
-    <capacitor
-      capacitance="1000pF"
-      footprint="0402"
-      name="C1"
-      schX={-3}
-      pcbX={-3}
-    />
-    <trace from=".R1 > .pin1" to=".C1 > .pin1" />
-  </board>
-)`,
-    },
-  ],
-  pb_1q2w3e4r: [
-    {
-      path: "index.tsx",
-      content: `export default () => (
-  <board width="10mm" height="10mm">
-    <resistor
-      resistance="1k"
-      footprint="0402"
-      name="R1"
-      schX={3}
-      pcbX={3}
-    />
-    <capacitor
-      capacitance="1000pF"
-      footprint="0402"
-      name="C1"
-      schX={-3}
-      pcbX={-3}
-    />
-    <trace from=".R1 > .pin1" to=".C1 > .pin1" />
-  </board>
-)`,
-    },
-  ],
-  pb_9o8i7u6y: [
-    {
-      path: "index.tsx",
-      content: `export default () => (
-  <board width="10mm" height="10mm">
-    <resistor
-      resistance="1k"
-      footprint="0402"
-      name="R1"
-      schX={3}
-      pcbX={3}
-    />
-    <capacitor
-      capacitance="1000pF"
-      footprint="0402"
-      name="C1"
-      schX={-3}
-      pcbX={-3}
-    />
-    <trace from=".R1 > .pin1" to=".C1 > .pin1" />
-  </board>
-)`,
-    },
-  ],
-}
-
-const getBuildFiles = (buildId: string | null) => {
-  if (!buildId) return []
-  return MOCK_DEPLOYMENT_FILES[buildId] || []
-}
-
-const getBuildFsMap = (buildId: string | null) => {
-  const files = getBuildFiles(buildId)
-  return Object.fromEntries(files.map((f) => [f.path, f.content]))
-}
-
-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)} />
-}
-
-export default function PreviewBuildPage() {
-  const params = useParams<{ buildId: string }>()
-  const buildId = params?.buildId || null
-
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
-  const [selectedFile, setSelectedFile] = useState<string | null>("index.tsx")
-  const [selectedItemId, setSelectedItemId] = useState<string>("")
-
-  const buildFiles = getBuildFiles(buildId)
-  const buildFsMap = getBuildFsMap(buildId)
-
-  const build = buildId
-    ? MOCK_DEPLOYMENTS.find((d) => d.package_build_id === buildId)
-    : MOCK_DEPLOYMENTS[0]
-
-  if (!build) {
-    return <NotFoundPage heading="Build Not Found" />
-  }
-  const { status, label } = getBuildStatus(build)
-  const convertFilesToTreeData = (
-    files: Array<{ path: string; content: string }>,
-  ): TreeDataItem[] => {
-    const tree: TreeDataItem[] = []
-    const pathMap = new Map<string, TreeDataItem>()
-
-    files.forEach((file) => {
-      const parts = file.path.split("/")
-      let currentPath = ""
-
-      parts.forEach((part, index) => {
-        const isLast = index === parts.length - 1
-        currentPath = currentPath ? `${currentPath}/${part}` : part
-
-        if (!pathMap.has(currentPath)) {
-          const item: TreeDataItem = {
-            id: currentPath,
-            name: part,
-            icon: isLast ? File : Folder,
-            children: isLast ? undefined : [],
-          }
-
-          pathMap.set(currentPath, item)
-
-          if (index === 0) {
-            tree.push(item)
-          } else {
-            const parentPath = parts.slice(0, index).join("/")
-            const parent = pathMap.get(parentPath)
-            if (parent && parent.children) {
-              parent.children.push(item)
-            }
-          }
-        }
-      })
-    })
-
-    return tree
-  }
-
-  const treeData = convertFilesToTreeData(buildFiles)
-
-  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-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 border-b border-gray-200">
-                  <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>
-                        <PrefetchPageLink
-                          href={`/build/${build.package_build_id}`}
-                          className="font-mono text-sm text-gray-900 bg-gray-100 px-2 py-1 rounded"
-                        >
-                          {build.package_build_id}
-                        </PrefetchPageLink>
-                      </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">
-                          Commit
-                        </span>
-                        <PrefetchPageLink
-                          href={`https://github.com/${build.commit_author}/tscircuit.com/commit/${build.commit_message}`}
-                          className="font-mono text-xs text-gray-600 bg-gray-50 px-2 text-right py-1 rounded line-clamp-1"
-                        >
-                          {build.commit_message}
-                        </PrefetchPageLink>
-                      </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 rounded-full capitalize ${
-                            status === "success"
-                              ? "bg-emerald-100 text-emerald-800"
-                              : status === "failed"
-                                ? "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>
-
-                <div className="flex-1 overflow-hidden">
-                  <div className="px-4 py-3 border-b border-gray-200">
-                    <h3 className="text-sm font-semibold text-gray-900">
-                      Files
-                    </h3>
-                    <p className="text-xs text-gray-500 mt-1">
-                      {buildFiles.length} file
-                      {buildFiles.length !== 1 ? "s" : ""}
-                    </p>
-                  </div>
-                  <div className="px-2 py-2 overflow-y-auto select-none">
-                    <TreeView
-                      selectedItemId={selectedItemId || ""}
-                      setSelectedItemId={(v) => setSelectedItemId(v || "")}
-                      data={treeData}
-                      className="w-full"
-                      onSelectChange={(item) => {
-                        if (item && !item.children) {
-                          setSelectedFile(item.id)
-                        }
-                      }}
-                    />
-                  </div>
-                </div>
-              </>
-            )}
-          </aside>
-
-          <main className="flex-1 overflow-y-auto">
-            <div className="flex flex-col h-full overflow-h-hidden">
-              {status === "success" ? (
-                <SuspenseRunFrame
-                  fsMap={buildFsMap}
-                  mainComponentPath={selectedFile ?? "index.tsx"}
-                  showRunButton={false}
-                  className="[&>div]:overflow-y-hidden"
-                />
-              ) : (
-                <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 === "failed" ? (
-                    <div className="text-center">
-                      <p className="text-red-600 font-medium mb-2">
-                        Build Failed
-                      </p>
-                    </div>
-                  ) : null}
-                </div>
-              )}
-            </div>
-          </main>
-        </div>
-      </div>
-    </>
-  )
-}