@tscircuit/fake-snippets 0.0.106 → 0.0.108

package/src/lib/utils/transformFilesToTreeData.tsx

@@ -0,0 +1,195 @@
+import type { TreeDataItem } from "@/components/ui/tree-view"
+import type {
+  IRenameFileProps,
+  IDeleteFileProps,
+} from "@/hooks/useFileManagement"
+import { isHiddenFile } from "@/components/ViewPackagePage/utils/is-hidden-file"
+import { File, Folder, MoreVertical, Pencil, Trash2 } from "lucide-react"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { useToast } from "@/hooks/use-toast"
+
+type FileName = string
+type TreeNode = Omit<TreeDataItem, "children"> & {
+  children?: Record<string, TreeNode>
+}
+interface TransformFilesToTreeDataProps {
+  files: Record<FileName, string>
+  currentFile: FileName | null
+  renamingFile: string | null
+  handleRenameFile: (props: IRenameFileProps) => { fileRenamed: boolean }
+  handleDeleteFile: (props: IDeleteFileProps) => { fileDeleted: boolean }
+  setRenamingFile: (filename: string | null) => void
+  onFileSelect: (filename: FileName) => void
+  onFolderSelect: (folderPath: string) => void
+  canModifyFiles: boolean
+  setErrorMessage: (message: string) => void
+  setSelectedFolderForCreation: (folder: string | null) => void
+}
+
+export const transformFilesToTreeData = ({
+  files,
+  currentFile,
+  renamingFile,
+  handleRenameFile,
+  handleDeleteFile,
+  setRenamingFile,
+  onFileSelect,
+  onFolderSelect,
+  canModifyFiles,
+  setErrorMessage,
+  setSelectedFolderForCreation,
+}: TransformFilesToTreeDataProps): TreeDataItem[] => {
+  const { toast } = useToast()
+  const root: Record<string, TreeNode> = {}
+
+  Object.keys(files).forEach((filePath) => {
+    const hasLeadingSlash = filePath.startsWith("/")
+    const pathSegments = (hasLeadingSlash ? filePath.slice(1) : filePath)
+      .trim()
+      .split("/")
+    let currentNode: Record<string, TreeNode> = root
+
+    pathSegments.forEach((segment, segmentIndex) => {
+      const isLeafNode = segmentIndex === pathSegments.length - 1
+      const ancestorPath = pathSegments.slice(0, segmentIndex).join("/")
+      const relativePath = ancestorPath ? `${ancestorPath}/${segment}` : segment
+      const absolutePath = hasLeadingSlash ? `/${relativePath}` : relativePath
+      const itemId = absolutePath
+
+      if (
+        !currentNode[segment] &&
+        (!isHiddenFile(relativePath) ||
+          isHiddenFile(
+            currentFile?.startsWith("/")
+              ? currentFile.slice(1)
+              : currentFile || "",
+          ))
+      ) {
+        currentNode[segment] = {
+          id: itemId,
+          name: segment,
+          isRenaming: renamingFile === itemId,
+          onRename: (newFilename: string) => {
+            const oldPath = itemId
+            const pathParts = oldPath.split("/").filter((part) => part !== "")
+            let newPath: string
+
+            if (pathParts.length > 1) {
+              const folderPath = pathParts.slice(0, -1).join("/")
+              newPath = folderPath + "/" + newFilename
+            } else {
+              newPath = newFilename
+            }
+
+            if (oldPath.startsWith("/") && !newPath.startsWith("/")) {
+              newPath = "/" + newPath
+            }
+
+            const { fileRenamed } = handleRenameFile({
+              oldFilename: itemId,
+              newFilename: newPath,
+              onError: (error) => {
+                toast({
+                  title: `Error renaming file`,
+                  description: error.message,
+                  variant: "destructive",
+                })
+              },
+            })
+            if (fileRenamed) {
+              setRenamingFile(null)
+            }
+          },
+          onCancelRename: () => {
+            setRenamingFile(null)
+          },
+          icon: isLeafNode ? File : Folder,
+          onClick: isLeafNode
+            ? () => {
+                onFileSelect(absolutePath)
+                setSelectedFolderForCreation(null)
+              }
+            : () => onFolderSelect(absolutePath),
+          draggable: false,
+          droppable: !isLeafNode,
+          children: isLeafNode ? undefined : {},
+          actions: canModifyFiles ? (
+            <>
+              <DropdownMenu key={itemId}>
+                <DropdownMenuTrigger asChild>
+                  <MoreVertical className="w-4 h-4 text-gray-500 hover:text-gray-700" />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  className="w-fit bg-white shadow-lg rounded-md border-4 z-[100] border-white"
+                  style={{
+                    position: "absolute",
+                    top: "100%",
+                    left: "0",
+                    marginTop: "0.5rem",
+                    width: "8rem",
+                    padding: "0.01rem",
+                  }}
+                >
+                  <DropdownMenuGroup>
+                    {isLeafNode && (
+                      <DropdownMenuItem
+                        onClick={() => {
+                          setRenamingFile(itemId)
+                        }}
+                        className="flex items-center px-3 py-1 text-xs text-black hover:bg-gray-100 cursor-pointer"
+                      >
+                        <Pencil className="mr-2 h-3 w-3" />
+                        Rename
+                      </DropdownMenuItem>
+                    )}
+                    <DropdownMenuItem
+                      onClick={() => {
+                        const { fileDeleted } = handleDeleteFile({
+                          filename: itemId,
+                          onError: (error) => {
+                            toast({
+                              title: `Error deleting file ${itemId}`,
+                              description: error.message,
+                            })
+                          },
+                        })
+                        if (fileDeleted) {
+                          setErrorMessage("")
+                        }
+                      }}
+                      className="flex items-center px-3 py-1 text-xs text-red-600 hover:bg-gray-100 cursor-pointer"
+                    >
+                      <Trash2 className="mr-2 h-3 w-3" />
+                      Delete
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </>
+          ) : undefined,
+        }
+      }
+
+      if (!isLeafNode && currentNode[segment]?.children) {
+        currentNode = currentNode[segment].children
+      }
+    })
+  })
+
+  const convertToArray = (items: Record<string, TreeNode>): TreeDataItem[] => {
+    return Object.values(items).map((item) => ({
+      ...item,
+      children: item.children ? convertToArray(item.children) : undefined,
+    }))
+  }
+  return convertToArray(root).filter((x) => {
+    if (x.children?.length === 0) return false
+    return true
+  })
+}

