@tscircuit/fake-snippets 0.0.66 → 0.0.68

package/src/hooks/use-save-snippet.ts

@@ -1,66 +0,0 @@
-import { Snippet } from "fake-snippets-api/lib/db/schema"
-import { useMutation } from "react-query"
-import { useAxios } from "./use-axios"
-import { safeCompileTsx } from "./use-compiled-tsx"
-import { useCurrentSnippetId } from "./use-current-snippet-id"
-
-export const useSaveSnippet = () => {
-  const axios = useAxios()
-
-  const { snippetId } = useCurrentSnippetId()
-
-  const saveSnippetMutation = useMutation<
-    Snippet,
-    Error,
-    { code: string; snippet_type: string; dts?: string; circuit_json?: any[] }
-  >({
-    mutationFn: async ({ code, snippet_type, dts, circuit_json }) => {
-      const compileResult = safeCompileTsx(code)
-
-      if (snippetId) {
-        const response = await axios.post("/snippets/update", {
-          snippet_id: snippetId,
-          code,
-          snippet_type,
-          compiled_js: compileResult.success
-            ? compileResult.compiledTsx
-            : undefined,
-          circuit_json: circuit_json,
-          dts,
-        })
-        return response.data.snippet
-      } else {
-        const response = await axios.post("/snippets/create", {
-          code,
-          snippet_type,
-          owner_name: "seveibar", // Replace with actual user name or fetch from user context
-          compiled_js: compileResult.success
-            ? compileResult.compiledTsx
-            : undefined,
-          dts,
-        })
-        return response.data.snippet
-      }
-    },
-  })
-
-  const saveSnippet = async (
-    code: string,
-    snippet_type: string,
-    dts?: string,
-    circuit_json?: any[],
-  ) => {
-    return saveSnippetMutation.mutateAsync({
-      code,
-      snippet_type,
-      dts,
-      circuit_json,
-    })
-  }
-
-  return {
-    saveSnippet,
-    isLoading: saveSnippetMutation.isLoading,
-    error: saveSnippetMutation.error,
-  }
-}

package/src/hooks/use-typecheck.ts

@@ -1,54 +0,0 @@
-// import * as ts from "typescript"
-
-// export function checkTypeScriptErrors(code: string): ts.Diagnostic[] {
-//   // Create a virtual TypeScript compiler
-//   const compilerOptions: ts.CompilerOptions = {
-//     noEmit: true,
-//     allowJs: true,
-//     checkJs: true,
-//     strict: true,
-//   }
-
-//   // Create a virtual file system
-//   const fileSystem = {
-//     "example.ts": code,
-//   }
-
-//   // Create a compiler host
-//   const compilerHost = ts.createCompilerHost(compilerOptions)
-//   compilerHost.getSourceFile = (fileName: string) => {
-//     return ts.createSourceFile(
-//       fileName,
-//       fileSystem[fileName] || "",
-//       ts.ScriptTarget.Latest,
-//     )
-//   }
-//   compilerHost.writeFile = () => {}
-//   compilerHost.getCurrentDirectory = () => "/"
-//   compilerHost.getDefaultLibFileName = () => "lib.d.ts"
-
-//   // Create a program
-//   const program = ts.createProgram(
-//     ["example.ts"],
-//     compilerOptions,
-//     compilerHost,
-//   )
-
-//   // Get the diagnostics (errors)
-//   const diagnostics = ts.getPreEmitDiagnostics(program)
-
-//   return diagnostics
-// }
-
-// // Example usage
-// const code = `
-// let x: number = "string"; // Type error
-// let y: string = 5; // Another type error
-// let z: number = 10; // No error
-// `
-
-// const errors = checkTypeScriptErrors(code)
-// console.log("Errors found:", errors.length)
-// errors.forEach((error) => {
-//   console.log(`Error on line ${error.start}: ${error.messageText}`)
-// })

package/src/lib/utils/getSyntaxError.ts

@@ -1,13 +0,0 @@
-import * as Babel from "@babel/standalone"
-
-export function getSyntaxError(code: string): string | null {
-  try {
-    Babel.transform(code, {
-      filename: "index.tsx",
-      presets: ["react", "typescript"],
-    })
-    return null
-  } catch (error: unknown) {
-    return (error as Error).message
-  }
-}

package/src/pages/ai.tsx

