@tscircuit/fake-snippets 0.0.100 → 0.0.102

package/src/pages/landing.tsx

@@ -73,7 +73,7 @@ export function LandingPage() {
                       </Button>
                     </a>
                     <PrefetchPageLink
-                      href="/seveibar/usb-c-flashlight#3d"
+                      href="/seveibar/led-water-accelerometer#3d"
                       className="w-[70vw] min-[500px]:w-auto"
                     >
                       <Button

package/src/pages/latest.tsx

@@ -6,7 +6,7 @@ import Header from "@/components/Header"
 import Footer from "@/components/Footer"
 import { Search, Keyboard, Cpu, Layers, LucideBellElectric } from "lucide-react"
 import { Input } from "@/components/ui/input"
-import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
+import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 import {
   Select,
   SelectContent,
@@ -18,7 +18,7 @@ import PackageSearchResults from "@/components/PackageSearchResults"
 
 const LatestPage: React.FC = () => {
   const axios = useAxios()
-  const apiBaseUrl = usePackagesBaseApiUrl()
+  const apiBaseUrl = useApiBaseUrl()
   const [searchQuery, setSearchQuery] = useState("")
   const [category, setCategory] = useState("all")
 

package/src/pages/preview-build.tsx

@@ -0,0 +1,380 @@
+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>
+    </>
+  )
+}

package/src/pages/search.tsx

@@ -7,7 +7,7 @@ import Footer from "@/components/Footer"
 import { Input } from "@/components/ui/input"
 import { Search } from "lucide-react"
 import PackageSearchResults from "@/components/PackageSearchResults"
-import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
+import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 import {
   Select,
   SelectContent,
@@ -19,7 +19,7 @@ import { Package } from "fake-snippets-api/lib/db/schema"
 
 export const SearchPage = () => {
   const axios = useAxios()
-  const apiBaseUrl = usePackagesBaseApiUrl()
+  const apiBaseUrl = useApiBaseUrl()
   const [searchParams, setSearchParams] = useSearchParams()
 
   const [searchQuery, setSearchQuery] = useState(searchParams.get("q") || "")

package/src/pages/trending.tsx

@@ -4,7 +4,7 @@ import { useAxios } from "@/hooks/use-axios"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
 import { useSearchParams } from "wouter"
-import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
+import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 import { Search, Keyboard, Cpu, Layers, LucideBellElectric } from "lucide-react"
 import { Input } from "@/components/ui/input"
 import {
@@ -19,7 +19,7 @@ import PackageSearchResults from "@/components/PackageSearchResults"
 
 const TrendingPage: React.FC = () => {
   const axios = useAxios()
-  const apiBaseUrl = usePackagesBaseApiUrl()
+  const apiBaseUrl = useApiBaseUrl()
   const [searchParams, setSearchParams] = useSearchParams()
 
   const [searchQuery, setSearchQuery] = useState(searchParams.get("q") || "")

package/src/pages/user-profile.tsx

@@ -8,7 +8,7 @@ import { Input } from "@/components/ui/input"
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { useAxios } from "@/hooks/use-axios"
 import { useGlobalStore } from "@/hooks/use-global-store"
-import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
+import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 import { GitHubLogoIcon } from "@radix-ui/react-icons"
 import type { Package } from "fake-snippets-api/lib/db/schema"
 import type React from "react"
@@ -25,6 +25,7 @@ import {
 } from "@/components/ui/select"
 import { Box, Star } from "lucide-react"
 import { PackageCardSkeleton } from "@/components/PackageCardSkeleton"
+import { ConnectedReposCards } from "@/components/preview/ConnectedReposCards"
 
 export const UserProfilePage = () => {
   const { username } = useParams()
@@ -95,7 +96,7 @@ export const UserProfilePage = () => {
       },
     )
 
-  const baseUrl = usePackagesBaseApiUrl()
+  const baseUrl = useApiBaseUrl()
 
   if (accountError) {
     return <NotFoundPage heading="User Not Found" />
@@ -178,30 +179,37 @@ export const UserProfilePage = () => {
           <TabsList>
             <TabsTrigger value="all">Packages</TabsTrigger>
             <TabsTrigger value="starred">Starred Packages</TabsTrigger>
+            {isCurrentUserProfile && (
+              <TabsTrigger value="repos">Connected Repositories</TabsTrigger>
+            )}
           </TabsList>
         </Tabs>
-        <div className="flex gap-4 mb-4">
-          <Input
-            type="text"
-            placeholder="Searching User Packages..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="mb-4"
-          />
-          <Select value={filter} onValueChange={setFilter}>
-            <SelectTrigger className="w-[180px]">
-              <SelectValue placeholder="Sort by" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="most-recent">Most Recent</SelectItem>
-              <SelectItem value="least-recent">Least Recent</SelectItem>
-              <SelectItem value="most-starred">Most Starred</SelectItem>
-              <SelectItem value="a-z">A-Z</SelectItem>
-              <SelectItem value="z-a">Z-A</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-        {isLoading ? (
+        {activeTab !== "repos" && (
+          <div className="flex gap-4 mb-4">
+            <Input
+              type="text"
+              placeholder="Searching User Packages..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="mb-4"
+            />
+            <Select value={filter} onValueChange={setFilter}>
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="Sort by" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="most-recent">Most Recent</SelectItem>
+                <SelectItem value="least-recent">Least Recent</SelectItem>
+                <SelectItem value="most-starred">Most Starred</SelectItem>
+                <SelectItem value="a-z">A-Z</SelectItem>
+                <SelectItem value="z-a">Z-A</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+        {activeTab === "repos" ? (
+          <ConnectedReposCards user={String(githubUsername)} />
+        ) : isLoading ? (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
             {[...Array(6)].map((_, i) => (
               <PackageCardSkeleton key={i} />

package/src/pages/view-connected-repo.tsx

@@ -0,0 +1,24 @@
+import { useParams } from "wouter"
+import NotFoundPage from "./404"
+import { ConnectedRepoDashboard, MOCK_DEPLOYMENTS } from "@/components/preview"
+
+export default function ViewConnectedRepoOverview() {
+  const params = useParams<{ buildId: string }>()
+  const buildId = params?.buildId || null
+
+  const selectedBuild = buildId
+    ? MOCK_DEPLOYMENTS.find((d) => d.package_build_id === buildId)
+    : MOCK_DEPLOYMENTS[0]
+
+  if (!selectedBuild) {
+    return <NotFoundPage heading="Build Not Found" />
+  }
+
+  return (
+    <ConnectedRepoDashboard
+      projectName="tscircuit-project"
+      builds={MOCK_DEPLOYMENTS}
+      selectedBuild={selectedBuild}
+    />
+  )
+}