@tscircuit/fake-snippets 0.0.4 → 0.0.6

package/playwright-tests/exampleCircuitJson.ts

@@ -0,0 +1,498 @@
+export const exampleCircuitJson = [
+  {
+    type: "source_port",
+    source_port_id: "source_port_0",
+    name: "pin1",
+    pin_number: 1,
+    port_hints: ["anode", "pos", "left", "pin1", "1"],
+    source_component_id: "source_component_0",
+  },
+  {
+    type: "source_port",
+    source_port_id: "source_port_1",
+    name: "pin2",
+    pin_number: 2,
+    port_hints: ["cathode", "neg", "right", "pin2", "2"],
+    source_component_id: "source_component_0",
+  },
+  {
+    type: "source_component",
+    source_component_id: "source_component_0",
+    ftype: "simple_resistor",
+    name: "R1",
+    supplier_part_numbers: {
+      jlcpcb: ["C11702", "C25543", "C226166"],
+    },
+    resistance: 1000,
+    display_resistance: "1kΩ",
+  },
+  {
+    type: "source_port",
+    source_port_id: "source_port_2",
+    name: "pin1",
+    pin_number: 1,
+    port_hints: ["anode", "pos", "left", "pin1", "1"],
+    source_component_id: "source_component_1",
+  },
+  {
+    type: "source_port",
+    source_port_id: "source_port_3",
+    name: "pin2",
+    pin_number: 2,
+    port_hints: ["cathode", "neg", "right", "pin2", "2"],
+    source_component_id: "source_component_1",
+  },
+  {
+    type: "source_component",
+    source_component_id: "source_component_1",
+    ftype: "simple_capacitor",
+    name: "C1",
+    supplier_part_numbers: {
+      jlcpcb: ["C106205", "C1523", "C14442"],
+    },
+    capacitance: 1e-9,
+    display_capacitance: "1nF",
+  },
+  {
+    type: "source_group",
+    source_group_id: "source_group_0",
+    is_subcircuit: true,
+    subcircuit_id: "subcircuit_source_group_0",
+  },
+  {
+    type: "source_trace",
+    source_trace_id: "source_trace_0",
+    connected_source_port_ids: ["source_port_0", "source_port_2"],
+    connected_source_net_ids: [],
+    max_length: null,
+    display_name: ".R1 > .pin1 to .C1 > .pin1",
+    subcircuit_connectivity_map_key: "unnamedsubcircuit27_connectivity_net0",
+  },
+  {
+    type: "schematic_component",
+    schematic_component_id: "schematic_component_0",
+    center: {
+      x: 3,
+      y: 0,
+    },
+    rotation: 0,
+    size: {
+      width: 1.0583332999999997,
+      height: 0.388910699999999,
+    },
+    source_component_id: "source_component_0",
+    symbol_name: "boxresistor_right",
+    symbol_display_value: "1kΩ",
+  },
+  {
+    type: "schematic_component",
+    schematic_component_id: "schematic_component_1",
+    center: {
+      x: -3,
+      y: 0,
+    },
+    rotation: 0,
+    size: {
+      width: 1.0583333000000001,
+      height: 0.8400173000000031,
+    },
+    source_component_id: "source_component_1",
+    symbol_name: "capacitor_right",
+    symbol_display_value: "1nF",
+  },
+  {
+    type: "schematic_port",
+    schematic_port_id: "schematic_port_0",
+    schematic_component_id: "schematic_component_0",
+    center: {
+      x: 2.4662093,
+      y: 0.045805199999999324,
+    },
+    source_port_id: "source_port_0",
+    facing_direction: "left",
+    distance_from_component_edge: 0.4,
+    pin_number: 1,
+    display_pin_label: "left",
+  },
+  {
+    type: "schematic_port",
+    schematic_port_id: "schematic_port_1",
+    schematic_component_id: "schematic_component_0",
+    center: {
+      x: 3.5337907000000004,
+      y: 0.04525870000000065,
+    },
+    source_port_id: "source_port_1",
+    facing_direction: "right",
+    distance_from_component_edge: 0.4,
+    pin_number: 2,
+    display_pin_label: "right",
+  },
+  {
+    type: "schematic_port",
+    schematic_port_id: "schematic_port_2",
+    schematic_component_id: "schematic_component_1",
+    center: {
+      x: -3.5512093000000005,
+      y: 0.016380250000000984,
+    },
+    source_port_id: "source_port_2",
+    facing_direction: "left",
+    distance_from_component_edge: 0.4,
+    pin_number: 1,
+    display_pin_label: "left",
+  },
+  {
+    type: "schematic_port",
+    schematic_port_id: "schematic_port_3",
+    schematic_component_id: "schematic_component_1",
+    center: {
+      x: -2.4487907,
+      y: 0.016926950000000218,
+    },
+    source_port_id: "source_port_3",
+    facing_direction: "right",
+    distance_from_component_edge: 0.4,
+    pin_number: 2,
+    display_pin_label: "right",
+  },
+  {
+    type: "schematic_trace",
+    schematic_trace_id: "schematic_trace_0",
+    source_trace_id: "source_trace_0",
+    edges: [
+      {
+        from: {
+          route_type: "wire",
+          x: 2.4662093,
+          y: 0.045805199999999324,
+          width: 0.1,
+          layer: "top",
+        },
+        to: {
+          route_type: "wire",
+          x: -2.0487906999999996,
+          y: 0.045805199999999324,
+          width: 0.1,
+          layer: "top",
+        },
+      },
+      {
+        from: {
+          route_type: "wire",
+          x: -2.0487906999999996,
+          y: 0.045805199999999324,
+          width: 0.1,
+          layer: "top",
+        },
+        to: {
+          route_type: "wire",
+          x: -2.0487906999999996,
+          y: 0.7174736499999994,
+          width: 0.1,
+          layer: "top",
+        },
+      },
+      {
+        from: {
+          route_type: "wire",
+          x: -2.0487906999999996,
+          y: 0.7174736499999994,
+          width: 0.1,
+          layer: "top",
+        },
+        to: {
+          route_type: "wire",
+          x: -3.5512093000000005,
+          y: 0.7174736499999994,
+          width: 0.1,
+          layer: "top",
+        },
+      },
+      {
+        from: {
+          route_type: "wire",
+          x: -3.5512093000000005,
+          y: 0.7174736499999994,
+          width: 0.1,
+          layer: "top",
+        },
+        to: {
+          route_type: "wire",
+          x: -3.5512093000000005,
+          y: 0.016380250000000984,
+          width: 0.1,
+          layer: "top",
+        },
+      },
+    ],
+    junctions: [],
+  },
+  {
+    type: "pcb_component",
+    pcb_component_id: "pcb_component_0",
+    center: {
+      x: 3,
+      y: 0,
+    },
+    width: 1.5999999999999996,
+    height: 0.6000000000000001,
+    layer: "top",
+    rotation: 0,
+    source_component_id: "source_component_0",
+    subcircuit_id: "subcircuit_source_group_0",
+  },
+  {
+    type: "pcb_component",
+    pcb_component_id: "pcb_component_1",
+    center: {
+      x: -3,
+      y: 0,
+    },
+    width: 1.5999999999999996,
+    height: 0.6000000000000001,
+    layer: "top",
+    rotation: 0,
+    source_component_id: "source_component_1",
+    subcircuit_id: "subcircuit_source_group_0",
+  },
+  {
+    type: "pcb_board",
+    pcb_board_id: "pcb_board_0",
+    center: {
+      x: 0,
+      y: 0,
+    },
+    thickness: 1.4,
+    num_layers: 4,
+    width: 10,
+    height: 10,
+  },
+  {
+    type: "pcb_smtpad",
+    pcb_smtpad_id: "pcb_smtpad_0",
+    pcb_component_id: "pcb_component_0",
+    pcb_port_id: "pcb_port_0",
+    layer: "top",
+    shape: "rect",
+    width: 0.6000000000000001,
+    height: 0.6000000000000001,
+    port_hints: ["1", "left"],
+    x: 2.5,
+    y: 0,
+    subcircuit_id: "subcircuit_source_group_0",
+  },
+  {
+    type: "pcb_solder_paste",
+    pcb_solder_paste_id: "pcb_solder_paste_0",
+    layer: "top",
+    shape: "rect",
+    width: 0.42000000000000004,
+    height: 0.42000000000000004,
+    x: 2.5,
+    y: 0,
+    pcb_component_id: "pcb_component_0",
+    pcb_smtpad_id: "pcb_smtpad_0",
+    subcircuit_id: "subcircuit_source_group_0",
+  },
+  {
+    type: "pcb_smtpad",
+    pcb_smtpad_id: "pcb_smtpad_1",
+    pcb_component_id: "pcb_component_0",
+    pcb_port_id: "pcb_port_1",
+    layer: "top",
+    shape: "rect",
+    width: 0.6000000000000001,
+    height: 0.6000000000000001,
+    port_hints: ["2", "right"],
+    x: 3.5,
+    y: 0,
+    subcircuit_id: "subcircuit_source_group_0",
+  },
+  {
+    type: "pcb_solder_paste",
+    pcb_solder_paste_id: "pcb_solder_paste_1",
+    layer: "top",
+    shape: "rect",
+    width: 0.42000000000000004,
+    height: 0.42000000000000004,
+    x: 3.5,
+    y: 0,
+    pcb_component_id: "pcb_component_0",
+    pcb_smtpad_id: "pcb_smtpad_1",
+    subcircuit_id: "subcircuit_source_group_0",
+  },
+  {
+    type: "pcb_smtpad",
+    pcb_smtpad_id: "pcb_smtpad_2",
+    pcb_component_id: "pcb_component_1",
+    pcb_port_id: "pcb_port_2",
+    layer: "top",
+    shape: "rect",
+    width: 0.6000000000000001,
+    height: 0.6000000000000001,
+    port_hints: ["1", "left"],
+    x: -3.5,
+    y: 0,
+    subcircuit_id: "subcircuit_source_group_0",
+  },
+  {
+    type: "pcb_solder_paste",
+    pcb_solder_paste_id: "pcb_solder_paste_2",
+    layer: "top",
+    shape: "rect",
+    width: 0.42000000000000004,
+    height: 0.42000000000000004,
+    x: -3.5,
+    y: 0,
+    pcb_component_id: "pcb_component_1",
+    pcb_smtpad_id: "pcb_smtpad_2",
+    subcircuit_id: "subcircuit_source_group_0",
+  },
+  {
+    type: "pcb_smtpad",
+    pcb_smtpad_id: "pcb_smtpad_3",
+    pcb_component_id: "pcb_component_1",
+    pcb_port_id: "pcb_port_3",
+    layer: "top",
+    shape: "rect",
+    width: 0.6000000000000001,
+    height: 0.6000000000000001,
+    port_hints: ["2", "right"],
+    x: -2.5,
+    y: 0,
+    subcircuit_id: "subcircuit_source_group_0",
+  },
+  {
+    type: "pcb_solder_paste",
+    pcb_solder_paste_id: "pcb_solder_paste_3",
+    layer: "top",
+    shape: "rect",
+    width: 0.42000000000000004,
+    height: 0.42000000000000004,
+    x: -2.5,
+    y: 0,
+    pcb_component_id: "pcb_component_1",
+    pcb_smtpad_id: "pcb_smtpad_3",
+    subcircuit_id: "subcircuit_source_group_0",
+  },
+  {
+    type: "pcb_port",
+    pcb_port_id: "pcb_port_0",
+    pcb_component_id: "pcb_component_0",
+    layers: ["top"],
+    subcircuit_id: "subcircuit_source_group_0",
+    x: 2.5,
+    y: 0,
+    source_port_id: "source_port_0",
+  },
+  {
+    type: "pcb_port",
+    pcb_port_id: "pcb_port_1",
+    pcb_component_id: "pcb_component_0",
+    layers: ["top"],
+    subcircuit_id: "subcircuit_source_group_0",
+    x: 3.5,
+    y: 0,
+    source_port_id: "source_port_1",
+  },
+  {
+    type: "pcb_port",
+    pcb_port_id: "pcb_port_2",
+    pcb_component_id: "pcb_component_1",
+    layers: ["top"],
+    subcircuit_id: "subcircuit_source_group_0",
+    x: -3.5,
+    y: 0,
+    source_port_id: "source_port_2",
+  },
+  {
+    type: "pcb_port",
+    pcb_port_id: "pcb_port_3",
+    pcb_component_id: "pcb_component_1",
+    layers: ["top"],
+    subcircuit_id: "subcircuit_source_group_0",
+    x: -2.5,
+    y: 0,
+    source_port_id: "source_port_3",
+  },
+  {
+    type: "pcb_trace",
+    pcb_trace_id: "pcb_trace_0",
+    route: [
+      {
+        route_type: "wire",
+        x: 2.5,
+        y: 0,
+        width: 0.16,
+        layer: "top",
+        start_pcb_port_id: "pcb_port_0",
+      },
+      {
+        route_type: "wire",
+        x: -1.2000000000000002,
+        y: 0,
+        width: 0.16,
+        layer: "top",
+      },
+      {
+        route_type: "wire",
+        x: -1.2000000000000002,
+        y: 1.3,
+        width: 0.16,
+        layer: "top",
+      },
+      {
+        route_type: "wire",
+        x: -3.5,
+        y: 1.3,
+        width: 0.16,
+        layer: "top",
+      },
+      {
+        route_type: "wire",
+        x: -3.5,
+        y: 0,
+        width: 0.16,
+        layer: "top",
+        end_pcb_port_id: "pcb_port_2",
+      },
+    ],
+    source_trace_id: "source_trace_0",
+    trace_length: 8.6,
+  },
+  {
+    type: "cad_component",
+    cad_component_id: "cad_component_0",
+    position: {
+      x: 3,
+      y: 0,
+      z: 0.7,
+    },
+    rotation: {
+      x: 0,
+      y: 0,
+      z: 0,
+    },
+    pcb_component_id: "pcb_component_0",
+    source_component_id: "source_component_0",
+    footprinter_string: "0402",
+  },
+  {
+    type: "cad_component",
+    cad_component_id: "cad_component_1",
+    position: {
+      x: -3,
+      y: 0,
+      z: 0.7,
+    },
+    rotation: {
+      x: 0,
+      y: 0,
+      z: 0,
+    },
+    pcb_component_id: "pcb_component_1",
+    source_component_id: "source_component_1",
+    footprinter_string: "0402",
+  },
+]

