@tscircuit/fake-snippets 0.0.106 → 0.0.108

package/src/components/preview/{ConnectedRepoDashboard.tsx → PackageReleasesDashboard.tsx}

@@ -1,57 +1,50 @@
-import { useState } from "react"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import {
-  Activity,
-  List,
-  Github,
-  MoreHorizontal,
-  Zap,
-  Clock,
-  GitBranch,
-  Eye,
-} from "lucide-react"
+import { MoreHorizontal, Clock, GitBranch, Eye } from "lucide-react"
+import { GitHubLogoIcon } from "@radix-ui/react-icons"
 import { useLocation } from "wouter"
-import { ConnectedRepoOverview } from "./ConnectedRepoOverview"
 import { BuildsList } from "./BuildsList"
 import Header from "../Header"
 import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
 import { getBuildStatus } from "."
 import { PrefetchPageLink } from "../PrefetchPageLink"
+import { PackageBreadcrumb } from "../PackageBreadcrumb"
 import {
   Package,
   PackageBuild,
   PackageRelease,
 } from "fake-snippets-api/lib/db/schema"
 
-export const ConnectedRepoDashboard = ({
+export const PackageReleasesDashboard = ({
+  latestRelease,
   latestBuild,
   pkg,
-  packageRelease,
 }: {
-  latestBuild: PackageBuild
+  latestRelease: PackageRelease
+  latestBuild: PackageBuild | null
   pkg: Package
-  packageRelease: PackageRelease
 }) => {
-  const [activeTab, setActiveTab] = useState("overview")
   const [, setLocation] = useLocation()
-  const handleSelectBuild = (build: PackageBuild) => {
-    setLocation(`/build/${build.package_build_id}`)
-    setActiveTab("overview")
-  }
   const { status, label } = getBuildStatus(latestBuild)
 
   return (
     <>
       <Header />
       <div className="min-h-screen bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-4">
+          <PackageBreadcrumb
+            author={pkg.name.split("/")[0]}
+            packageName={pkg.name}
+            unscopedName={pkg.unscoped_name}
+            currentPage="releases"
+          />
+        </div>
         {/* Project Header */}
         <div className="bg-gray-50 border-b md:py-10">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
@@ -70,7 +63,7 @@ export const ConnectedRepoDashboard = ({
                       href={"/" + pkg.name}
                       className="text-2xl font-bold text-gray-900 truncate"
                     >
-                      {pkg.unscoped_name}
+                      {pkg.name}
                     </PrefetchPageLink>
                     <Badge
                       variant={
@@ -101,22 +94,26 @@ export const ConnectedRepoDashboard = ({
                       className="flex cursor-pointer items-center gap-1"
                       onClick={() =>
                         window?.open(
-                          `https://github.com/${pkg.github_repo_full_name}/tree/${latestBuild.branch_name || "main"}`,
+                          `https://github.com/${pkg.github_repo_full_name}/tree/${latestRelease?.branch_name || "main"}`,
                           "_blank",
                         )
                       }
                     >
                       <GitBranch className="w-4 h-4 flex-shrink-0" />
                       <span className="truncate">
-                        {latestBuild.branch_name || "main"}
+                        {latestRelease?.branch_name || "main"}
                       </span>
                     </div>
                     <div className="flex items-center gap-1">
                       <Clock className="w-4 h-4 flex-shrink-0" />
                       <span>
-                        <time dateTime={latestBuild.created_at}>
-                          Last built {formatTimeAgo(latestBuild.created_at)}
-                        </time>
+                        {latestBuild?.created_at ? (
+                          <time dateTime={latestBuild.created_at}>
+                            Last built {formatTimeAgo(latestBuild.created_at)}
+                          </time>
+                        ) : (
+                          "No builds yet"
+                        )}
                       </span>
                     </div>
                   </div>
@@ -135,18 +132,18 @@ export const ConnectedRepoDashboard = ({
                     )
                   }
                 >
-                  <Github className="w-4 h-4" />
+                  <GitHubLogoIcon className="w-4 h-4" />
                   <span className="hidden sm:inline">Repository</span>
                   <span className="sm:hidden">Repository</span>
                 </Button>
-                {latestBuild.preview_url && (
+                {latestBuild && (
                   <Button
                     variant="outline"
                     size="sm"
                     className="flex items-center gap-2 justify-center min-w-[120px] h-9"
                     onClick={() =>
                       window.open(
-                        `/build/${latestBuild.package_build_id}/preview`,
+                        `/${pkg.name}/releases/${latestBuild?.package_release_id}/preview`,
                         "_blank",
                       )
                     }
@@ -156,14 +153,6 @@ export const ConnectedRepoDashboard = ({
                     <span className="sm:hidden">Preview</span>
                   </Button>
                 )}
-                <Button
-                  size="sm"
-                  className="flex items-center gap-2 justify-center min-w-[120px] h-9 bg-black text-white"
-                >
-                  <Zap className="w-4 h-4" />
-                  <span className="hidden sm:inline">Rebuild</span>
-                  <span className="sm:hidden">Rebuild</span>
-                </Button>
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button
@@ -212,36 +201,9 @@ export const ConnectedRepoDashboard = ({
 
         {/* Main Content */}
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-          <Tabs
-            value={activeTab}
-            onValueChange={setActiveTab}
-            className="space-y-6"
-          >
-            <TabsList className="grid w-full grid-cols-2 lg:w-auto lg:grid-cols-2">
-              <TabsTrigger value="overview" className="flex items-center gap-2">
-                <Activity className="w-4 h-4" />
-                Overview
-              </TabsTrigger>
-              <TabsTrigger value="builds" className="flex items-center gap-2">
-                <List className="w-4 h-4" />
-                Builds
-              </TabsTrigger>
-            </TabsList>
-
-            <TabsContent value="overview" className="space-y-6">
-              {latestBuild && (
-                <ConnectedRepoOverview
-                  build={latestBuild}
-                  pkg={pkg}
-                  packageRelease={packageRelease}
-                />
-              )}
-            </TabsContent>
-
-            <TabsContent value="builds" className="space-y-6">
-              <BuildsList pkg={pkg} onSelectBuild={handleSelectBuild} />
-            </TabsContent>
-          </Tabs>
+          <div className="space-y-6">
+            <BuildsList pkg={pkg} />
+          </div>
         </div>
       </div>
     </>

package/src/components/preview/index.tsx

@@ -1,13 +1,17 @@
 export { ConnectedRepoOverview } from "./ConnectedRepoOverview"
 export { BuildsList } from "./BuildsList"
-export { ConnectedRepoDashboard } from "./ConnectedRepoDashboard"
-import {
-  Package,
-  PackageBuild,
-  PackageRelease,
-} from "fake-snippets-api/lib/db/schema"
+export { PackageReleasesDashboard } from "./PackageReleasesDashboard"
+import { PackageBuild } from "fake-snippets-api/lib/db/schema"
 import { Clock, CheckCircle, AlertCircle, Loader2 } from "lucide-react"
-export const getBuildStatus = (build: PackageBuild) => {
+export const getBuildStatus = (
+  build?: PackageBuild | null,
+): {
+  status: "pending" | "building" | "success" | "error" | "queued"
+  label: string
+} => {
+  if (!build) {
+    return { status: "pending", label: "No builds" }
+  }
   if (
     build?.build_error ||
     build?.transpilation_error ||
@@ -22,154 +26,20 @@ export const getBuildStatus = (build: PackageBuild) => {
   ) {
     return { status: "building", label: "Building" }
   }
-  if (build?.build_completed_at && build?.transpilation_completed_at) {
+  if (
+    !build?.build_error &&
+    !build?.transpilation_error &&
+    !build?.circuit_json_build_error &&
+    !build?.build_in_progress &&
+    !build?.transpilation_in_progress &&
+    !build?.circuit_json_build_in_progress &&
+    build?.transpilation_completed_at
+  ) {
     return { status: "success", label: "Ready" }
   }
   return { status: "queued", label: "Queued" }
 }
 
-export const MOCK_DEPLOYMENTS: PackageBuild[] = [
-  {
-    package_build_id: "pb_1a2b3c4d",
-    package_release_id: "pr_5e6f7g8h",
-    created_at: new Date(Date.now() - 1000 * 60 * 30).toISOString(),
-    transpilation_in_progress: false,
-    transpilation_started_at: new Date(
-      Date.now() - 1000 * 60 * 35,
-    ).toISOString(),
-    transpilation_completed_at: new Date(
-      Date.now() - 1000 * 60 * 32,
-    ).toISOString(),
-    transpilation_logs: [],
-    transpilation_error: null,
-    circuit_json_build_in_progress: false,
-    circuit_json_build_started_at: new Date(
-      Date.now() - 1000 * 60 * 32,
-    ).toISOString(),
-    circuit_json_build_completed_at: new Date(
-      Date.now() - 1000 * 60 * 30,
-    ).toISOString(),
-    circuit_json_build_logs: [],
-    circuit_json_build_error: null,
-    build_in_progress: false,
-    build_started_at: new Date(Date.now() - 1000 * 60 * 30).toISOString(),
-    build_completed_at: new Date(Date.now() - 1000 * 60 * 25).toISOString(),
-    build_error: null,
-    build_error_last_updated_at: new Date(
-      Date.now() - 1000 * 60 * 25,
-    ).toISOString(),
-    build_logs: null,
-    preview_url: "https://preview.tscircuit.com/pb_1a2b3c4d",
-    branch_name: "main",
-    commit_message: "Add new LED component with improved brightness control",
-    commit_author: "john.doe",
-  },
-  {
-    package_build_id: "pb_9i8j7k6l",
-    package_release_id: "pr_5m4n3o2p",
-    created_at: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString(),
-    transpilation_in_progress: false,
-    transpilation_started_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 2,
-    ).toISOString(),
-    transpilation_completed_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 2 + 1000 * 60 * 3,
-    ).toISOString(),
-    transpilation_logs: [],
-    transpilation_error: null,
-    circuit_json_build_in_progress: true,
-    circuit_json_build_started_at: new Date(
-      Date.now() - 1000 * 60 * 5,
-    ).toISOString(),
-    circuit_json_build_completed_at: null,
-    circuit_json_build_logs: [],
-    circuit_json_build_error: null,
-    build_in_progress: false,
-    build_started_at: null,
-    build_completed_at: null,
-    build_error: null,
-    build_error_last_updated_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 2,
-    ).toISOString(),
-    build_logs: null,
-    preview_url: null,
-    branch_name: "feature/resistor-update",
-    commit_message: "Update resistor component with new tolerance values",
-    commit_author: "jane.smith",
-  },
-  {
-    package_build_id: "pb_1q2w3e4r",
-    package_release_id: "pr_5t6y7u8i",
-    created_at: new Date(Date.now() - 1000 * 60 * 60 * 6).toISOString(),
-    transpilation_in_progress: false,
-    transpilation_started_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 6,
-    ).toISOString(),
-    transpilation_completed_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 6 + 1000 * 60 * 2,
-    ).toISOString(),
-    transpilation_logs: [],
-    transpilation_error:
-      "TypeScript compilation failed: Cannot find module 'missing-dependency'",
-    circuit_json_build_in_progress: false,
-    circuit_json_build_started_at: null,
-    circuit_json_build_completed_at: null,
-    circuit_json_build_logs: [],
-    circuit_json_build_error: null,
-    build_in_progress: false,
-    build_started_at: null,
-    build_completed_at: null,
-    build_error: null,
-    build_error_last_updated_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 6,
-    ).toISOString(),
-    build_logs: null,
-    preview_url: null,
-    branch_name: "hotfix/critical-bug",
-    commit_message: "Fix critical issue with capacitor placement",
-    commit_author: "alex.wilson",
-  },
-  {
-    package_build_id: "pb_9o8i7u6y",
-    package_release_id: "pr_5t4r3e2w",
-    created_at: new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString(),
-    transpilation_in_progress: false,
-    transpilation_started_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 24,
-    ).toISOString(),
-    transpilation_completed_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 24 + 1000 * 60 * 4,
-    ).toISOString(),
-    transpilation_logs: [],
-    transpilation_error: null,
-    circuit_json_build_in_progress: false,
-    circuit_json_build_started_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 24 + 1000 * 60 * 4,
-    ).toISOString(),
-    circuit_json_build_completed_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 24 + 1000 * 60 * 8,
-    ).toISOString(),
-    circuit_json_build_logs: [],
-    circuit_json_build_error: null,
-    build_in_progress: false,
-    build_started_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 24 + 1000 * 60 * 8,
-    ).toISOString(),
-    build_completed_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 24 + 1000 * 60 * 12,
-    ).toISOString(),
-    build_error: null,
-    build_error_last_updated_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 24 + 1000 * 60 * 12,
-    ).toISOString(),
-    build_logs: null,
-    preview_url: "https://preview.tscircuit.com/pb_9o8i7u6y",
-    branch_name: "main",
-    commit_message: "Initial project setup with basic components",
-    commit_author: "sarah.johnson",
-  },
-]
-
 export const StatusIcon = ({ status }: { status: string }) => {
   switch (status) {
     case "success":
@@ -182,7 +52,3 @@ export const StatusIcon = ({ status }: { status: string }) => {
       return <Clock className="w-4 h-4 text-gray-500" />
   }
 }
-
-export const getLatestBuildForPackage = (pkg: Package): PackageBuild => {
-  return MOCK_DEPLOYMENTS[0]
-}

package/src/hooks/use-package-builds.ts

@@ -85,51 +85,3 @@ export const usePackageBuild = (packageBuildId: string | null) => {
     },
   )
 }
-
-export const useLatestPackageBuild = (
-  params: { package_id?: string; package_release_id?: string } | null,
-) => {
-  const axios = useAxios()
-
-  return useQuery<PackageBuild | null, Error & { status: number }>(
-    ["latestPackageBuild", params],
-    async () => {
-      if (!params || (!params.package_id && !params.package_release_id)) {
-        throw new Error(
-          "Either package_id or package_release_id must be provided",
-        )
-      }
-
-      const { data } = await axios.get<{ package_build: PackageBuild }>(
-        "/package_builds/latest",
-        {
-          params: {
-            ...(params.package_id ? { package_id: params.package_id } : {}),
-            ...(params.package_release_id
-              ? { package_release_id: params.package_release_id }
-              : {}),
-          },
-        },
-      )
-
-      return data.package_build
-    },
-    {
-      enabled: Boolean(
-        params && (params.package_id || params.package_release_id),
-      ),
-      retry: false,
-      refetchOnWindowFocus: false,
-    },
-  )
-}
-
-export const useLatestPackageBuildByPackageId = (packageId: string | null) => {
-  return useLatestPackageBuild(packageId ? { package_id: packageId } : null)
-}
-
-export const useLatestPackageBuildByReleaseId = (releaseId?: string | null) => {
-  return useLatestPackageBuild(
-    releaseId ? { package_release_id: releaseId } : null,
-  )
-}

package/src/hooks/use-package-release-by-id-or-version.ts

@@ -0,0 +1,36 @@
+import {
+  usePackageReleaseById,
+  usePackageReleaseByNameAndVersion,
+} from "./use-package-release"
+import { isUuid } from "@/lib/utils/isUuid"
+
+export const usePackageReleaseByIdOrVersion = (
+  releaseIdOrVersion: string | null,
+  packageName?: string | null,
+) => {
+  const isReleaseIdUuid = releaseIdOrVersion
+    ? isUuid(releaseIdOrVersion)
+    : false
+
+  // If it's a UUID, use the ID-based hook
+  const releaseByIdQuery = usePackageReleaseById(
+    isReleaseIdUuid ? releaseIdOrVersion : null,
+  )
+
+  // If it's not a UUID and we have a package name, construct the version-based query
+  const packageNameWithVersion =
+    !isReleaseIdUuid && packageName && releaseIdOrVersion
+      ? `${packageName}@${releaseIdOrVersion}`
+      : null
+
+  const releaseByVersionQuery = usePackageReleaseByNameAndVersion(
+    packageNameWithVersion,
+  )
+
+  // Return the appropriate query result
+  if (isReleaseIdUuid) {
+    return releaseByIdQuery
+  } else {
+    return releaseByVersionQuery
+  }
+}

package/src/hooks/use-package-release.ts

@@ -90,3 +90,35 @@ export const useLatestPackageRelease = (
 
   return usePackageRelease(query)
 }
+
+export const usePackageReleasesByPackageId = (packageId: string | null) => {
+  const axios = useAxios()
+
+  return useQuery<PackageRelease[], Error & { status: number }>(
+    ["packageReleases", packageId],
+    async () => {
+      if (!packageId) {
+        throw new Error("package_id is required")
+      }
+
+      const { data } = await axios.post<{ package_releases: PackageRelease[] }>(
+        "/package_releases/list",
+        {
+          package_id: packageId,
+        },
+      )
+
+      if (!data.package_releases) {
+        return []
+      }
+
+      return data.package_releases
+    },
+    {
+      enabled: Boolean(packageId),
+      retry: false,
+      refetchOnWindowFocus: false,
+      staleTime: 0,
+    },
+  )
+}

package/src/index.css

@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 @layer base {
   :root {
     --radius: 0.5rem;
@@ -18,6 +19,10 @@
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
   }
+
+  .shiki {
+    @apply no-scrollbar;
+  }
 }
 
 .shiki {
@@ -82,3 +87,22 @@
 body {
   overflow-x: hidden;
 }
+
+/* Subtle scrollbar styling for html and body */
+html::-webkit-scrollbar,
+body::-webkit-scrollbar {
+  width: 6px;
+  background-color: transparent;
+}
+
+html::-webkit-scrollbar-thumb,
+body::-webkit-scrollbar-thumb {
+  background-color: rgba(215, 215, 215, 0.564);
+  border-radius: 8px;
+  transition: background-color 0.2s;
+}
+
+html::-webkit-scrollbar-thumb:hover,
+body::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(193, 193, 193, 0.455);
+}

package/src/lib/utils/isUuid.ts

@@ -0,0 +1,5 @@
+export function isUuid(value: string): boolean {
+  const uuidRegex =
+    /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i
+  return uuidRegex.test(value) || value.startsWith("package_release_")
+}