@tscircuit/fake-snippets 0.0.101 → 0.0.103

package/src/components/preview/ConnectedPackagesList.tsx

@@ -0,0 +1,187 @@
+import { useState } from "react"
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { GitBranch, Rocket, Github } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { PrefetchPageLink } from "../PrefetchPageLink"
+import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
+import {
+  getBuildStatus,
+  getLatestBuildForPackage,
+  MOCK_DEPLOYMENTS,
+  PackageBuild,
+  StatusIcon,
+} from "."
+import { Package } from "fake-snippets-api/lib/db/schema"
+
+export const ConnectedPackageCardSkeleton = () => {
+  return (
+    <Card className="animate-pulse">
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center gap-2 flex-1">
+            <div className="w-4 h-4 bg-gray-200 rounded" />
+            <div className="space-y-2 flex-1">
+              <div className="flex items-center gap-2">
+                <div className="w-12 h-4 bg-gray-200 rounded" />
+                <div className="w-16 h-3 bg-gray-200 rounded" />
+              </div>
+              <div className="w-20 h-3 bg-gray-200 rounded" />
+            </div>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="pt-0 space-y-3">
+        <div className="w-full h-4 bg-gray-200 rounded" />
+        <div className="flex gap-2">
+          <div className="w-16 h-3 bg-gray-200 rounded" />
+          <div className="w-20 h-3 bg-gray-200 rounded" />
+        </div>
+        <div className="flex gap-2 pt-2">
+          <div className="flex-1 h-8 bg-gray-200 rounded" />
+          <div className="flex-1 h-8 bg-gray-200 rounded" />
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export const ConnectedPackageCard = ({
+  pkg,
+  className,
+}: {
+  pkg: Package
+  className?: string
+}) => {
+  const latestBuildInfo: PackageBuild = getLatestBuildForPackage(pkg)
+  const { status, label } = getBuildStatus(latestBuildInfo)
+  return (
+    <Card
+      className={cn(
+        "group relative overflow-hidden",
+        "border border-gray-200",
+        "hover:border-gray-300",
+        "bg-white",
+        "p-6",
+        "flex flex-col",
+        "min-h-[200px]",
+        className,
+      )}
+    >
+      <div className="flex items-start justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <a
+            href="#"
+            className="text-lg font-semibold text-gray-900 hover:text-blue-600 transition-colors"
+          >
+            tsc-deploy
+          </a>
+        </div>
+
+        <div className="flex items-center justify-center gap-2">
+          <Badge
+            variant={
+              status === "success"
+                ? "default"
+                : status === "error"
+                  ? "destructive"
+                  : "secondary"
+            }
+            className="text-xs flex items-center"
+          >
+            {label}
+          </Badge>
+          <div className="flex items-center justify-center">
+            <StatusIcon status={status} />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2 mb-4">
+        <Github className="w-4 h-4 text-gray-600" />
+        <a
+          href={`https://github.com/${pkg.github_repo_full_name}`}
+          className="text-sm font-medium text-gray-700 hover:text-blue-600 transition-colors"
+        >
+          {pkg.github_repo_full_name}
+        </a>
+      </div>
+
+      {latestBuildInfo.commit_message && (
+        <div className="mb-6 flex-1">
+          <h4
+            title={latestBuildInfo.commit_message}
+            className="text-sm font-medium truncate text-gray-900 mb-2"
+          >
+            {latestBuildInfo.commit_message}
+          </h4>
+          <div className="flex items-center gap-2 text-xs text-gray-500">
+            <span>{formatTimeAgo(latestBuildInfo.created_at)} on</span>
+            <div className="flex items-center gap-1">
+              <GitBranch className="w-3 h-3" />
+              <span className="bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full font-medium">
+                {latestBuildInfo.branch_name || "main"}
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="flex gap-2 w-full mt-auto">
+        <PrefetchPageLink
+          className="w-full"
+          href={`/build/${latestBuildInfo.package_build_id}`}
+        >
+          <Button
+            size="sm"
+            className="bg-blue-600 w-full hover:bg-blue-700 text-white px-4 py-2"
+          >
+            View
+          </Button>
+        </PrefetchPageLink>
+        {latestBuildInfo.preview_url && status === "success" && (
+          <PrefetchPageLink
+            className="w-full"
+            href={`/build/${latestBuildInfo.package_build_id}/preview`}
+          >
+            <Button size="sm" variant="outline" className="px-4 py-2 w-full">
+              Preview
+            </Button>
+          </PrefetchPageLink>
+        )}
+      </div>
+    </Card>
+  )
+}
+
+export const ConnectedPackagesList = ({
+  packages,
+}: { packages: Package[] }) => {
+  const [pkgs, setpkgs] = useState(MOCK_DEPLOYMENTS)
+
+  if (pkgs.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-20 text-black">
+        <Rocket className="w-12 h-12 mb-4 text-black" />
+        <h3 className="text-xl font-semibold mb-3">
+          No Connected Repositories
+        </h3>
+        <p className="text-sm text-center max-w-md text-gray-600">
+          Connect your GitHub repositories to start building and deploying your
+          circuits. Your connected repositories and builds will appear here.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+        {packages.map((pkg) => (
+          <ConnectedPackageCard key={pkg.package_id} pkg={pkg} />
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/preview/ConnectedRepoDashboard.tsx

@@ -0,0 +1,243 @@
+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,
+  Settings,
+  List,
+  Github,
+  MoreHorizontal,
+  Zap,
+  Clock,
+  GitBranch,
+  Hash,
+  User,
+  Eye,
+} from "lucide-react"
+import { useLocation } from "wouter"
+import { ConnectedRepoOverview } from "./ConnectedRepoOverview"
+import { BuildsList } from "./BuildsList"
+import Header from "../Header"
+import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
+import {
+  getBuildStatus,
+  PackageBuild,
+  MOCK_DEPLOYMENTS,
+  getPackageFromBuild,
+} from "."
+import { PrefetchPageLink } from "../PrefetchPageLink"
+
+export const ConnectedRepoDashboard = ({
+  latestBuild,
+}: {
+  latestBuild: PackageBuild
+}) => {
+  const [activeTab, setActiveTab] = useState("overview")
+  const [, setLocation] = useLocation()
+  const pkg = getPackageFromBuild(latestBuild)
+  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">
+        {/* 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">
+            <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
+              <div className="flex flex-col sm:flex-row sm:items-center gap-4">
+                <div className="w-12 hidden md:block h-12 rounded-lg overflow-hidden flex-shrink-0">
+                  <img
+                    src="https://github.com/tscircuit.png"
+                    alt="tscircuit logo"
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="flex flex-col sm:flex-row sm:items-center gap-3">
+                    <PrefetchPageLink
+                      href={"/" + pkg.name}
+                      className="text-2xl font-bold text-gray-900 truncate"
+                    >
+                      {pkg.unscoped_name}
+                    </PrefetchPageLink>
+                    <Badge
+                      variant={
+                        status === "success"
+                          ? "default"
+                          : status === "error"
+                            ? "destructive"
+                            : "secondary"
+                      }
+                      className="flex items-center gap-1 w-fit"
+                    >
+                      <div
+                        className={`w-2 h-2 rounded-full ${
+                          status === "success"
+                            ? "bg-green-500"
+                            : status === "error"
+                              ? "bg-red-500"
+                              : status === "building"
+                                ? "bg-blue-500 animate-pulse"
+                                : "bg-gray-500"
+                        }`}
+                      />
+                      {label}
+                    </Badge>
+                  </div>
+                  <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 mt-2 text-sm text-gray-600">
+                    <div
+                      className="flex cursor-pointer items-center gap-1"
+                      onClick={() =>
+                        window?.open(
+                          `https://github.com/${pkg.github_repo_full_name}/tree/${latestBuild.branch_name || "main"}`,
+                          "_blank",
+                        )
+                      }
+                    >
+                      <GitBranch className="w-4 h-4 flex-shrink-0" />
+                      <span className="truncate">
+                        {latestBuild.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 deployed {formatTimeAgo(latestBuild.created_at)}
+                        </time>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="flex items-center gap-2 justify-center min-w-[120px] h-9"
+                  onClick={() =>
+                    window.open(
+                      `https://github.com/${pkg.github_repo_full_name}`,
+                      "_blank",
+                    )
+                  }
+                >
+                  <Github className="w-4 h-4" />
+                  <span className="hidden sm:inline">Repository</span>
+                  <span className="sm:hidden">Repository</span>
+                </Button>
+                {latestBuild.preview_url && (
+                  <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`,
+                        "_blank",
+                      )
+                    }
+                  >
+                    <Eye className="w-4 h-4" />
+                    <span className="hidden sm:inline">Preview</span>
+                    <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">Redeploy</span>
+                  <span className="sm:hidden">Redeploy</span>
+                </Button>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="w-full h-9 sm:w-9 p-0"
+                    >
+                      <MoreHorizontal className="w-4 h-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem asChild>
+                      <a
+                        href={`https://github.com/${pkg.github_repo_full_name}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        View Source
+                      </a>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem asChild>
+                      <a href="#" download>
+                        Download Build
+                      </a>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => {
+                        if (navigator.share) {
+                          navigator.share({
+                            title: pkg.unscoped_name,
+                            url: window.location.href,
+                          })
+                        } else {
+                          navigator.clipboard.writeText(window.location.href)
+                        }
+                      }}
+                    >
+                      Share Project
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 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} />}
+            </TabsContent>
+
+            <TabsContent value="builds" className="space-y-6">
+              <BuildsList pkg={pkg} onSelectBuild={handleSelectBuild} />
+            </TabsContent>
+          </Tabs>
+        </div>
+      </div>
+    </>
+  )
+}