package/src/App.tsx

@@ -5,9 +5,20 @@ import "./components/CmdKMenu"
 import { ContextProviders } from "./ContextProviders"
 import React from "react"
 
+const FullPageLoader = () => (
+  <div className="fixed inset-0 flex items-center justify-center bg-white z-50">
+    <div className="w-48">
+      <div className="loading">
+        <div className="loading-bar"></div>
+      </div>
+    </div>
+  </div>
+)
+
 const lazyImport = (importFn: () => Promise<any>) =>
   lazy<ComponentType<any>>(async () => {
     try {
+      await new Promise((resolve) => setTimeout(resolve, 500))
       const module = await importFn()
 
       if (module.default) {
@@ -85,7 +96,7 @@ function App() {
   return (
     <ContextProviders>
       <ErrorBoundary>
-        <Suspense fallback={<div>Loading...</div>}>
+        <Suspense fallback={<FullPageLoader />}>
           <Switch>
             <Route path="/" component={LandingPage} />
             <Route path="/editor" component={EditorPage} />

package/src/components/CircuitJsonImportDialog.tsx

@@ -0,0 +1,186 @@
+import React, { useState } from "react"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { useAxios } from "@/hooks/use-axios"
+import { useToast } from "@/hooks/use-toast"
+import { useLocation } from "wouter"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { convertCircuitJsonToTscircuit } from "circuit-json-to-tscircuit"
+
+interface CircuitJsonImportDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+const isValidJSON = (code: string) => {
+  try {
+    JSON.parse(code)
+    return true
+  } catch {
+    return false
+  }
+}
+
+export function CircuitJsonImportDialog({
+  open,
+  onOpenChange,
+}: CircuitJsonImportDialogProps) {
+  const [circuitJson, setcircuitJson] = useState("")
+  const [file, setFile] = useState<File | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const axios = useAxios()
+  const { toast } = useToast()
+  const [, navigate] = useLocation()
+  const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
+  const session = useGlobalStore((s) => s.session)
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = e.target.files?.[0]
+    if (selectedFile && selectedFile.type === "application/json") {
+      setFile(selectedFile)
+    } else {
+      setError("Please select a valid JSON file.")
+    }
+  }
+
+  const handleImport = async () => {
+    let importedCircuitJson
+
+    if (file) {
+      try {
+        const fileText = await file.text()
+        importedCircuitJson = JSON.parse(fileText)
+      } catch (err) {
+        setError("Error reading JSON file. Please ensure it is valid.")
+        return
+      }
+    } else if (isValidJSON(circuitJson)) {
+      setIsLoading(true)
+      setError(null)
+      importedCircuitJson = JSON.parse(circuitJson)
+    } else {
+      toast({
+        title: "Invalid Input",
+        description: "Please provide a valid JSON content or file.",
+        variant: "destructive",
+      })
+      return
+    }
+    let tscircuit
+    try {
+      tscircuit = convertCircuitJsonToTscircuit(importedCircuitJson as any, {
+        componentName: "circuit",
+      })
+      console.info(tscircuit)
+    } catch {
+      toast({
+        title: "Import Failed",
+        description: "Invalid Circuit JSON was provided.",
+        variant: "destructive",
+      })
+      setIsLoading(false)
+      return
+    }
+
+    try {
+      const newSnippetData = {
+        snippet_type: importedCircuitJson.type ?? "board",
+        circuit_json: importedCircuitJson,
+        code: tscircuit,
+      }
+      const response = await axios
+        .post("/snippets/create", newSnippetData)
+        .catch((e) => e)
+      const { snippet, message } = response.data
+      if (message) {
+        setError(message)
+        setIsLoading(false)
+        return
+      }
+      toast({
+        title: "Import Successful",
+        description: "Circuit Json has been imported successfully.",
+      })
+      onOpenChange(false)
+      navigate(`/editor?snippet_id=${snippet.snippet_id}`)
+    } catch (error) {
+      console.error("Error importing Circuit Json:", error)
+      toast({
+        title: "Import Failed",
+        description: "Failed to import the Circuit Json. Please try again.",
+        variant: "destructive",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Import Circuit JSON</DialogTitle>
+        </DialogHeader>
+        <div className="pb-4">
+          <Textarea
+            className="mt-3"
+            placeholder="Paste the Circuit JSON."
+            value={circuitJson}
+            onChange={(e) => setcircuitJson(e.target.value)}
+            disabled={!!file}
+          />
+          <div className="mt-4 flex flex-col gap-2">
+            <label
+              htmlFor="file-input"
+              className="block text-sm font-medium text-gray-700"
+            >
+              Upload JSON File
+            </label>
+            <div className="flex items-center gap-4">
+              <input
+                id="file-input"
+                type="file"
+                accept="application/json"
+                onChange={handleFileChange}
+                className="hidden" // Hide the default file input
+              />
+              <label
+                htmlFor="file-input"
+                className="px-4 py-2 bg-slate-900 text-slate-50 rounded-lg shadow cursor-pointer hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90 transition-all duration-200"
+              >
+                Choose File
+              </label>
+            </div>
+            {file && (
+              <p className="text-sm text-gray-600">
+                <span className="font-medium text-gray-900">
+                  Selected file:
+                </span>{" "}
+                {file.name}
+              </p>
+            )}
+          </div>
+
+          {error && <p className="bg-red-100 p-2 mt-2 pre-wrap">{error}</p>}
+        </div>
+        <DialogFooter>
+          <Button onClick={handleImport} disabled={isLoading || !isLoggedIn}>
+            {!isLoggedIn
+              ? "Must be logged in for JSON import"
+              : isLoading
+                ? "Importing..."
+                : "Import"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}