package/src/pages/404.tsx

@@ -5,15 +5,13 @@ import { NotFound } from "@/components/NotFound"
 
 export function NotFoundPage({
   heading = "Page Not Found",
-}: { heading?: string }) {
+  subtitle = "The page you're looking for doesn't exist.",
+}: { heading?: string; subtitle?: string }) {
   return (
     <div className="flex min-h-screen flex-col">
       <Helmet>
         <title>404 - {heading} | tscircuit</title>
-        <meta
-          name="description"
-          content="The page you're looking for doesn't exist."
-        />
+        <meta name="description" content={subtitle} />
       </Helmet>
       <Header2 />
       <NotFound heading={heading} />

package/src/pages/preview-release.tsx

@@ -0,0 +1,269 @@
+import { useState } from "react"
+import { useParams } from "wouter"
+import { Loader2, ChevronLeft, ChevronRight } from "lucide-react"
+import Header from "@/components/Header"
+import { SuspenseRunFrame } from "@/components/SuspenseRunFrame"
+import { TreeView } from "@/components/ui/tree-view"
+import { transformFilesToTreeData } from "@/lib/utils/transformFilesToTreeData"
+import { cn } from "@/lib/utils"
+import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+import NotFoundPage from "./404"
+import { getBuildStatus } from "@/components/preview"
+import { usePackageReleaseById } from "@/hooks/use-package-release"
+import { usePackageFilesLoader } from "@/hooks/usePackageFilesLoader"
+import { usePackageBuild } from "@/hooks/use-package-builds"
+import { PackageBuild } from "fake-snippets-api/lib/db/schema"
+import { usePackageByName } from "@/hooks/use-package-by-package-name"
+
+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<{
+    packageReleaseId: string
+    author: string
+    packageName: string
+  }>()
+  const packageReleaseId = params?.packageReleaseId || null
+  const author = params?.author || null
+  const packageName = params?.packageName || null
+
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(true)
+  const [selectedFile, setSelectedFile] = useState<string | null>("index.tsx")
+  const [selectedItemId, setSelectedItemId] = useState<string>("")
+
+  const { data: packageRelease, isLoading: isLoadingRelease } =
+    usePackageReleaseById(packageReleaseId)
+  const { data: pkg, isLoading: isLoadingPackage } = usePackageByName(
+    author && packageName ? `${author}/${packageName}` : null,
+  )
+  const { data: build, isLoading: isLoadingBuild } = usePackageBuild(
+    packageRelease?.latest_package_build_id || null,
+  )
+  const { data: buildFiles = [], isLoading: isLoadingFiles } =
+    usePackageFilesLoader(pkg)
+
+  const buildFsMap = Object.fromEntries(
+    buildFiles.map((f) => [f.path, f.content]),
+  )
+
+  if (!packageReleaseId) {
+    return <NotFoundPage heading="Package Release Not Found" />
+  }
+
+  if (!packageRelease && !isLoadingRelease) {
+    return <NotFoundPage heading="Package Release Not Found" />
+  }
+  const isLoading =
+    isLoadingRelease || isLoadingPackage || isLoadingFiles || isLoadingBuild
+
+  if (!build && !isLoading) {
+    return <NotFoundPage heading="Package Build Not Found" />
+  }
+
+  const { status } = getBuildStatus(build as PackageBuild)
+
+  const treeData = transformFilesToTreeData({
+    files: buildFsMap,
+    currentFile: selectedFile,
+    renamingFile: null,
+    handleRenameFile: () => ({ fileRenamed: false }),
+    handleDeleteFile: () => ({ fileDeleted: false }),
+    setRenamingFile: () => {},
+    onFileSelect: setSelectedFile,
+    onFolderSelect: () => {},
+    canModifyFiles: false,
+    setErrorMessage: () => {},
+    setSelectedFolderForCreation: () => {},
+  })
+
+  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-2 md: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={`/${pkg?.name}/releases/${build?.package_release_id}`}
+                          title={build?.package_build_id}
+                          className="font-mono text-sm truncate text-gray-900 bg-gray-100 w-full px-2 py-1 rounded"
+                        >
+                          {build?.package_build_id}
+                        </PrefetchPageLink>
+                      </div>
+                      {packageRelease?.commit_message && (
+                        <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>
+                          <a
+                            title={packageRelease?.commit_message}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            href={`https://github.com/${pkg?.github_repo_full_name}/commit/${packageRelease?.commit_message}`}
+                            className="font-mono text-xs text-gray-600 bg-gray-50 px-2 text-right py-1 rounded truncate"
+                          >
+                            {packageRelease?.commit_message}
+                          </a>
+                        </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 w-fit rounded-full capitalize ${
+                            status === "success"
+                              ? "bg-emerald-100 text-emerald-800"
+                              : status === "error"
+                                ? "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">
+                      {isLoadingFiles
+                        ? "Loading files..."
+                        : `${treeData.length} file${treeData.length !== 1 ? "s" : ""}`}
+                    </p>
+                  </div>
+                  <div className="px-2 py-2 overflow-y-auto select-none">
+                    {isLoadingFiles ? (
+                      <div className="flex items-center justify-center py-8">
+                        <Loader2 className="w-4 h-4 animate-spin" />
+                        <span className="ml-2 text-sm text-gray-500">
+                          Loading files...
+                        </span>
+                      </div>
+                    ) : (
+                      <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">
+              {isLoading ? (
+                <div className="flex-1 flex items-center justify-center">
+                  <div className="flex flex-col items-center gap-3 text-gray-500">
+                    <Loader2 className="w-6 h-6 animate-spin" />
+                    <p>Loading package contents...</p>
+                  </div>
+                </div>
+              ) : status === "success" && buildFiles.length > 0 ? (
+                <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 === "error" ? (
+                    <div className="text-center">
+                      <p className="text-red-600 font-medium mb-2">
+                        Build Failed
+                      </p>
+                    </div>
+                  ) : buildFiles.length === 0 ? (
+                    <div className="text-center">
+                      <p className="text-gray-600 font-medium mb-2">
+                        No files found
+                      </p>
+                      <p className="text-sm text-gray-500">
+                        This package release doesn't have any files to preview.
+                      </p>
+                    </div>
+                  ) : (
+                    <div className="text-center p-4">
+                      <p className="text-gray-600 font-medium mb-2">
+                        Build Status: {status}
+                      </p>
+                      <p className="text-sm text-gray-500 max-w-lg">
+                        Please wait while we process this build status. Try
+                        refreshing the page in a few moments.
+                      </p>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </main>
+        </div>
+      </div>
+    </>
+  )
+}

package/src/pages/release-builds.tsx

@@ -0,0 +1,99 @@
+import { useParams } from "wouter"
+import NotFoundPage from "./404"
+import { usePackageByName } from "@/hooks/use-package-by-package-name"
+import { usePackageReleaseByIdOrVersion } from "@/hooks/use-package-release-by-id-or-version"
+import { usePackageBuildsByReleaseId } from "@/hooks/use-package-builds"
+import { BuildsList } from "@/components/preview/BuildsList"
+import Header from "@/components/Header"
+import { useLocation } from "wouter"
+import { PackageBreadcrumb } from "@/components/PackageBreadcrumb"
+import { PackageBuild } from "fake-snippets-api/lib/db/schema"
+
+export default function ReleaseBuildsPage() {
+  const params = useParams<{
+    author: string
+    packageName: string
+    releaseId: string
+  }>()
+
+  const packageName =
+    params?.author && params?.packageName
+      ? `${params.author}/${params.packageName}`
+      : null
+
+  const [, setLocation] = useLocation()
+
+  const {
+    data: pkg,
+    isLoading: isLoadingPackage,
+    error: packageError,
+  } = usePackageByName(packageName)
+
+  const {
+    data: packageRelease,
+    isLoading: isLoadingRelease,
+    error: releaseError,
+  } = usePackageReleaseByIdOrVersion(params?.releaseId ?? null, packageName)
+
+  const {
+    data: builds,
+    isLoading: isLoadingBuilds,
+    error: buildsError,
+  } = usePackageBuildsByReleaseId(params?.releaseId ?? null)
+
+  if (isLoadingPackage || isLoadingRelease || isLoadingBuilds) {
+    return null
+  }
+
+  if (packageError?.status === 404 || !pkg) {
+    return <NotFoundPage heading="Package Not Found" />
+  }
+
+  if (releaseError?.status === 404 || !packageRelease) {
+    return <NotFoundPage heading="Release Not Found" />
+  }
+
+  return (
+    <>
+      <Header />
+      <div className="min-h-screen bg-white">
+        <div className="bg-gray-50 border-b py-10">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <PackageBreadcrumb
+              author={params?.author || ""}
+              packageName={packageName || ""}
+              unscopedName={pkg.unscoped_name}
+              currentPage="builds"
+              releaseVersion={
+                packageRelease.version ||
+                `v${packageRelease.package_release_id.slice(-6)}`
+              }
+            />
+            <div className="flex items-center gap-4">
+              <div>
+                <h1 className="text-3xl font-bold text-gray-900">
+                  {pkg.name} - Release Builds
+                </h1>
+                <p className="text-gray-600 mt-2">
+                  All builds for release {packageRelease.package_release_id}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <div className="space-y-6">
+            <div className="flex items-center justify-between">
+              <h2 className="text-2xl font-bold text-gray-900">All Builds</h2>
+              <p className="text-sm text-gray-600">
+                {builds?.length} build{builds?.length !== 1 ? "s" : ""} found
+              </p>
+            </div>
+            {pkg && <BuildsList pkg={pkg} />}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}