@@ -1,92 +0,0 @@
-import AIChatInterface from "@/components/AiChatInterface"
-import Header from "@/components/Header"
-import { PreviewContent } from "@/components/PreviewContent"
-import { useRunTsx } from "@/hooks/use-run-tsx"
-import { useSaveSnippet } from "@/hooks/use-save-snippet"
-import { useSnippet } from "@/hooks/use-snippet"
-import { useToast } from "@/hooks/use-toast"
-import { useEffect, useState } from "react"
-import { useLocation } from "wouter"
-
-export const AiPage = () => {
-  const [code, setCode] = useState("")
-  const [manualEditsFileContent, setManualEditsFileContent] = useState("")
-  const [dts, setDts] = useState("")
-  const [isStreaming, setIsStreaming] = useState(false)
-  const { saveSnippet, isLoading: isSaving } = useSaveSnippet()
-  const snippetIdFromUrl = new URLSearchParams(window.location.search).get(
-    "snippet_id",
-  )
-  const [snippetId, setSnippetId] = useState<string | null>(snippetIdFromUrl)
-  const { data: snippet } = useSnippet(snippetId)
-  const { toast } = useToast()
-  const [, navigate] = useLocation()
-  const {
-    message: errorMessage,
-    circuitJson,
-    triggerRunTsx,
-    isRunningCode,
-    tsxRunTriggerCount,
-    circuitJsonKey,
-  } = useRunTsx({
-    code,
-    type: "board",
-    isStreaming,
-    circuitDisplayName: snippet?.name,
-  })
-
-  useEffect(() => {
-    if (!code && snippet && snippetIdFromUrl) {
-      setCode(snippet.code)
-    }
-  }, [code, snippet])
-
-  const hasUnsavedChanges = snippet?.code !== code
-
-  return (
-    <div>
-      <Header />
-      <div className="flex bg-gray-100">
-        <div className="w-1/2">
-          <AIChatInterface
-            code={code}
-            hasUnsavedChanges={hasUnsavedChanges}
-            snippetId={snippet?.snippet_id}
-            onCodeChange={setCode}
-            errorMessage={errorMessage}
-            onStartStreaming={() => {
-              setIsStreaming(true)
-            }}
-            onStopStreaming={() => {
-              setIsStreaming(false)
-            }}
-          />
-        </div>
-        <div className="w-1/2">
-          <div className="p-4 h-full">
-            <PreviewContent
-              className="bg-white h-full p-4 rounded-lg shadow"
-              code={code}
-              isStreaming={isStreaming}
-              isRunningCode={isRunningCode}
-              onCodeChange={setCode}
-              onDtsChange={setDts}
-              showCodeTab
-              triggerRunTsx={triggerRunTsx}
-              errorMessage={errorMessage}
-              circuitJson={circuitJson}
-              circuitJsonKey={circuitJsonKey}
-              manualEditsFileContent={manualEditsFileContent}
-              onManualEditsFileContentChange={(
-                newManualEditsFileContent: string,
-              ) => {
-                setManualEditsFileContent(newManualEditsFileContent)
-              }}
-              tsxRunTriggerCount={tsxRunTriggerCount}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/pages/preview.tsx

@@ -1,44 +0,0 @@
-import { useSnippet } from "@/hooks/use-snippet"
-import { useUrlParams } from "@/hooks/use-url-params"
-import { CircuitJsonPreview } from "@tscircuit/runframe"
-import { Loader2 } from "lucide-react"
-
-export const PreviewPage = () => {
-  const urlParams = useUrlParams()
-  const snippetId = urlParams.snippet_id
-  const { data: snippet, isLoading, error } = useSnippet(snippetId)
-
-  if (isLoading) {
-    return (
-      <div className="w-full h-screen flex items-center justify-center">
-        <Loader2 className="w-8 h-8 animate-spin" />
-      </div>
-    )
-  }
-
-  if (error) {
-    return (
-      <div className="w-full h-screen flex items-center justify-center text-red-500">
-        Error loading snippet: {error.message}
-      </div>
-    )
-  }
-
-  if (!snippet) {
-    return (
-      <div className="w-full h-screen flex items-center justify-center text-gray-500">
-        Snippet not found
-      </div>
-    )
-  }
-
-  if (!snippet.circuit_json) {
-    return (
-      <div className="w-full h-screen flex items-center justify-center text-gray-500">
-        No circuit data available
-      </div>
-    )
-  }
-
-  return <CircuitJsonPreview circuitJson={snippet.circuit_json as any} />
-}

package/src/pages/view-order.tsx

@@ -1,111 +0,0 @@
-import React from "react"
-import { useQuery } from "react-query"
-import { useAxios } from "@/hooks/use-axios"
-import Header from "@/components/Header"
-import Footer from "@/components/Footer"
-import { Order } from "fake-snippets-api/lib/db/schema"
-import { Link, useParams } from "wouter"
-import { Button } from "@/components/ui/button"
-import { OrderPreviewContent } from "@/components/OrderPreviewContent"
-import { AnyCircuitElement } from "circuit-json"
-
-export const ViewOrderPage = () => {
-  const { orderId } = useParams()
-  const axios = useAxios()
-
-  const {
-    data: order,
-    isLoading,
-    error,
-  } = useQuery<Order>(
-    ["order", orderId],
-    async () => {
-      const response = await axios.get(`/orders/get?order_id=${orderId}`)
-      return response.data.order
-    },
-    {
-      enabled: !!orderId,
-    },
-  )
-
-  if (isLoading) {
-    return <div>Loading order...</div>
-  }
-
-  if (error) {
-    return <div>Error loading order: {(error as Error).message}</div>
-  }
-
-  if (!order) {
-    return <div>Order not found</div>
-  }
-
-  return (
-    <div>
-      <Header />
-      <div className="container mx-auto px-4 py-4">
-        <h1 className="text-3xl font-bold mb-6">Order Details</h1>
-        <div className="flex flex-col md:flex-row gap-6">
-          <div className="w-full md:w-1/2 md:max-w-[50%]">
-            <div className="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
-              <div className="px-4 py-5 sm:px-6">
-                <h3 className="text-lg leading-6 font-medium text-gray-900">
-                  Order #{order.order_id}
-                </h3>
-                <p className="mt-1 max-w-2xl text-sm text-gray-500">
-                  Created at: {new Date(order.created_at).toLocaleString()}
-                </p>
-              </div>
-              <div className="border-t border-gray-200">
-                <dl>
-                  <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                    <dt className="text-sm font-medium text-gray-500">
-                      Status
-                    </dt>
-                    <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                      {order.is_running ? "Running" : "Finished"}
-                    </dd>
-                  </div>
-                  <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                    <dt className="text-sm font-medium text-gray-500">
-                      Started at
-                    </dt>
-                    <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                      {order.started_at
-                        ? new Date(order.started_at).toLocaleString()
-                        : "Not started"}
-                    </dd>
-                  </div>
-                  <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                    <dt className="text-sm font-medium text-gray-500">
-                      Pending Validation
-                    </dt>
-                    <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                      {order.completed_at
-                        ? new Date(order.completed_at).toLocaleString()
-                        : "Not finished"}
-                    </dd>
-                  </div>
-                </dl>
-              </div>
-            </div>
-            <div className="mt-6">
-              <Link href={`/my-orders`}>
-                <Button variant="outline" onClick={() => window.history.back()}>
-                  Back to Orders
-                </Button>
-              </Link>
-            </div>
-          </div>
-          <div className="w-full md:w-1/2 md:max-w-[50%]">
-            <OrderPreviewContent
-              circuitJson={order.circuit_json as AnyCircuitElement[]}
-              className="h-[calc(100vh-200px)]"
-            />
-          </div>
-        </div>
-      </div>
-      <Footer />
-    </div>
-  )
-}

package/src/pages/view-snippet.tsx

@@ -1,166 +0,0 @@
-import { DownloadButtonAndMenu } from "@/components/DownloadButtonAndMenu"
-import Header from "@/components/Header"
-import { Button } from "@/components/ui/button"
-import ViewSnippetHeader from "@/components/ViewSnippetHeader"
-import ViewSnippetSidebar from "@/components/ViewSnippetSidebar"
-import { useCurrentSnippet } from "@/hooks/use-current-snippet"
-import { useRunTsx } from "@/hooks/use-run-tsx"
-import { encodeTextToUrlHash } from "@/lib/encodeTextToUrlHash"
-import { Share } from "lucide-react"
-import { useParams } from "wouter"
-import { PreviewContent } from "@/components/PreviewContent"
-import Footer from "@/components/Footer"
-import { Helmet } from "react-helmet-async"
-import type { AnyCircuitElement } from "circuit-json"
-import StaticViewSnippetHeader from "../components/StaticViewSnippetHeader"
-import StaticPreviewContent from "../components/StaticPreviewContent"
-import StaticViewSnippetSidebar from "../components/StaticViewSnippetSidebar"
-import { useEffect, useMemo, useState } from "react"
-import { parseJsonOrNull } from "@/lib/utils/parseJsonOrNull"
-
-export const ViewSnippetPage = () => {
-  const { author, snippetName } = useParams()
-  const { snippet, error: snippetError, isLoading } = useCurrentSnippet()
-
-  const [manualEditsFileContent, setManualEditsFileContent] = useState<
-    string | null
-  >(null)
-
-  useEffect(() => {
-    if (snippet?.manual_edits_json_content) {
-      setManualEditsFileContent(snippet.manual_edits_json_content ?? "")
-    }
-  }, [Boolean(snippet?.manual_edits_json_content)])
-
-  const userImports = useMemo(
-    () => ({
-      "./manual-edits.json": parseJsonOrNull(manualEditsFileContent) ?? "",
-    }),
-    [manualEditsFileContent],
-  )
-
-  const {
-    circuitJson: tsxResultCircuitJson,
-    message,
-    triggerRunTsx,
-    isRunningCode,
-    tsxRunTriggerCount,
-    circuitJsonKey: tsxResultCircuitJsonKey,
-  } = useRunTsx({
-    code: snippet?.code ?? "",
-    type: snippet?.snippet_type,
-    userImports,
-    circuitDisplayName: snippet?.name,
-  })
-
-  const circuitJsonForPreview = tsxResultCircuitJson ?? snippet?.circuit_json
-  const circuitJsonKeyForPreview = tsxResultCircuitJson
-    ? tsxResultCircuitJsonKey
-    : snippet?.circuit_json
-      ? "snippet"
-      : ""
-
-  return (
-    <>
-      <Helmet>
-        <title>{`${author}/${snippetName} - tscircuit`}</title>
-        {snippet && (
-          <>
-            <meta
-              property="og:title"
-              content={`${author}/${snippetName} - tscircuit`}
-            />
-            <meta
-              property="og:image"
-              content={`https://registry-api.tscircuit.com/snippets/images/${author}/${snippetName}/pcb.png`}
-            />
-            <meta name="twitter:card" content="summary_large_image" />
-            <meta
-              name="twitter:image"
-              content={`https://registry-api.tscircuit.com/snippets/images/${author}/${snippetName}/pcb.png`}
-            />
-          </>
-        )}
-      </Helmet>
-      <div>
-        <Header />
-        {isLoading && (
-          <>
-            <StaticViewSnippetHeader
-              author={author as string}
-              snippetName={snippetName as string}
-            />
-            <div className="flex flex-row min-h-full">
-              <div className="flex-grow overflow-auto">
-                <StaticPreviewContent />
-              </div>
-              <StaticViewSnippetSidebar />
-            </div>
-          </>
-        )}
-        {snippetError && snippetError.status === 404 && (
-          <div className="text-gray-500 flex items-center justify-center h-64">
-            Snippet not found: {author}/{snippetName}
-          </div>
-        )}
-        {snippetError && snippetError.status !== 404 && (
-          <div>Error: {snippetError.toString()}</div>
-        )}
-        {snippet && (
-          <>
-            <ViewSnippetHeader />
-            <div className="flex flex-row min-h-full">
-              <div className="flex-grow overflow-auto">
-                <PreviewContent
-                  className="h-full"
-                  code={snippet?.code ?? ""}
-                  triggerRunTsx={triggerRunTsx}
-                  tsxRunTriggerCount={tsxRunTriggerCount}
-                  errorMessage={message}
-                  circuitJson={circuitJsonForPreview}
-                  circuitJsonKey={circuitJsonKeyForPreview}
-                  isRunningCode={isRunningCode}
-                  showCodeTab={true}
-                  showJsonTab={false}
-                  showImportAndFormatButtons={false}
-                  readOnly
-                  headerClassName="p-4 border-b border-gray-200"
-                  leftHeaderContent={
-                    <>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="h-6 px-2 text-xs"
-                        onClick={() => {
-                          if (!snippet) return
-                          const url = encodeTextToUrlHash(snippet.code)
-                          navigator.clipboard.writeText(url)
-                          alert("URL copied to clipboard!")
-                        }}
-                      >
-                        <Share className="mr-1 h-3 w-3" />
-                        Copy URL
-                      </Button>
-                      <DownloadButtonAndMenu
-                        snippetUnscopedName={snippet?.unscoped_name}
-                        circuitJson={
-                          circuitJsonForPreview as AnyCircuitElement[]
-                        }
-                        className="hidden md:flex"
-                      />
-                    </>
-                  }
-                  isStreaming={false}
-                  onCodeChange={() => {}}
-                  onDtsChange={() => {}}
-                />
-              </div>
-              <ViewSnippetSidebar />
-            </div>
-          </>
-        )}
-        <Footer />
-      </div>
-    </>
-  )
-}