@tscircuit/fake-snippets 0.0.100 → 0.0.102

package/src/components/preview/ConnectedRepoSettings.tsx

@@ -0,0 +1,343 @@
+import { useEffect, useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { Textarea } from "@/components/ui/textarea"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Settings, Github, Shield, Trash2, Save } from "lucide-react"
+
+interface ConnectedRepoSettingsProps {
+  projectName?: string
+  onSave?: (settings: any) => void
+}
+
+export const ConnectedRepoSettings = ({
+  projectName = "tscircuit-project",
+  onSave,
+}: ConnectedRepoSettingsProps) => {
+  // MOCK
+  const initialSettings = {
+    general: {
+      projectName: projectName,
+      description: "A TypeScript circuit design project",
+    },
+    git: {
+      repository: "github.com/user/tscircuit-project",
+      productionBranch: "main",
+      autoBuildEnabled: true,
+      prComment: true,
+      buildPrs: true,
+    },
+    security: {
+      privateBuilds: false,
+      requireApprovalForPrs: true,
+    },
+  }
+
+  const [settings, setSettings] = useState(initialSettings)
+  const [hasChanges, setHasChanges] = useState(false)
+
+  // Track changes
+  useEffect(() => {
+    const isChanged =
+      JSON.stringify(settings) !== JSON.stringify(initialSettings)
+    setHasChanges(isChanged)
+  }, [settings])
+
+  const handleSave = () => {
+    onSave?.(settings)
+    setHasChanges(false)
+  }
+
+  return (
+    <div className="space-y-4 sm:space-y-6 p-4 sm:p-6">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <h2 className="text-xl sm:text-2xl font-bold text-gray-900">
+            Settings
+          </h2>
+          <p className="text-sm sm:text-base text-gray-600">
+            Configure your build settings
+          </p>
+        </div>
+        <div className="flex justify-end">
+          <Button
+            onClick={handleSave}
+            disabled={!hasChanges}
+            className="flex items-center gap-2 w-full sm:w-auto"
+          >
+            <Save className="w-4 h-4" />
+            Save Changes
+          </Button>
+        </div>
+      </div>
+
+      <Tabs defaultValue="general" className="space-y-4 sm:space-y-6">
+        <TabsList className="grid w-full grid-cols-3">
+          <TabsTrigger
+            value="general"
+            className="flex items-center gap-1 sm:gap-2 text-xs sm:text-sm"
+          >
+            <Settings className="w-3 h-3 sm:w-4 sm:h-4" />
+            <span className="hidden sm:inline">General</span>
+            <span className="sm:hidden">Gen</span>
+          </TabsTrigger>
+          <TabsTrigger
+            value="git"
+            className="flex items-center gap-1 sm:gap-2 text-xs sm:text-sm"
+          >
+            <Github className="w-3 h-3 sm:w-4 sm:h-4" />
+            Git
+          </TabsTrigger>
+          <TabsTrigger
+            value="security"
+            className="flex items-center gap-1 sm:gap-2 text-xs sm:text-sm"
+          >
+            <Shield className="w-3 h-3 sm:w-4 sm:h-4" />
+            <span className="hidden sm:inline">Security</span>
+            <span className="sm:hidden">Sec</span>
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="general" className="space-y-4 sm:space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-lg sm:text-xl">
+                General Settings
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4 p-4 sm:p-6">
+              <div className="space-y-2">
+                <Label htmlFor="projectName">Project Name</Label>
+                <Input
+                  id="projectName"
+                  value={settings.general.projectName}
+                  onChange={(e) =>
+                    setSettings((prev) => ({
+                      ...prev,
+                      general: { ...prev.general, projectName: e.target.value },
+                    }))
+                  }
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="description">Description</Label>
+                <Textarea
+                  id="description"
+                  value={settings.general.description}
+                  onChange={(e) =>
+                    setSettings((prev) => ({
+                      ...prev,
+                      general: { ...prev.general, description: e.target.value },
+                    }))
+                  }
+                  rows={3}
+                />
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="git" className="space-y-4 sm:space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-lg sm:text-xl">
+                Git Integration
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4 p-4 sm:p-6">
+              <div className="space-y-2">
+                <Label htmlFor="repository">Repository</Label>
+                <Input
+                  id="repository"
+                  value={settings.git.repository}
+                  onChange={(e) =>
+                    setSettings((prev) => ({
+                      ...prev,
+                      git: { ...prev.git, repository: e.target.value },
+                    }))
+                  }
+                  placeholder="github.com/user/repo"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="productionBranch">Production Branch</Label>
+                <Input
+                  id="productionBranch"
+                  value={settings.git.productionBranch}
+                  onChange={(e) =>
+                    setSettings((prev) => ({
+                      ...prev,
+                      git: { ...prev.git, productionBranch: e.target.value },
+                    }))
+                  }
+                />
+              </div>
+
+              <div className="space-y-3">
+                <div className="flex items-center space-x-2">
+                  <Switch
+                    id="autoBuildEnabled"
+                    checked={settings.git.autoBuildEnabled}
+                    onCheckedChange={(checked) =>
+                      setSettings((prev) => ({
+                        ...prev,
+                        git: { ...prev.git, autoBuildEnabled: checked },
+                      }))
+                    }
+                  />
+                  <Label htmlFor="autoBuildEnabled">
+                    Enable automatic builds
+                  </Label>
+                </div>
+
+                <div className="flex items-center space-x-2">
+                  <Switch
+                    id="prComment"
+                    checked={settings.git.prComment}
+                    onCheckedChange={(checked) =>
+                      setSettings((prev) => ({
+                        ...prev,
+                        git: { ...prev.git, prComment: checked },
+                      }))
+                    }
+                  />
+                  <Label htmlFor="prComment">
+                    Comment on pull requests with build preview
+                  </Label>
+                </div>
+
+                <div className="flex items-center space-x-2">
+                  <Switch
+                    id="buildPrs"
+                    checked={settings.git.buildPrs}
+                    onCheckedChange={(checked) =>
+                      setSettings((prev) => ({
+                        ...prev,
+                        git: { ...prev.git, buildPrs: checked },
+                      }))
+                    }
+                  />
+                  <Label htmlFor="buildPrs">
+                    Build pull requests automatically
+                  </Label>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="security" className="space-y-4 sm:space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-lg sm:text-xl">
+                Security Settings
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4 p-4 sm:p-6">
+              <div className="space-y-3">
+                <div className="flex items-center space-x-2">
+                  <Switch
+                    id="privateBuilds"
+                    checked={settings.security.privateBuilds}
+                    onCheckedChange={(checked) =>
+                      setSettings((prev) => ({
+                        ...prev,
+                        security: {
+                          ...prev.security,
+                          privateBuilds: checked,
+                        },
+                      }))
+                    }
+                  />
+                  <Label htmlFor="privateBuilds">Make builds private</Label>
+                </div>
+
+                <div className="flex items-center space-x-2">
+                  <Switch
+                    id="requireApprovalForPrs"
+                    checked={settings.security.requireApprovalForPrs}
+                    onCheckedChange={(checked) =>
+                      setSettings((prev) => ({
+                        ...prev,
+                        security: {
+                          ...prev.security,
+                          requireApprovalForPrs: checked,
+                        },
+                      }))
+                    }
+                  />
+                  <Label htmlFor="requireApprovalForPrs">
+                    Require approval for PR builds
+                  </Label>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="border-red-200">
+            <CardHeader>
+              <CardTitle className="text-red-600 text-lg sm:text-xl">
+                Danger Zone
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="p-4 sm:p-6">
+              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-4 border border-red-200 rounded-lg">
+                <div>
+                  <h4 className="font-medium text-red-600">Delete Project</h4>
+                  <p className="text-sm text-gray-600">
+                    Permanently delete this project and all its builds
+                  </p>
+                </div>
+                <AlertDialog>
+                  <AlertDialogTrigger asChild>
+                    <Button
+                      variant="destructive"
+                      className="flex items-center gap-2 w-full sm:w-auto"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                      Delete Project
+                    </Button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>
+                        Are you absolutely sure?
+                      </AlertDialogTitle>
+                      <AlertDialogDescription>
+                        This action cannot be undone. This will permanently
+                        delete the project and remove all build data from our
+                        servers.
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>Cancel</AlertDialogCancel>
+                      <AlertDialogAction className="bg-red-600 hover:bg-red-700">
+                        Delete Project
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}

package/src/components/preview/ConnectedReposCards.tsx

@@ -0,0 +1,191 @@
+import React, { 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, MOCK_DEPLOYMENTS, PackageBuild, StatusIcon } from "."
+
+interface ConnectedRepoCardProps {
+  ConnectedRepo: PackageBuild
+  className?: string
+}
+
+export const ConnectedRepoCard = ({
+  ConnectedRepo,
+  className,
+}: ConnectedRepoCardProps) => {
+  const { status, label } = getBuildStatus(ConnectedRepo)
+
+  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/${ConnectedRepo.commit_author}/tsc-deploy`}
+          className="text-sm font-medium text-gray-700 hover:text-blue-600 transition-colors"
+        >
+          {ConnectedRepo.commit_author}/tsc-deploy
+        </a>
+      </div>
+
+      {ConnectedRepo.commit_message && (
+        <div className="mb-6 flex-1">
+          <h4
+            title={ConnectedRepo.commit_message}
+            className="text-sm font-medium truncate text-gray-900 mb-2"
+          >
+            {ConnectedRepo.commit_message}
+          </h4>
+          <div className="flex items-center gap-2 text-xs text-gray-500">
+            <span>{formatTimeAgo(ConnectedRepo.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">
+                {ConnectedRepo.branch_name || "main"}
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="flex gap-2 w-full mt-auto">
+        <PrefetchPageLink
+          className="w-full"
+          href={`/build/${ConnectedRepo.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>
+        {ConnectedRepo.preview_url && status === "success" && (
+          <PrefetchPageLink
+            className="w-full"
+            href={`/build/${ConnectedRepo.package_build_id}/preview`}
+          >
+            <Button size="sm" variant="outline" className="px-4 py-2 w-full">
+              Preview
+            </Button>
+          </PrefetchPageLink>
+        )}
+      </div>
+    </Card>
+  )
+}
+
+export const ConnectedRepoCardSkeleton: React.FC = () => {
+  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 ConnectedReposCards = ({ user }: { user: string }) => {
+  const [isLoading, setIsLoading] = useState(false)
+  const [ConnectedRepos, setConnectedRepos] = useState(MOCK_DEPLOYMENTS)
+
+  if (isLoading) {
+    return (
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+        {[...Array(6)].map((_, i) => (
+          <ConnectedRepoCardSkeleton key={i} />
+        ))}
+      </div>
+    )
+  }
+
+  if (ConnectedRepos.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">
+        {ConnectedRepos.map((repo) => (
+          <ConnectedRepoCard key={repo.package_build_id} ConnectedRepo={repo} />
+        ))}
+      </div>
+    </div>
+  )
+}