@tscircuit/fake-snippets 0.0.100 → 0.0.102

package/src/components/package-port/CodeEditorHeader.tsx

@@ -27,7 +27,7 @@ import {
 } from "@/components/ui/tooltip"
 import { convertRawEasyToTsx, fetchEasyEDAComponent } from "easyeda/browser"
 import { ComponentSearchResult } from "@tscircuit/runframe/runner"
-import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
+import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 import { ICreateFileProps, ICreateFileResult } from "@/hooks/useFileManagement"
 import { useGlobalStore } from "@/hooks/use-global-store"
 
@@ -60,7 +60,7 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
     useImportComponentDialog()
   const { toast, toastLibrary } = useToast()
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
-  const API_BASE = usePackagesBaseApiUrl()
+  const API_BASE = useApiBaseUrl()
   const [aiAutocompleteEnabled, setAiAutocompleteEnabled] = aiAutocompleteState
   const session = useGlobalStore((s) => s.session)
 
@@ -162,29 +162,35 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
       if (!session?.token) {
         throw new Error("You need to be logged in to import jlcpcb component")
       }
-      const jlcpcbComponent = await fetchEasyEDAComponent("C1", {
-        fetch: ((url, options: any) => {
-          return fetch(`${API_BASE}/proxy`, {
-            body: options.body,
-            method: options.method,
-            headers: {
-              authority: options.headers.authority,
-              Authorization: `Bearer ${session?.token}`,
-              "X-Target-Url": url.toString(),
-              "X-Sender-Host": options.headers.origin,
-              "X-Sender-Origin": options.headers.origin,
-              "content-type": options.headers["content-type"],
-            },
-          })
-        }) as typeof fetch,
-      })
+
+      const jlcpcbComponent = await fetchEasyEDAComponent(
+        component.partNumber ?? component.name,
+        {
+          fetch: ((url, options: any) => {
+            return fetch(`${API_BASE}/proxy`, {
+              body: options.body,
+              method: options.method,
+              headers: {
+                authority: options.headers.authority,
+                Authorization: `Bearer ${session?.token}`,
+                "X-Target-Url": url.toString(),
+                "X-Sender-Host": options.headers.origin,
+                "X-Sender-Origin": options.headers.origin,
+                "content-type": options.headers["content-type"],
+              },
+            })
+          }) as typeof fetch,
+        },
+      )
       const tsxComponent = await convertRawEasyToTsx(jlcpcbComponent)
       let componentName = component.name.replace(/ /g, "-")
