@tscircuit/fake-snippets 0.0.107 → 0.0.108

package/src/components/preview/index.tsx

@@ -1,13 +1,14 @@
 export { ConnectedRepoOverview } from "./ConnectedRepoOverview"
 export { BuildsList } from "./BuildsList"
 export { PackageReleasesDashboard } from "./PackageReleasesDashboard"
-import {
-  Package,
-  PackageBuild,
-  PackageRelease,
-} from "fake-snippets-api/lib/db/schema"
+import { PackageBuild } from "fake-snippets-api/lib/db/schema"
 import { Clock, CheckCircle, AlertCircle, Loader2 } from "lucide-react"
-export const getBuildStatus = (build: PackageBuild | null) => {
+export const getBuildStatus = (
+  build?: PackageBuild | null,
+): {
+  status: "pending" | "building" | "success" | "error" | "queued"
+  label: string
+} => {
   if (!build) {
     return { status: "pending", label: "No builds" }
   }
@@ -25,154 +26,20 @@ export const getBuildStatus = (build: PackageBuild | null) => {
   ) {
     return { status: "building", label: "Building" }
   }
-  if (build?.build_completed_at && build?.transpilation_completed_at) {
+  if (
+    !build?.build_error &&
+    !build?.transpilation_error &&
+    !build?.circuit_json_build_error &&
+    !build?.build_in_progress &&
+    !build?.transpilation_in_progress &&
+    !build?.circuit_json_build_in_progress &&
+    build?.transpilation_completed_at
+  ) {
     return { status: "success", label: "Ready" }
   }
   return { status: "queued", label: "Queued" }
 }
 
-export const MOCK_PACKAGE_BUILDS: PackageBuild[] = [
-  {
-    package_build_id: "pb_1a2b3c4d",
-    package_release_id: "pr_5e6f7g8h",
-    created_at: new Date(Date.now() - 1000 * 60 * 30).toISOString(),
-    transpilation_in_progress: false,
-    transpilation_started_at: new Date(
-      Date.now() - 1000 * 60 * 35,
-    ).toISOString(),
-    transpilation_completed_at: new Date(
-      Date.now() - 1000 * 60 * 32,
-    ).toISOString(),
-    transpilation_logs: [],
-    transpilation_error: null,
-    circuit_json_build_in_progress: false,
-    circuit_json_build_started_at: new Date(
-      Date.now() - 1000 * 60 * 32,
-    ).toISOString(),
-    circuit_json_build_completed_at: new Date(
-      Date.now() - 1000 * 60 * 30,
-    ).toISOString(),
-    circuit_json_build_logs: [],
-    circuit_json_build_error: null,
-    build_in_progress: false,
-    build_started_at: new Date(Date.now() - 1000 * 60 * 30).toISOString(),
-    build_completed_at: new Date(Date.now() - 1000 * 60 * 25).toISOString(),
-    build_error: null,
-    build_error_last_updated_at: new Date(
-      Date.now() - 1000 * 60 * 25,
-    ).toISOString(),
-    build_logs: null,
-    preview_url: "https://preview.tscircuit.com/pb_1a2b3c4d",
-    branch_name: "main",
-    commit_message: "Add new LED component with improved brightness control",
-    commit_author: "john.doe",
-  },
-  {
-    package_build_id: "pb_9i8j7k6l",
-    package_release_id: "pr_5m4n3o2p",
-    created_at: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString(),
-    transpilation_in_progress: false,
-    transpilation_started_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 2,
-    ).toISOString(),
-    transpilation_completed_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 2 + 1000 * 60 * 3,
-    ).toISOString(),
-    transpilation_logs: [],
-    transpilation_error: null,
-    circuit_json_build_in_progress: true,
-    circuit_json_build_started_at: new Date(
-      Date.now() - 1000 * 60 * 5,
-    ).toISOString(),
-    circuit_json_build_completed_at: null,
-    circuit_json_build_logs: [],
-    circuit_json_build_error: null,
-    build_in_progress: false,
-    build_started_at: null,
-    build_completed_at: null,
-    build_error: null,
-    build_error_last_updated_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 2,
-    ).toISOString(),
-    build_logs: null,
-    preview_url: null,
-    branch_name: "feature/resistor-update",
-    commit_message: "Update resistor component with new tolerance values",
-    commit_author: "jane.smith",
-  },
-  {
-    package_build_id: "pb_1q2w3e4r",
-    package_release_id: "pr_5t6y7u8i",
-    created_at: new Date(Date.now() - 1000 * 60 * 60 * 6).toISOString(),
-    transpilation_in_progress: false,
-    transpilation_started_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 6,
-    ).toISOString(),
-    transpilation_completed_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 6 + 1000 * 60 * 2,
-    ).toISOString(),
-    transpilation_logs: [],
-    transpilation_error:
-      "TypeScript compilation failed: Cannot find module 'missing-dependency'",
-    circuit_json_build_in_progress: false,
-    circuit_json_build_started_at: null,
-    circuit_json_build_completed_at: null,
-    circuit_json_build_logs: [],
-    circuit_json_build_error: null,
-    build_in_progress: false,
-    build_started_at: null,
-    build_completed_at: null,
-    build_error: null,
-    build_error_last_updated_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 6,
-    ).toISOString(),
-    build_logs: null,
-    preview_url: null,
-    branch_name: "hotfix/critical-bug",
-    commit_message: "Fix critical issue with capacitor placement",
-    commit_author: "alex.wilson",
-  },
-  {
-    package_build_id: "pb_9o8i7u6y",
-    package_release_id: "pr_5t4r3e2w",
-    created_at: new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString(),
-    transpilation_in_progress: false,
-    transpilation_started_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 24,
-    ).toISOString(),
-    transpilation_completed_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 24 + 1000 * 60 * 4,
-    ).toISOString(),
-    transpilation_logs: [],
-    transpilation_error: null,
-    circuit_json_build_in_progress: false,
-    circuit_json_build_started_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 24 + 1000 * 60 * 4,
-    ).toISOString(),
-    circuit_json_build_completed_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 24 + 1000 * 60 * 8,
-    ).toISOString(),
-    circuit_json_build_logs: [],
-    circuit_json_build_error: null,
-    build_in_progress: false,
-    build_started_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 24 + 1000 * 60 * 8,
-    ).toISOString(),
-    build_completed_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 24 + 1000 * 60 * 12,
-    ).toISOString(),
-    build_error: null,
-    build_error_last_updated_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 24 + 1000 * 60 * 12,
-    ).toISOString(),
-    build_logs: null,
-    preview_url: "https://preview.tscircuit.com/pb_9o8i7u6y",
-    branch_name: "main",
-    commit_message: "Initial project setup with basic components",
-    commit_author: "sarah.johnson",
-  },
-]
-
 export const StatusIcon = ({ status }: { status: string }) => {
   switch (status) {
     case "success":
@@ -185,7 +52,3 @@ export const StatusIcon = ({ status }: { status: string }) => {
       return <Clock className="w-4 h-4 text-gray-500" />
   }
 }
-
-export const getLatestBuildForPackage = (pkg: Package): PackageBuild => {
-  return MOCK_PACKAGE_BUILDS[0]
-}

package/src/index.css

@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 @layer base {
   :root {
     --radius: 0.5rem;
@@ -18,6 +19,10 @@
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
   }
+
+  .shiki {
+    @apply no-scrollbar;
+  }
 }
 
 .shiki {
@@ -82,3 +87,22 @@
 body {
   overflow-x: hidden;
 }
+
+/* Subtle scrollbar styling for html and body */
+html::-webkit-scrollbar,
+body::-webkit-scrollbar {
+  width: 6px;
+  background-color: transparent;
+}
+
+html::-webkit-scrollbar-thumb,
+body::-webkit-scrollbar-thumb {
+  background-color: rgba(215, 215, 215, 0.564);
+  border-radius: 8px;
+  transition: background-color 0.2s;
+}
+
+html::-webkit-scrollbar-thumb:hover,
+body::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(193, 193, 193, 0.455);
+}

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} />