@tscircuit/fake-snippets 0.0.66 → 0.0.68

package/src/components/ViewSnippetSidebar.tsx

@@ -1,162 +0,0 @@
-import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
-import { useCurrentSnippet } from "@/hooks/use-current-snippet"
-import { useToast } from "@/hooks/use-toast"
-import { cn } from "@/lib/utils"
-import { AtSign, Bot, Clock, Code, File, GitFork, Package } from "lucide-react"
-import { useFilesDialog } from "./dialogs/files-dialog"
-import { PrefetchPageLink } from "./PrefetchPageLink"
-
-export default function ViewSnippetSidebar({
-  className,
-}: {
-  className?: string
-}) {
-  const { snippet } = useCurrentSnippet()
-  const { toast } = useToast()
-  const { Dialog: FilesDialog, openDialog: openFilesDialog } = useFilesDialog()
-  const { copyToClipboard } = useCopyToClipboard()
-
-  return (
-    <div
-      className={cn(
-        "w-64 h-full bg-gray-100 text-gray-700 flex flex-col flex-shrink-0",
-        "hidden sm:block h-screen sticky top-0",
-        className,
-      )}
-    >
-      <nav className="flex-grow overflow-y-auto">
-        <ul className="p-2 space-y-2">
-          {[
-            {
-              icon: <Code className="w-5 h-5" />,
-              label: "Edit Code",
-              href: `/editor?snippet_id=${snippet?.snippet_id}`,
-            },
-            {
-              icon: <Bot className="w-5 h-5" />,
-              label: "Edit with AI",
-              badge: "AI",
-              href: `/ai?snippet_id=${snippet?.snippet_id}`,
-            },
-            // {
-            //   icon: <GitHubLogoIcon className="w-5 h-5" />,
-            //   label: "Github",
-            // },
-            {
-              icon: <GitFork className="w-5 h-5" />,
-              label: "Forks",
-              notImplemented: true,
-            },
-            {
-              icon: <AtSign className="w-5 h-5" />,
-              label: "References",
-              notImplemented: true,
-            },
-            {
-              icon: <Package className="w-5 h-5" />,
-              label: "Dependencies",
-              notImplemented: true,
-            },
-            {
-              icon: <Clock className="w-5 h-5" />,
-              label: "Versions",
-              notImplemented: true,
-            },
-            {
-              icon: <File className="w-5 h-5" />,
-              label: "Files",
-              onClick: () => {
-                if (snippet) {
-                  openFilesDialog()
-                }
-              },
-            },
-            // { icon: <Settings className="w-5 h-5" />, label: "Settings" },
-          ].map((item, index) => (
-            <li key={index}>
-              <PrefetchPageLink
-                href={item.href ?? "#"}
-                onClick={
-                  item.notImplemented
-                    ? () => {
-                        toast({
-                          title: "Not Implemented!",
-                          description: (
-                            <div>
-                              The {item.label} selection is not implemented yet.
-                              Help us out!{" "}
-                              <a
-                                className="text-blue-500 hover:underline font-semibold"
-                                href="https://github.com/tscircuit/tscircuit.com"
-                              >
-                                Check out our Github
-                              </a>
-                            </div>
-                          ),
-                        })
-                      }
-                    : item.onClick
-                }
-                className="flex items-center gap-3 px-2 py-1.5 hover:bg-gray-200 rounded-md"
-              >
-                {item.icon}
-                <span className="text-sm">{item.label}</span>
-                {item.badge && (
-                  <span className="ml-auto bg-blue-500 text-white text-xs px-1.5 py-0.5 rounded">
-                    {item.badge}
-                  </span>
-                )}
-              </PrefetchPageLink>
-            </li>
-          ))}
-        </ul>
-      </nav>
-      <div className="p-4 border-t border-gray-200 space-y-4">
-        <div className="space-y-1">
-          <div className="text-xs font-medium">Copy embed code</div>
-          <div
-            className="text-[0.5em] p-2 rounded-sm bg-blue-50 border border-blue-200 cursor-pointer font-mono whitespace-nowrap overflow-hidden text-ellipsis"
-            onClick={() => {
-              const embedCode = `<iframe src="${window.location.origin}/preview?snippet_id=${snippet?.snippet_id}" width="100%" height="500" frameborder="0"></iframe>`
-              navigator.clipboard.writeText(embedCode)
-              toast({
-                title: "Copied!",
-                description: "Embed code copied to clipboard",
-              })
-            }}
-          >
-            {`<iframe src="${window.location.origin}/preview?snippet_id=${snippet?.snippet_id}" width="100%" height="500" frameborder="0"></iframe>`}
-          </div>
-        </div>
-        <div className="space-y-1">
-          <div className="text-xs font-medium">Copy import code</div>
-          <div
-            className="text-[0.5em] p-2 rounded-sm bg-blue-50 border border-blue-200 cursor-pointer font-mono whitespace-nowrap overflow-hidden text-ellipsis"
-            onClick={() =>
-              copyToClipboard(
-                `import CircuitModule from "@tsci/${snippet?.owner_name}.${snippet?.unscoped_name}"`,
-              )
-            }
-          >
-            import CircuitModule from "@tsci/{snippet?.owner_name}.
-            {snippet?.unscoped_name}"
-          </div>
-        </div>
-        <div className="space-y-1">
-          <div className="text-xs font-medium">Copy install command</div>
-          <div
-            className="text-[0.5em] p-2 rounded-sm bg-blue-50 border border-blue-200 cursor-pointer font-mono whitespace-nowrap overflow-hidden text-ellipsis"
-            onClick={() =>
-              copyToClipboard(
-                `tsci add @tsci/${snippet?.owner_name}.${snippet?.unscoped_name}`,
-              )
-            }
-          >
-            tsci add @tsci/{snippet?.owner_name}.{snippet?.unscoped_name}
-          </div>
-        </div>
-      </div>
-      {snippet && <FilesDialog snippetId={snippet.snippet_id} />}
-    </div>
-  )
-}