-      if (files[`${componentName}.tsx`] || files[`./${componentName}.tsx`]) {
+      let componentPath = `imports/${componentName}.tsx`
+      if (files[componentPath] || files[`./${componentPath}`]) {
         componentName = `${componentName}-1`
+        componentPath = `imports/${componentName}.tsx`
       }
       const createFileResult = createFile({
-        newFileName: `${componentName}.tsx`,
+        newFileName: componentPath,
         content: tsxComponent,
         onError: (error) => {
           throw error

package/src/components/package-port/EditorNav.tsx

@@ -45,6 +45,9 @@ import { useForkPackageMutation } from "@/hooks/useForkPackageMutation"
 import tscircuitCorePkg from "@tscircuit/core/package.json"
 import { useRenamePackageDialog } from "../dialogs/rename-package-dialog"
 import { useUpdatePackageDescriptionDialog } from "../dialogs/update-package-description-dialog"
+import { useCreateReleaseDialog } from "@/hooks/use-create-release-dialog"
+import { Tag } from "lucide-react"
+import { CreateReleaseDialog } from "../CreateReleaseDialog"
 
 export default function EditorNav({
   circuitJson,
@@ -58,6 +61,8 @@ export default function EditorNav({
   onDiscard,
   packageType,
   isSaving,
+  files,
+  packageFilesMeta,
 }: {
   pkg?: Package | null
   circuitJson?: AnyCircuitElement[] | null
@@ -70,6 +75,13 @@ export default function EditorNav({
   isSaving: boolean
   onSave: () => void
   onDiscard?: () => void
+  files?: { path: string; content: string }[]
+  packageFilesMeta?: {
+    created_at: string
+    file_path: string
+    package_file_id: string
+    package_release_id: string
+  }[]
 }) {
   const [, navigate] = useLocation()
   const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
@@ -84,6 +96,18 @@ export default function EditorNav({
     useConfirmDeletePackageDialog()
   const { Dialog: ViewTsFilesDialog, openDialog: openViewTsFilesDialog } =
     useViewTsFilesDialog()
+  const createReleaseDialog = useCreateReleaseDialog({
+    packageId: pkg?.package_id ?? "",
+    packageName: pkg?.unscoped_name ?? "",
+    currentVersion: pkg?.latest_version || undefined,
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["packages"] })
+      qc.invalidateQueries({ queryKey: ["packages", pkg?.package_id] })
+    },
+    files: files || [],
+    currentPackage: pkg || undefined,
+    packageFilesMeta: packageFilesMeta || [],
+  })
 
   const [isChangingType, setIsChangingType] = useState(false)
   const [currentType, setCurrentType] = useState(
@@ -229,14 +253,25 @@ export default function EditorNav({
                 </span>
               )}
               {pkg.owner_github_username === session?.github_username && (
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-6 w-6 ml-2"
-                  onClick={() => openRenameDialog()}
-                >
-                  <Pencil className="h-3 w-3 text-gray-700" />
-                </Button>
+                <>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-6 w-6 ml-2"
+                    onClick={() => openRenameDialog()}
+                  >
+                    <Pencil className="h-3 w-3 text-gray-700" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-6 w-6 ml-2"
+                    onClick={() => createReleaseDialog.openDialog()}
+                    disabled={hasUnsavedChanges || isSaving}
+                  >
+                    <Tag className="h-3 w-3 text-gray-700" />
+                  </Button>
+                </>
               )}
               {isPrivate && (
                 <div className="relative group">
@@ -363,22 +398,23 @@ export default function EditorNav({
             <Eye className="mr-1 h-3 w-3" />
             Public
           </Button> */}
-          {pkg && (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon" className="hidden md:flex">
-                  <MoreVertical className="h-3 w-3" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                <DropdownMenuItem
-                  className="text-xs"
-                  onClick={() => openViewTsFilesDialog()}
-                >
-                  <File className="mr-2 h-3 w-3" />
-                  View Files
-                </DropdownMenuItem>
-                {session?.github_username === pkg.owner_github_username && (
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" className="hidden md:flex">
+                <MoreVertical className="h-3 w-3" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem
+                className="text-xs"
+                onClick={() => openViewTsFilesDialog()}
+              >
+                <File className="mr-2 h-3 w-3" />
+                View Files
+              </DropdownMenuItem>
+              {pkg &&
+                session?.github_username === pkg?.owner_github_username && (
                   <>
                     <DropdownMenuItem
                       className="text-xs"
@@ -436,21 +472,21 @@ export default function EditorNav({
                         </DropdownMenuItem>
                       </DropdownMenuSubContent>
                     </DropdownMenuSub>
+                    <DropdownMenuItem
+                      className="text-xs text-red-600"
+                      onClick={() => openDeleteDialog()}
+                    >
+                      <Trash2 className="mr-2 h-3 w-3" />
+                      Delete Package
+                    </DropdownMenuItem>
                   </>
                 )}
-                <DropdownMenuItem
-                  className="text-xs text-red-600"
-                  onClick={() => openDeleteDialog()}
-                >
-                  <Trash2 className="mr-2 h-3 w-3" />
-                  Delete Package
-                </DropdownMenuItem>
-                <DropdownMenuItem className="text-xs text-gray-500" disabled>
-                  @tscircuit/core@{tscircuitCorePkg.version}
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          )}
+              <DropdownMenuItem className="text-xs text-gray-500" disabled>
+                @tscircuit/core@{tscircuitCorePkg.version}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
           <Button
             variant="ghost"
             size="icon"
@@ -488,6 +524,17 @@ export default function EditorNav({
                   Discard Changes
                 </DropdownMenuItem>
               )}
+              {pkg &&
+                session?.github_username === pkg?.owner_github_username && (
+                  <DropdownMenuItem
+                    className="text-xs"
+                    onClick={() => createReleaseDialog.openDialog()}
+                    disabled={hasUnsavedChanges || isSaving}
+                  >
+                    <Tag className="mr-1 h-3 w-3" />
+                    Create Release
+                  </DropdownMenuItem>
+                )}
               <DropdownMenuItem
                 className="text-xs"
                 onClick={() => {
@@ -561,6 +608,16 @@ export default function EditorNav({
         packageOwner={pkg?.owner_github_username ?? ""}
       />
       <ViewTsFilesDialog />
+      <CreateReleaseDialog
+        isOpen={createReleaseDialog.isOpen}
+        onClose={createReleaseDialog.closeDialog}
+        currentVersion={createReleaseDialog.currentVersion}
+        version={createReleaseDialog.version}
+        setVersion={createReleaseDialog.setVersion}
+        isLoading={createReleaseDialog.isLoading}
+        error={createReleaseDialog.error}
+        onCreateRelease={createReleaseDialog.handleCreateRelease}
+      />
     </nav>
   )
 }

package/src/components/preview/BuildsList.tsx

@@ -0,0 +1,238 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Clock,
+  GitBranch,
+  AlertCircle,
+  CheckCircle,
+  Loader2,
+  MoreHorizontal,
+  GitCommit,
+  Plus,
+} from "lucide-react"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { getBuildStatus, PackageBuild, StatusIcon } from "."
+import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
+
+interface BuildsListProps {
+  builds: PackageBuild[]
+  onSelectBuild?: (build: PackageBuild) => void
+}
+
+export const BuildsList = ({ builds, onSelectBuild }: BuildsListProps) => {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-900">Builds</h2>
+          <p className="text-gray-600">Manage and monitor your builds</p>
+        </div>
+        <Button className="flex items-center gap-2">
+          <Plus className="w-4 h-4" />
+          Create Build
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Recent Deployments</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="overflow-x-auto">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Build ID</TableHead>
+                  <TableHead>Branch</TableHead>
+                  <TableHead>Commit</TableHead>
+                  <TableHead>Author</TableHead>
+                  <TableHead>Created</TableHead>
+                  <TableHead>Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {builds.map((build) => {
+                  const { status, label } = getBuildStatus(build)
+
+                  return (
+                    <TableRow
+                      key={build.package_build_id}
+                      className="cursor-pointer hover:bg-gray-50"
+                      onClick={() => onSelectBuild?.(build)}
+                    >
+                      <TableCell>
+                        <div className="flex items-center gap-2">
+                          <StatusIcon status={status} />
+                          <Badge
+                            variant={
+                              status === "success"
+                                ? "default"
+                                : status === "error"
+                                  ? "destructive"
+                                  : "secondary"
+                            }
+                            className="text-xs"
+                          >
+                            {label}
+                          </Badge>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <code className="text-sm bg-gray-100 px-2 py-1 rounded">
+                          {build.package_build_id.slice(-8)}
+                        </code>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex items-center gap-2">
+                          {build.branch_name?.includes("/") ? (
+                            <GitBranch className="w-3 h-3 text-gray-500" />
+                          ) : (
+                            <GitCommit className="w-3 h-3 text-gray-500" />
+                          )}
+                          <Badge variant="outline" className="text-xs">
+                            {build.branch_name || "main"}
+                          </Badge>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <div className="max-w-xs">
+                          <p className="text-sm font-medium truncate">
+                            {build.commit_message || "No commit message"}
+                          </p>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-gray-600">
+                          {build.commit_author || "Unknown"}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-gray-600">
+                          {formatTimeAgo(build.created_at)}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex items-center gap-2">
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={(e) => e.stopPropagation()}
+                              >
+                                <MoreHorizontal className="w-3 h-3" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                              <DropdownMenuItem>View Details</DropdownMenuItem>
+                              <DropdownMenuItem>View Logs</DropdownMenuItem>
+                              <DropdownMenuItem>Redeploy</DropdownMenuItem>
+                              <DropdownMenuItem className="text-red-600">
+                                Cancel
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  )
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-green-100 rounded-lg">
+                <CheckCircle className="w-5 h-5 text-green-600" />
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">Successful</p>
+                <p className="text-2xl font-bold text-gray-900">
+                  {
+                    builds.filter((d) => getBuildStatus(d).status === "success")
+                      .length
+                  }
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-red-100 rounded-lg">
+                <AlertCircle className="w-5 h-5 text-red-600" />
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">Failed</p>
+                <p className="text-2xl font-bold text-gray-900">
+                  {
+                    builds.filter((d) => getBuildStatus(d).status === "error")
+                      .length
+                  }
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-blue-100 rounded-lg">
+                <Loader2 className="w-5 h-5 text-blue-600" />
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">Building</p>
+                <p className="text-2xl font-bold text-gray-900">
+                  {
+                    builds.filter(
+                      (d) => getBuildStatus(d).status === "building",
+                    ).length
+                  }
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-gray-100 rounded-lg">
+                <Clock className="w-5 h-5 text-gray-600" />
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">Total</p>
+                <p className="text-2xl font-bold text-gray-900">
+                  {builds.length}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}