Download Fabrication Files (#73)

* improve download button menu

* some context

* add button to download fabrication files

package.json

@@ -65,6 +65,9 @@
     "@typescript/ata": "^0.9.7",
     "@valtown/codemirror-ts": "^2.2.0",
     "circuit-json": "^0.0.85",
+    "circuit-json-to-bom-csv": "^0.0.4",
+    "circuit-json-to-gerber": "^0.0.12",
+    "circuit-json-to-pnp-csv": "^0.0.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "1.0.0",
@@ -78,6 +81,7 @@
     "input-otp": "^1.2.4",
     "jose": "^5.9.3",
     "jscad-electronics": "^0.0.11",
+    "jszip": "^3.10.1",
     "lucide-react": "^0.445.0",
     "ms": "^2.1.3",
     "next-themes": "^0.3.0",
@@ -119,7 +123,7 @@
     "tailwindcss": "^3.4.13",
     "typescript": "^5.6.2",
     "vite": "^5.4.8",
-    "winterspec": "^0.0.92",
+    "winterspec": "^0.0.93",
     "zod": "^3.23.8",
     "zustand": "^4.5.5",
     "zustand-hoist": "^2.0.1"

src/components/DownloadButtonAndMenu.tsx

@@ -8,18 +8,32 @@ import {
 import { Button } from "@/components/ui/button"
 import { Download, ChevronDown } from "lucide-react"
 import { downloadCircuitJson } from "@/lib/download-fns/download-circuit-json-fn"
+import { useNotImplementedToast } from "@/hooks/use-toast"
+import { downloadFabricationFiles } from "@/lib/download-fns/download-fabrication-files"
+import { AnyCircuitElement } from "circuit-json"
 
 interface DownloadButtonAndMenuProps {
   className?: string
   snippetUnscopedName: string | undefined
-  circuitJson: string
+  circuitJson?: AnyCircuitElement[] | null
 }
 
 export function DownloadButtonAndMenu({
   className,
   snippetUnscopedName,
   circuitJson,
 }: DownloadButtonAndMenuProps) {
+  const notImplemented = useNotImplementedToast()
+
+  if (!circuitJson) {
+    return (
+      <Button disabled variant="ghost" size="sm" className="px-2 text-xs">
+        <Download className="mr-1 h-3 w-3" />
+        Download
+      </Button>
+    )
+  }
+
   return (
     <div className={className}>
       <DropdownMenu>
@@ -33,43 +47,60 @@ export function DownloadButtonAndMenu({
         <DropdownMenuContent>
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() =>
+            onSelect={() => {
               downloadCircuitJson(
                 circuitJson,
                 snippetUnscopedName || "circuit" + ".json",
               )
-            }
+            }}
           >
             <Download className="mr-1 h-3 w-3" />
             <span className="flex-grow mr-6">Download Circuit JSON</span>
             <span className="text-[0.6rem] opacity-80 bg-blue-500 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">
               json
             </span>
           </DropdownMenuItem>
-          <DropdownMenuItem className="text-xs">
+          <DropdownMenuItem
+            className="text-xs"
+            onClick={() => notImplemented("3d model downloads")}
+          >
             <Download className="mr-1 h-3 w-3" />
             <span className="flex-grow  mr-6">Download 3D Model</span>
             <span className="text-[0.6rem] bg-green-500 opacity-80 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">
               stl
             </span>
           </DropdownMenuItem>
-          <DropdownMenuItem className="text-xs">
+          <DropdownMenuItem
+            className="text-xs"
+            onClick={() =>
+              downloadFabricationFiles({
+                circuitJson,
+                snippetUnscopedName: snippetUnscopedName || "snippet",
+              })
+            }
+          >
             <Download className="mr-1 h-3 w-3" />
             <span className="flex-grow  mr-6">Fabrication Files</span>
             <span className="text-[0.6rem] bg-purple-500 opacity-80 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">
               gerber/pnp/bom/csv
             </span>
           </DropdownMenuItem>
-          <DropdownMenuItem className="text-xs">
+          <DropdownMenuItem
+            className="text-xs"
+            onClick={() => notImplemented("kicad footprint download")}
+          >
             <Download className="mr-1 h-3 w-3" />
             <span className="flex-grow mr-6">Download Footprint</span>
             <span className="text-[0.6rem] bg-orange-500 opacity-80 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">
               kicad_mod
             </span>
           </DropdownMenuItem>
-          <DropdownMenuItem className="text-xs">
+          <DropdownMenuItem
+            className="text-xs"
+            onClick={() => notImplemented("kicad project download")}
+          >
             <Download className="mr-1 h-3 w-3" />
-            <span className="flex-grow mr-6">Download KiCad Zip</span>
+            <span className="flex-grow mr-6">Download KiCad Project</span>
             <span className="text-[0.6rem] bg-orange-500 opacity-80 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">
               kicad_*
             </span>

src/components/EditorNav.tsx

@@ -39,6 +39,7 @@ import { SnippetLink } from "./SnippetLink"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { useRenameSnippetDialog } from "./dialogs/rename-snippet-dialog"
 import { useConfirmDeleteSnippetDialog } from "./dialogs/confirm-delete-snippet-dialog"
+import { AnyCircuitElement } from "circuit-json"
 
 export default function EditorNav({
   circuitJson,
@@ -52,7 +53,7 @@ export default function EditorNav({
   isSaving,
 }: {
   snippet?: Snippet | null
-  circuitJson: any
+  circuitJson?: AnyCircuitElement[] | null
   code: string
   snippetType?: string
   hasUnsavedChanges: boolean

src/hooks/use-run-tsx/index.tsx

@@ -9,11 +9,12 @@ import { evalCompiledJs } from "./eval-compiled-js"
 import { constructCircuit } from "./construct-circuit"
 import { useSnippetsBaseApiUrl } from "../use-snippets-base-api-url"
 import * as jscadFiber from "jscad-fiber"
+import { AnyCircuitElement } from "circuit-json"
 
 type RunTsxResult = {
   compiledModule: any
   message: string
-  circuitJson: any
+  circuitJson: AnyCircuitElement[] | null
   compiledJs?: string
   isLoading: boolean
 }

src/lib/download-fns/download-circuit-json-fn.ts

@@ -1,7 +1,12 @@
 import { saveAs } from "file-saver"
 import { createBlobURL } from "./createBlobURL"
-export const downloadCircuitJson = (content: any, fileName: string) => {
-  const circuitJson = JSON.stringify(content, null, 2)
-  const blob = new Blob([circuitJson], { type: "application/json" })
+import { AnyCircuitElement } from "circuit-json"
+
+export const downloadCircuitJson = (
+  circuitJson: AnyCircuitElement[],
+  fileName: string,
+) => {
+  const stringifiedCircuitJson = JSON.stringify(circuitJson, null, 2)
+  const blob = new Blob([stringifiedCircuitJson], { type: "application/json" })
   saveAs(blob, fileName)
 }