package/src/components/dialogs/create-order-dialog.tsx

@@ -1,146 +0,0 @@
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
-import { Button } from "../ui/button"
-import { Checkbox } from "../ui/checkbox"
-import { useState, useEffect } from "react"
-import { createUseDialog } from "./create-use-dialog"
-import { useAxios } from "@/hooks/use-axios"
-import { useToast } from "@/hooks/use-toast"
-import { useQueryClient } from "react-query"
-
-export const CreateOrderDialog = ({
-  open,
-  onOpenChange,
-}: {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-}) => {
-  const axios = useAxios()
-  const { toast } = useToast()
-  const qc = useQueryClient()
-  const [pending, setPending] = useState(false)
-  const [checkpoints, setCheckpoints] = useState({
-    shipping: false,
-    errors: false,
-    parts: false,
-  })
-
-  useEffect(() => {
-    if (open) {
-      validateCheckpoints()
-    }
-  }, [open])
-
-  const validateCheckpoints = async () => {
-    try {
-      // Placeholder: Check if shipping information is in profile
-      const hasShippingInfo = await checkShippingInfo()
-
-      // Placeholder: Check if PCB has no errors
-      const hasNoErrors = await checkPCBErrors()
-
-      // Placeholder: Check if all parts are available at PCB fab
-      const allPartsAvailable = await checkPartsAvailability()
-
-      setCheckpoints({
-        shipping: hasShippingInfo,
-        errors: hasNoErrors,
-        parts: allPartsAvailable,
-      })
-    } catch (error) {
-      console.error("Error validating checkpoints:", error)
-    }
-  }
-
-  const checkShippingInfo = async () => {
-    // Placeholder: Implement actual check for shipping info
-    return true
-  }
-
-  const checkPCBErrors = async () => {
-    // Placeholder: Implement actual check for PCB errors
-    return true
-  }
-
-  const checkPartsAvailability = async () => {
-    // Placeholder: Implement actual check for parts availability
-    return true
-  }
-
-  const handleSubmit = async () => {
-    try {
-      setPending(true)
-      // TODO: Implement order submission logic
-      onOpenChange(false)
-      setPending(false)
-      toast({
-        title: "Order submitted",
-        description: "Your order has been successfully submitted.",
-      })
-      qc.invalidateQueries({ queryKey: ["orders"] })
-    } catch (error) {
-      console.error("Error submitting order:", error)
-      toast({
-        title: "Error",
-        description: "Failed to submit the order. Please try again.",
-        variant: "destructive",
-      })
-    } finally {
-      setPending(false)
-    }
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Create Order</DialogTitle>
-        </DialogHeader>
-        <p className="text-sm text-gray-500 mb-4">
-          Order the circuit board fully assembled from a PCB fabricator
-        </p>
-        <div className="space-y-4">
-          <div className="flex items-center space-x-2">
-            <Checkbox id="shipping" checked={checkpoints.shipping} />
-            <label
-              htmlFor="shipping"
-              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-            >
-              Shipping Information in Profile
-            </label>
-          </div>
-          <div className="flex items-center space-x-2">
-            <Checkbox id="errors" checked={checkpoints.errors} />
-            <label
-              htmlFor="errors"
-              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-            >
-              PCB Has No Errors
-            </label>
-          </div>
-          <div className="flex items-center space-x-2">
-            <Checkbox id="parts" checked={checkpoints.parts} />
-            <label
-              htmlFor="parts"
-              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-            >
-              All parts available at PCB fabricator
-            </label>
-          </div>
-        </div>
-        <div className="flex justify-end space-x-2 mt-4">
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button
-            onClick={handleSubmit}
-            disabled={pending || !Object.values(checkpoints).every(Boolean)}
-          >
-            {pending ? "Submitting..." : "Submit Order"}
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export const useCreateOrderDialog = createUseDialog(CreateOrderDialog)

package/src/hooks/use-compiled-tsx.ts

@@ -1,37 +0,0 @@
-import { useMemo } from "react"
-import * as Babel from "@babel/standalone"
-
-export const safeCompileTsx = (
-  code: string,
-):
-  | { success: true; compiledTsx: string; error?: undefined }
-  | { success: false; error: Error; compiledTsx?: undefined } => {
-  try {
-    return {
-      success: true,
-      compiledTsx:
-        Babel.transform(code, {
-          presets: ["react", "typescript"],
-          plugins: ["transform-modules-commonjs"],
-          filename: "virtual.tsx",
-        }).code || "",
-    }
-  } catch (error: any) {
-    return { success: false, error }
-  }
-}
-
-export const useCompiledTsx = (
-  code?: string,
-  { isStreaming = false }: { isStreaming?: boolean } = {},
-) => {
-  return useMemo(() => {
-    if (!code) return ""
-    if (isStreaming) return ""
-    const result = safeCompileTsx(code)
-    if (result.success) {
-      return result.compiledTsx
-    }
-    return `Error: ${result.error.message}`
-  }, [code, isStreaming])
-}

package/src/hooks/use-run-tsx/construct-circuit.tsx

@@ -1,62 +0,0 @@
-import { Circuit } from "@tscircuit/core"
-import { useEffect, useMemo, useState } from "react"
-import * as React from "react"
-import { useCompiledTsx } from "../use-compiled-tsx"
-import { createJSCADRenderer } from "jscad-fiber"
-import { jscadPlanner } from "jscad-planner"
-
-export const constructCircuit = ({
-  UserElm,
-  type,
-  circuitDisplayName,
-}: {
-  UserElm: any
-  type: "board" | "footprint" | "package" | "model"
-  circuitDisplayName?: string
-}) => {
-  const circuit = new Circuit()
-
-  if (circuitDisplayName) {
-    circuit.name = circuitDisplayName
-  }
-
-  if (type === "board") {
-    circuit.add(<UserElm />)
-    // HACK: switch to selectOne when root fixes bug with selecting board
-    const board = circuit.root?.children[0]
-    // const board = circuit.selectOne("board")
-    if (board) {
-      board.setProps({
-        ...board.props,
-      })
-    }
-  } else if (type === "package") {
-    circuit.add(
-      <board width="50mm" height="50mm">
-        <UserElm name="U1" />
-      </board>,
-    )
-  } else if (type === "footprint") {
-    circuit.add(
-      <board width="10mm" height="10mm">
-        <chip name="U1" footprint={<UserElm />} />
-      </board>,
-    )
-  } else if (type === "model") {
-    const jscadGeoms: any[] = []
-    const { createJSCADRoot } = createJSCADRenderer(jscadPlanner as any)
-    const jscadRoot = createJSCADRoot(jscadGeoms)
-    jscadRoot.render(<UserElm />)
-    circuit.add(
-      <board width="10mm" height="10mm">
-        <chip
-          name="U1"
-          cadModel={{
-            jscad: jscadGeoms[0],
-          }}
-        />
-      </board>,
-    )
-  }
-  return circuit
-}

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

@@ -1,256 +0,0 @@
-import * as tscircuitCore from "@tscircuit/core"
-import { getImportsFromCode } from "@tscircuit/prompt-benchmarks/code-runner-utils"
-import type { AnyCircuitElement } from "circuit-json"
-import * as jscadFiber from "jscad-fiber"
-import * as React from "react"
-import * as tscircuitMathUtils from "@tscircuit/math-utils"
-import { useEffect, useMemo, useReducer, useRef, useState } from "react"
-import { safeCompileTsx } from "../use-compiled-tsx"
-import { useSnippetsBaseApiUrl } from "../use-snippets-base-api-url"
-import { constructCircuit } from "./construct-circuit"
-import { evalCompiledJs } from "./eval-compiled-js"
-import { getSyntaxError } from "@/lib/utils/getSyntaxError"
-
-type RunTsxResult = {
-  compiledModule: any
-  message: string
-  circuitJson: AnyCircuitElement[] | null
-  compiledJs?: string
-  isRunningCode: boolean
-}
-
-/**
- * @deprecated will be removed in future version, use @tscircuit/eval or
- * @tscircuit/runframe
- */
-export const useRunTsx = ({
-  code,
-  userImports,
-  type,
-  isStreaming = false,
-  circuitDisplayName,
-}: {
-  code?: string
-  userImports?: Record<string, object>
-  type?: "board" | "footprint" | "package" | "model"
-  isStreaming?: boolean
-  circuitDisplayName?: string
-} = {}): RunTsxResult & {
-  circuitJsonKey: string
-  triggerRunTsx: () => void
-  tsxRunTriggerCount: number
-} => {
-  type ??= "board"
-  const [tsxRunTriggerCount, incTsxRunTriggerCount] = useReducer(
-    (c) => c + 1,
-    0,
-  )
-  const [tsxResult, setTsxResult] = useState<RunTsxResult>({
-    compiledModule: null,
-    message: "",
-    circuitJson: null,
-    isRunningCode: false,
-  })
-  const apiBaseUrl = useSnippetsBaseApiUrl()
-  const preSuppliedImportsRef = useRef<Record<string, any>>({})
-
-  useEffect(() => {
-    if (tsxRunTriggerCount === 0) return
-    if (isStreaming) {
-      setTsxResult({
-        compiledModule: null,
-        message: "",
-        circuitJson: null,
-        isRunningCode: false,
-      })
-    }
-    if (!code) return
-    const syntaxError = getSyntaxError(code)
-    if (syntaxError) {
-      setTsxResult({
-        compiledModule: null,
-        message: syntaxError,
-        circuitJson: null,
-        isRunningCode: false,
-      })
-      return
-    }
-    async function run() {
-      setTsxResult({
-        compiledModule: null,
-        message: "",
-        circuitJson: null,
-        isRunningCode: true,
-      })
-
-      const userCodeTsciImports = getImportsFromCode(code!).filter((imp) =>
-        imp.startsWith("@tsci/"),
-      )
-
-      const preSuppliedImports: Record<string, any> =
-        preSuppliedImportsRef.current
-
-      for (const [importName, importValue] of Object.entries(
-        userImports ?? {},
-      )) {
-        preSuppliedImports[importName] = importValue
-      }
-
-      const __tscircuit_require = (name: string) => {
-        if (
-          name === "./manual-edits.json" &&
-          preSuppliedImports["./manual-edits.json"] === ""
-        ) {
-          return preSuppliedImports["./manual-edits.json"]
-        }
-        if (!preSuppliedImports[name]) {
-          throw new Error(
-            `Import "${name}" not found (imports available: ${Object.keys(preSuppliedImports).join(",")})`,
-          )
-        }
-        return preSuppliedImports[name]
-      }
-      ;(globalThis as any).__tscircuit_require = __tscircuit_require
-      preSuppliedImports["@tscircuit/core"] = tscircuitCore
-      preSuppliedImports["tscircuit"] = tscircuitCore
-      preSuppliedImports["@tscircuit/math-utils"] = tscircuitMathUtils
-      preSuppliedImports["react"] = React
-      preSuppliedImports["jscad-fiber"] = jscadFiber
-      globalThis.React = React
-
-      async function addImport(importName: string, depth = 0) {
-        if (!importName.startsWith("@tsci/")) return
-        if (preSuppliedImports[importName]) return
-        if (depth > 5) {
-          console.log("Max depth for imports reached")
-          return
-        }
-
-        const fullSnippetName = importName
-          .replace("@tsci/", "")
-          .replace(".", "/")
-        const { snippet: importedSnippet, error } = await fetch(
-          `${apiBaseUrl}/snippets/get?name=${fullSnippetName}`,
-        )
-          .then((res) => res.json())
-          .catch((e) => ({ error: e }))
-
-        if (error) {
-          console.error("Error fetching import", importName, error)
-          return
-        }
-
-        const { compiled_js, code } = importedSnippet
-
-        const importNames = getImportsFromCode(code!)
-
-        for (const importName of importNames) {
-          if (!preSuppliedImports[importName]) {
-            await addImport(importName, depth + 1)
-          }
-        }
-
-        try {
-          preSuppliedImports[importName] = evalCompiledJs(compiled_js).exports
-        } catch (e) {
-          console.error("Error importing snippet", e)
-        }
-      }
-
-      for (const userCodeTsciImport of userCodeTsciImports) {
-        await addImport(userCodeTsciImport)
-      }
-
-      const { success, compiledTsx: compiledJs, error } = safeCompileTsx(code!)
-
-      if (!success) {
-        setTsxResult({
-          compiledModule: null,
-          message: `Compile Error: ${error.message}`,
-          circuitJson: null,
-          isRunningCode: false,
-        })
-      }
-
-      try {
-        const module = evalCompiledJs(compiledJs!)
-
-        const componentExportKeys = Object.keys(module.exports).filter(
-          (key) => !key.startsWith("use"),
-        )
-
-        if (componentExportKeys.length > 1) {
-          throw new Error(
-            `Too many exports, only export one component. You exported: ${JSON.stringify(Object.keys(module.exports))}`,
-          )
-        }
-
-        const primaryKey = componentExportKeys[0]
-
-        const UserElm = (props: any) =>
-          React.createElement(module.exports[primaryKey], props)
-
-        try {
-          const circuit = constructCircuit({
-            UserElm,
-            type: type as any,
-            circuitDisplayName,
-          })
-          const renderPromise = circuit.renderUntilSettled()
-
-          // wait one tick to allow a single render pass
-          await new Promise((resolve) => setTimeout(resolve, 1))
-
-          let circuitJson = circuit.getCircuitJson()
-          setTsxResult({
-            compiledModule: module,
-            compiledJs,
-            message: "",
-            circuitJson: circuitJson as AnyCircuitElement[],
-            isRunningCode: true,
-          })
-
-          await renderPromise
-
-          circuitJson = circuit.getCircuitJson()
-          setTsxResult({
-            compiledModule: module,
-            compiledJs,
-            message: "",
-            circuitJson: circuitJson as AnyCircuitElement[],
-            isRunningCode: false,
-          })
-        } catch (error: any) {
-          console.error("Evaluation error:", error)
-          setTsxResult({
-            compiledModule: module,
-            message: `Render Error: ${error.message}`,
-            circuitJson: null,
-            isRunningCode: false,
-          })
-        }
-      } catch (error: any) {
-        console.error("Evaluation error:", error)
-        setTsxResult({
-          compiledModule: null,
-          message: `Eval Error: ${error.message}\n\n${error.stack}`,
-          circuitJson: null,
-          isRunningCode: false,
-        })
-      }
-    }
-    run()
-  }, [tsxRunTriggerCount])
-
-  const circuitJsonKey: string = useMemo(() => {
-    if (!tsxResult.circuitJson) return ""
-    return `cj-${Math.random().toString(36).substring(2, 15)}`
-  }, [tsxResult.circuitJson, tsxResult.circuitJson?.length])
-
-  return {
-    ...tsxResult,
-    circuitJsonKey: circuitJsonKey,
-    triggerRunTsx: incTsxRunTriggerCount,
-    tsxRunTriggerCount,
-  }
-}