@tscircuit/fake-snippets 0.0.71 → 0.0.72

package/fake-snippets-api/routes/api/package_files/create_or_update.ts

@@ -28,7 +28,7 @@ const routeSpec = {
     }, "Cannot specify both package_release_id and package_name_with_version")
     .refine((v) => {
       if (v.content_base64 && v.content_text) return false
-      if (!v.content_base64 && !v.content_text) return false
+      if (!v.content_base64 && v.content_text === undefined) return false
       return true
     }, "Either content_base64 or content_text is required"),
   jsonResponse: z.object({
@@ -136,7 +136,7 @@ export default withRouteSpec(routeSpec)(async (req, ctx) => {
       exisitingFile.package_file_id,
       {
         content_text:
-          content_text ||
+          content_text ??
           (content_base64
             ? Buffer.from(content_base64, "base64").toString()
             : null),
@@ -167,7 +167,7 @@ export default withRouteSpec(routeSpec)(async (req, ctx) => {
     package_release_id: packageReleaseId,
     file_path,
     content_text:
-      content_text ||
+      content_text ??
       (content_base64
         ? Buffer.from(content_base64, "base64").toString()
         : null),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.71",
+  "version": "0.0.72",
   "type": "module",
   "repository": {
     "type": "git",
@@ -71,11 +71,11 @@
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@tscircuit/eval": "^0.0.198",
-    "@tscircuit/footprinter": "^0.0.124",
+    "@tscircuit/footprinter": "^0.0.169",
     "@tscircuit/layout": "^0.0.29",
     "@tscircuit/math-utils": "^0.0.10",
     "@tscircuit/mm": "^0.0.8",
-    "@tscircuit/props": "^0.0.186",
+    "@tscircuit/props": "^0.0.194",
     "@types/file-saver": "^2.0.7",
     "@types/ms": "^0.7.34",
     "@typescript/ata": "^0.9.7",
@@ -83,7 +83,7 @@
     "@valtown/codemirror-ts": "^2.2.0",
     "@vercel/analytics": "^1.4.1",
     "change-case": "^5.4.4",
-    "circuit-json": "^0.0.164",
+    "circuit-json": "^0.0.190",
     "circuit-json-to-bom-csv": "^0.0.6",
     "circuit-json-to-gerber": "^0.0.21",
     "circuit-json-to-pnp-csv": "^0.0.6",
@@ -145,9 +145,9 @@
     "@biomejs/biome": "^1.9.2",
     "@playwright/test": "^1.48.0",
     "@tailwindcss/typography": "^0.5.16",
-    "@tscircuit/core": "^0.0.384",
+    "@tscircuit/core": "^0.0.428",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/runframe": "^0.0.494",
+    "@tscircuit/runframe": "^0.0.507",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
     "@types/country-list": "^2.1.4",
@@ -161,7 +161,7 @@
     "@typescript/vfs": "^1.6.0",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
-    "circuit-to-svg": "^0.0.101",
+    "circuit-to-svg": "^0.0.131",
     "get-port": "^7.1.0",
     "globals": "^15.9.0",
     "he": "^1.2.0",

package/src/components/FileSidebar.tsx

@@ -1,20 +1,33 @@
 import React, { useState } from "react"
 import { cn } from "@/lib/utils"
-import { File, Folder, PanelRightOpen, Plus } from "lucide-react"
+import { File, Folder, MoreVertical, PanelRightOpen, Plus } from "lucide-react"
 import { TreeView, TreeDataItem } from "@/components/ui/tree-view"
 import { isHiddenFile } from "./ViewPackagePage/utils/is-hidden-file"
 import { Input } from "@/components/ui/input"
-import { CreateFileProps } from "./package-port/CodeAndPreview"
-
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu"
+import type {
+  ICreateFileProps,
+  ICreateFileResult,
+  IDeleteFileProps,
+  IDeleteFileResult,
+} from "@/hooks/useFileManagement"
+import { useToast } from "@/hooks/use-toast"
 type FileName = string
 
 interface FileSidebarProps {
   files: Record<FileName, string>
-  currentFile: FileName
+  currentFile: FileName | null
   onFileSelect: (filename: FileName) => void
   className?: string
   fileSidebarState: ReturnType<typeof useState<boolean>>
-  handleCreateFile: (props: CreateFileProps) => void
+  handleCreateFile: (props: ICreateFileProps) => ICreateFileResult
+  handleDeleteFile: (props: IDeleteFileProps) => IDeleteFileResult
 }
 
 const FileSidebar: React.FC<FileSidebarProps> = ({
@@ -24,11 +37,13 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   className,
   fileSidebarState,
   handleCreateFile,
+  handleDeleteFile,
 }) => {
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
   const [newFileName, setNewFileName] = useState("")
   const [isCreatingFile, setIsCreatingFile] = useState(false)
   const [errorMessage, setErrorMessage] = useState("")
+  const { toast } = useToast()
 
   const transformFilesToTreeData = (
     files: Record<FileName, string>,
@@ -38,38 +53,85 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
     }
     const root: Record<string, TreeNode> = {}
 
-    Object.keys(files).forEach((path) => {
-      const startsWithSlash = path.startsWith("/")
-      const parts = (startsWithSlash ? path.slice(1) : path).trim().split("/")
-      let current = root
+    Object.keys(files).forEach((filePath) => {
+      const hasLeadingSlash = filePath.startsWith("/")
+      const pathSegments = (hasLeadingSlash ? filePath.slice(1) : filePath)
+        .trim()
+        .split("/")
+      let currentNode: Record<string, TreeNode> = root
 
-      parts.forEach((part, index) => {
-        const isFile = index === parts.length - 1
-        const parentPath = parts.slice(0, index).join("/")
-        const currentPath = parentPath ? `${parentPath}/${part}` : part
-        const evaluatedFilePath = startsWithSlash
-          ? `/${currentPath}`
-          : currentPath
+      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 (
-          !current[part] &&
-          (!isHiddenFile(currentPath) ||
+          !currentNode[segment] &&
+          (!isHiddenFile(relativePath) ||
             isHiddenFile(
-              currentFile.startsWith("/") ? currentFile.slice(1) : currentFile,
+              currentFile?.startsWith("/")
+                ? currentFile.slice(1)
+                : currentFile || "",
             ))
         ) {
-          current[part] = {
-            id: currentPath,
-            name: isFile ? part : part,
-            icon: isFile ? File : Folder,
-            onClick: isFile ? () => onFileSelect(evaluatedFilePath) : undefined,
-            draggable: isFile,
-            droppable: !isFile,
-            children: isFile ? undefined : {},
+          currentNode[segment] = {
+            id: itemId,
+            name: isLeafNode ? segment : segment,
+            icon: isLeafNode ? File : Folder,
+            onClick: isLeafNode ? () => onFileSelect(absolutePath) : undefined,
+            draggable: false,
+            droppable: !isLeafNode,
+            children: isLeafNode ? undefined : {},
+            actions: (
+              <>
+                <DropdownMenu key={itemId}>
+                  <DropdownMenuTrigger asChild>
+                    <MoreVertical className="w-4 h-4 text-gray-500 hover:text-gray-700" />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent
+                    className="w-48 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>
+                      <DropdownMenuItem
+                        onClick={() => {
+                          const { fileDeleted } = handleDeleteFile({
+                            filename: relativePath,
+                            onError: (error) => {
+                              toast({
+                                title: `Error deleting file ${relativePath}`,
+                                description: error.message,
+                              })
+                            },
+                          })
+                          if (fileDeleted) {
+                            setErrorMessage("")
+                          }
+                        }}
+                        className="flex items-center px-4 py-1 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
+                      >
+                        Delete
+                      </DropdownMenuItem>
+                    </DropdownMenuGroup>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </>
+            ),
           }
         }
 
-        if (!isFile && current[part].children) {
-          current = current[part].children
+        if (!isLeafNode && currentNode[segment].children) {
+          currentNode = currentNode[segment].children
         }
       })
     })
@@ -90,15 +152,26 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   }
 
   const treeData = transformFilesToTreeData(files)
-
+  // console.log("treeData", files)
   const handleCreateFileInline = () => {
-    handleCreateFile({
+    const { newFileCreated } = handleCreateFile({
       newFileName,
-      setErrorMessage,
-      onFileSelect,
-      setNewFileName,
-      setIsCreatingFile,
+      onError: (error) => {
+        setErrorMessage(error.message)
+      },
     })
+    if (newFileCreated) {
+      setIsCreatingFile(false)
+      setNewFileName("")
+      setErrorMessage("")
+    }
+  }
+
+  const toggleSidebar = () => {
+    setSidebarOpen(!sidebarOpen)
+    setErrorMessage("")
+    setIsCreatingFile(false)
+    setNewFileName("")
   }
 
   return (
@@ -110,7 +183,7 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
       )}
     >
       <button
-        onClick={() => setSidebarOpen(!sidebarOpen)}
+        onClick={toggleSidebar}
         className={`z-[99] mt-2 ml-2 text-gray-400 scale-90 transition-opacity duration-200 ${
           !sidebarOpen ? "opacity-0 pointer-events-none" : "opacity-100"
         }`}
@@ -129,6 +202,7 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
           <Input
             autoFocus
             value={newFileName}
+            spellCheck={false}
             onChange={(e) => setNewFileName(e.target.value)}
             onBlur={handleCreateFileInline}
             onKeyDown={(e) => {
@@ -149,7 +223,7 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
       )}
       <TreeView
         data={treeData}
-        initialSelectedItemId={currentFile}
+        initialSelectedItemId={currentFile || ""}
         onSelectChange={(item) => {
           if (item?.onClick) {
             item.onClick()