fixed conflicts and format

tscircuit · Oct 31, 2024 · 3dfb23d · 3dfb23d
2 parents c4e5b60 + 811832e
commit 3dfb23d
Show file tree

Hide file tree

Showing 14 changed files with 593 additions and 353 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -57,8 +57,9 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@tscircuit/3d-viewer": "^0.0.32",
+    "@tscircuit/3d-viewer": "^0.0.33",
     "@tscircuit/footprinter": "^0.0.70",
+    "@tscircuit/layout": "^0.0.29",
     "@tscircuit/mm": "^0.0.8",
     "@tscircuit/pcb-viewer": "^1.10.5",
     "@tscircuit/props": "^0.0.77",
@@ -78,7 +79,7 @@
     "codemirror": "^6.0.1",
     "country-list": "^2.3.0",
     "date-fns": "^4.1.0",
-    "easyeda": "^0.0.51",
+    "easyeda": "^0.0.62",
     "embla-carousel-react": "^8.3.0",
     "fflate": "^0.8.2",
     "file-saver": "^2.0.5",
@@ -110,7 +111,7 @@
     "@babel/standalone": "^7.25.6",
     "@biomejs/biome": "^1.9.2",
     "@playwright/test": "^1.48.0",
-    "@tscircuit/core": "^0.0.133",
+    "@tscircuit/core": "^0.0.136",
     "@tscircuit/prompt-benchmarks": "^0.0.14",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",

diff --git a/src/components/CodeAndPreview.tsx b/src/components/CodeAndPreview.tsx
@@ -1,54 +1,54 @@
-import { useEffect, useMemo, useState } from "react";
-import { CodeEditor } from "@/components/CodeEditor";
-import { decodeUrlHashToText } from "@/lib/decodeUrlHashToText";
-import { useRunTsx } from "@/hooks/use-run-tsx";
-import EditorNav from "./EditorNav";
-import { Snippet } from "fake-snippets-api/lib/db/schema";
-import { useAxios } from "@/hooks/use-axios";
-import { useToast } from "@/hooks/use-toast";
-import { useMutation, useQueryClient } from "react-query";
-import { Loader2 } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { PreviewContent } from "./PreviewContent";
-import { useGlobalStore } from "@/hooks/use-global-store";
-import { useUrlParams } from "@/hooks/use-url-params";
-import { getSnippetTemplate } from "@/lib/get-snippet-template";
-import "@/prettier";
-import { useCreateSnippetMutation } from "@/hooks/use-create-snippet-mutation";
+import { CodeEditor } from "@/components/CodeEditor"
+import { useAxios } from "@/hooks/use-axios"
+import { useCreateSnippetMutation } from "@/hooks/use-create-snippet-mutation"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { useRunTsx } from "@/hooks/use-run-tsx"
+import { useToast } from "@/hooks/use-toast"
+import { useUrlParams } from "@/hooks/use-url-params"
+import { decodeUrlHashToText } from "@/lib/decodeUrlHashToText"
+import { getSnippetTemplate } from "@/lib/get-snippet-template"
+import { cn } from "@/lib/utils"
+import "@/prettier"
+import type { Snippet } from "fake-snippets-api/lib/db/schema"
+import { Loader2 } from "lucide-react"
+import { useEffect, useMemo, useState } from "react"
+import { useMutation, useQueryClient } from "react-query"
+import EditorNav from "./EditorNav"
+import { PreviewContent } from "./PreviewContent"
 
 interface Props {
-  snippet?: Snippet | null;
+  snippet?: Snippet | null
 }
 
 export function CodeAndPreview({ snippet }: Props) {
-  const axios = useAxios();
-  const isLoggedIn = useGlobalStore((s) => Boolean(s.session));
-  const urlParams = useUrlParams();
+  const axios = useAxios()
+  const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
+  const urlParams = useUrlParams()
   const templateFromUrl = useMemo(
     () => getSnippetTemplate(urlParams.template),
-    []
-  );
+    [],
+  )
   const defaultCode = useMemo(() => {
     return (
       decodeUrlHashToText(window.location.toString()) ??
       snippet?.code ??
       templateFromUrl.code
-    );
-  }, []);
-  const [manualEditsText, setManualEditsText] = useState("");
-  const [code, setCode] = useState(defaultCode ?? "");
-  const [dts, setDts] = useState("");
-  const [showPreview, setShowPreview] = useState(true);
+    )
+  }, [])
+  const [manualEditsJson, setManualEditsJson] = useState("")
+  const [code, setCode] = useState(defaultCode ?? "")
+  const [dts, setDts] = useState("")
+  const [showPreview, setShowPreview] = useState(true)
   const snippetType: "board" | "package" | "model" | "footprint" =
-    snippet?.snippet_type ?? (templateFromUrl.type as any);
+    snippet?.snippet_type ?? (templateFromUrl.type as any)
 
   useEffect(() => {
     if (snippet?.code) {
-      setCode(snippet.code);
+      setCode(snippet.code)
     }
-  }, [Boolean(snippet)]);
+  }, [Boolean(snippet)])
 
-  const { toast } = useToast();
+  const { toast } = useToast()
 
   const {
     message,
@@ -59,51 +59,51 @@ export function CodeAndPreview({ snippet }: Props) {
   } = useRunTsx({
     code,
     type: snippetType,
-  });
-  const qc = useQueryClient();
+  })
+  const qc = useQueryClient()
 
   const updateSnippetMutation = useMutation({
     mutationFn: async () => {
-      if (!snippet) throw new Error("No snippet to update");
+      if (!snippet) throw new Error("No snippet to update")
       const response = await axios.post("/snippets/update", {
         snippet_id: snippet.snippet_id,
         code: code,
         dts: dts,
         compiled_js: compiledJs,
-      });
+      })
       if (response.status !== 200) {
-        throw new Error("Failed to save snippet");
+        throw new Error("Failed to save snippet")
       }
-      return response.data;
+      return response.data
     },
     onSuccess: () => {
-      qc.invalidateQueries({ queryKey: ["snippets", snippet?.snippet_id] });
+      qc.invalidateQueries({ queryKey: ["snippets", snippet?.snippet_id] })
       toast({
         title: "Snippet saved",
         description: "Your changes have been saved successfully.",
-      });
+      })
     },
     onError: (error) => {
-      console.error("Error saving snippet:", error);
+      console.error("Error saving snippet:", error)
       toast({
         title: "Error",
         description: "Failed to save the snippet. Please try again.",
         variant: "destructive",
-      });
+      })
     },
-  });
+  })
 
-  const createSnippetMutation = useCreateSnippetMutation();
+  const createSnippetMutation = useCreateSnippetMutation()
 
   const handleSave = () => {
     if (snippet) {
-      updateSnippetMutation.mutate();
+      updateSnippetMutation.mutate()
     } else {
-      createSnippetMutation.mutate({ code });
+      createSnippetMutation.mutate({ code })
     }
-  };
+  }
 
-  const hasUnsavedChanges = snippet?.code !== code;
+  const hasUnsavedChanges = snippet?.code !== code
 
   if (!snippet && (urlParams.snippet_id || urlParams.should_create_snippet)) {
     return (
@@ -113,7 +113,7 @@ export function CodeAndPreview({ snippet }: Props) {
           <Loader2 className="w-16 h-16 animate-spin text-gray-400" />
         </div>
       </div>
-    );
+    )
   }
 
   return (
@@ -133,16 +133,17 @@ export function CodeAndPreview({ snippet }: Props) {
         <div
           className={cn(
             "hidden flex-col md:flex border-r border-gray-200 bg-gray-50",
-            showPreview ? "w-full md:w-1/2" : "w-full flex"
+            showPreview ? "w-full md:w-1/2" : "w-full flex",
           )}
         >
           <CodeEditor
             initialCode={code}
+            manualEditsJson={manualEditsJson}
             onCodeChange={(newCode, filename) => {
               if (filename === "index.tsx") {
-                setCode(newCode);
+                setCode(newCode)
               } else if (filename === "manual-edits.json") {
-                setManualEditsText(newCode);
+                setManualEditsJson(newCode)
               }
             }}
             onDtsChange={(newDts) => setDts(newDts)}
@@ -157,9 +158,13 @@ export function CodeAndPreview({ snippet }: Props) {
             tsxRunTriggerCount={tsxRunTriggerCount}
             errorMessage={message}
             circuitJson={circuitJson}
+            manualEditsJson={manualEditsJson}
+            onManualEditsJsonChange={(newManualEditsJson) => {
+              setManualEditsJson(newManualEditsJson)
+            }}
           />
         )}
       </div>
     </div>
-  );
+  )
 }