@tscircuit/fake-snippets 0.0.107 → 0.0.109

package/src/components/ViewSnippetHeader.tsx

@@ -1,181 +0,0 @@
-import { TypeBadge } from "@/components/TypeBadge"
-import { Button } from "@/components/ui/button"
-import { useAxios } from "@/hooks/use-axios"
-import { useCurrentSnippet } from "@/hooks/use-current-snippet"
-import { useGlobalStore } from "@/hooks/use-global-store"
-import { toast, useToast } from "@/hooks/use-toast"
-import { LockClosedIcon } from "@radix-ui/react-icons"
-import { Snippet } from "fake-snippets-api/lib/db/schema"
-import { ChevronLeft, Eye, GitFork, Star } from "lucide-react"
-import { useEffect, useState } from "react"
-import { useMutation, useQueryClient } from "react-query"
-import { Link } from "wouter"
-import { navigate } from "wouter/use-browser-location"
-
-export default function ViewSnippetHeader() {
-  const { snippet } = useCurrentSnippet()
-  const axios = useAxios()
-  const qc = useQueryClient()
-  const session = useGlobalStore((s) => s.session)
-  const [isStarred, setIsStarred] = useState(snippet?.is_starred || false)
-
-  useEffect(() => {
-    setIsStarred(snippet?.is_starred || false)
-  }, [snippet?.is_starred])
-
-  const useForkSnippetMutation = ({
-    snippet,
-    onSuccess,
-  }: {
-    snippet: Snippet
-    onSuccess?: (forkedSnippet: Snippet) => void
-  }) => {
-    const axios = useAxios()
-    const session = useGlobalStore((s) => s.session)
-
-    return useMutation(
-      ["createForkSnippet"],
-      async () => {
-        if (!session) throw new Error("No session")
-        if (!snippet) throw new Error("No snippet to fork")
-
-        const { data } = await axios.post("/snippets/create", {
-          unscoped_name: snippet.unscoped_name,
-          snippet_type: snippet.snippet_type,
-          owner_name: session.github_username,
-          code: snippet.code,
-        })
-
-        if (!data.ok) {
-          throw new Error(
-            data.error || "Unknown error occurred while forking snippet.",
-          )
-        }
-
-        return data.snippet
-      },
-      {
-        onSuccess: (forkedSnippet: Snippet) => {
-          toast({
-            title: `Forked snippet`,
-            description: `You have successfully forked the snippet. Redirecting...`,
-          })
-          onSuccess?.(forkedSnippet)
-        },
-        onError: (error: any) => {
-          const message =
-            error?.data?.error?.message ||
-            error.message ||
-            "Failed to fork snippet. Please try again."
-          if (message.includes("already forked")) {
-            toast({
-              title: "Snippet already exists",
-              description: message,
-              variant: "destructive",
-            })
-          } else {
-            toast({
-              title: "Error",
-              description: message,
-              variant: "destructive",
-            })
-          }
-          console.error("Error forking snippet:", error)
-        },
-      },
-    )
-  }
-
-  const { mutate: forkSnippet, isLoading: isForking } = useForkSnippetMutation({
-    snippet: snippet!,
-    onSuccess: (forkedSnippet) => {
-      navigate("/editor?snippet_id=" + forkedSnippet.snippet_id)
-    },
-  })
-  const handleStarClick = async () => {
-    try {
-      if (isStarred) {
-        await axios.post("/snippets/remove_star", {
-          snippet_id: snippet!.snippet_id,
-        })
-        setIsStarred(false)
-        toast({
-          title: "Unstarred!",
-          description: "You've unstarred this snippet",
-        })
-      } else {
-        await axios.post("/snippets/add_star", {
-          snippet_id: snippet!.snippet_id,
-        })
-        setIsStarred(true)
-        toast({
-          title: "Starred!",
-          description: "You've starred this snippet",
-        })
-      }
-      qc.invalidateQueries(["snippets", snippet!.snippet_id])
-    } catch (error: any) {
-      toast({
-        title: "Error",
-        description: `Failed to ${isStarred ? "unstar" : "star"} snippet`,
-        variant: "destructive",
-      })
-    }
-  }
-
-  return (
-    <header className="bg-white border-b border-gray-200 py-4 px-6">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center">
-          <h1 className="text-xl font-bold mr-2">
-            <Link href={`/${snippet?.owner_name}`} className="text-blue-600">
-              {snippet?.owner_name}
-            </Link>
-            <span className="px-1 text-gray-500">/</span>
-            <Link
-              className="text-blue-600"
-              href={`/${snippet?.owner_name}/${snippet?.unscoped_name}`}
-            >
-              {snippet?.unscoped_name}
-            </Link>
-          </h1>
-          {snippet?.snippet_type && <TypeBadge type={snippet.snippet_type} />}
-          {snippet?.is_private && (
-            <div className="relative group pl-2">
-              <LockClosedIcon className="h-4 w-4 text-gray-700" />
-              <span className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-1 hidden group-hover:block bg-black text-white text-xs rounded py-1 px-2">
-                private
-              </span>
-            </div>
-          )}
-        </div>
-        <div className="flex items-center space-x-2">
-          <Button variant="outline" size="sm" onClick={handleStarClick}>
-            <Star
-              className={`w-4 h-4 mr-2 ${isStarred ? "fill-yellow-500 text-yellow-500" : ""}`}
-            />
-            {isStarred ? "Starred" : "Star"}
-            {snippet!.star_count > 0 && (
-              <span className="ml-1.5 bg-gray-100 text-gray-700 rounded-full px-1.5 py-0.5 text-xs font-medium">
-                {snippet!.star_count}
-              </span>
-            )}
-          </Button>
-          {/* <Button variant="outline" size="sm">
-            <Eye className="w-4 h-4 mr-2" />
-            Watch
-          </Button> */}
-
-          <Button variant="outline" size="sm" onClick={() => forkSnippet()}>
-            <GitFork className="w-4 h-4 mr-2" />
-            {snippet?.owner_name === session?.github_username ? "Save" : "Fork"}
-          </Button>
-        </div>
-      </div>
-      {/* <div className="mt-4 flex justify-end items-center text-sm text-gray-500">
-        <span className="mr-4">Last updated: 2 days ago</span>
-        <span>Version: 1.0.0</span>
-      </div> */}
-    </header>
-  )
-}

package/src/components/ui/input-otp.tsx

@@ -1,69 +0,0 @@
-import * as React from "react"
-import { DashIcon } from "@radix-ui/react-icons"
-import { OTPInput, OTPInputContext } from "input-otp"
-
-import { cn } from "@/lib/utils"
-
-const InputOTP = React.forwardRef<
-  React.ElementRef<typeof OTPInput>,
-  React.ComponentPropsWithoutRef<typeof OTPInput>
->(({ className, containerClassName, ...props }, ref) => (
-  <OTPInput
-    ref={ref}
-    containerClassName={cn(
-      "flex items-center gap-2 has-[:disabled]:opacity-50",
-      containerClassName,
-    )}
-    className={cn("disabled:cursor-not-allowed", className)}
-    {...props}
-  />
-))
-InputOTP.displayName = "InputOTP"
-
-const InputOTPGroup = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("flex items-center", className)} {...props} />
-))
-InputOTPGroup.displayName = "InputOTPGroup"
-
-const InputOTPSlot = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div"> & { index: number }
->(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
-
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "relative flex h-9 w-9 items-center justify-center border-y border-r border-slate-200 text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md dark:border-slate-800",
-        isActive && "z-10 ring-1 ring-slate-950 dark:ring-slate-300",
-        className,
-      )}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="h-4 w-px animate-caret-blink bg-slate-950 duration-1000 dark:bg-slate-50" />
-        </div>
-      )}
-    </div>
-  )
-})
-InputOTPSlot.displayName = "InputOTPSlot"
-
-const InputOTPSeparator = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ ...props }, ref) => (
-  <div ref={ref} role="separator" {...props}>
-    <DashIcon />
-  </div>
-))
-InputOTPSeparator.displayName = "InputOTPSeparator"
-
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

package/src/hooks/use-snippets-base-api-url.ts

@@ -1,3 +0,0 @@
-export const useSnippetsBaseApiUrl = () => {
-  return import.meta.env.VITE_SNIPPETS_API_URL ?? "/api"
-}

package/src/pages/preview-build.tsx

@@ -1,380 +0,0 @@
-import { useState } from "react"
-import { useParams } from "wouter"
-import { Loader2, ChevronLeft, ChevronRight, File, Folder } from "lucide-react"
-import Header from "@/components/Header"
-import { SuspenseRunFrame } from "@/components/SuspenseRunFrame"
-import { TreeView, TreeDataItem } from "@/components/ui/tree-view"
-import { cn } from "@/lib/utils"
-import { PrefetchPageLink } from "@/components/PrefetchPageLink"
-import NotFoundPage from "./404"
-import { getBuildStatus, MOCK_PACKAGE_BUILDS } from "@/components/preview"
-
-const MOCK_DEPLOYMENT_FILES: Record<
-  string,
-  Array<{ path: string; content: string }>
-> = {
-  pb_1a2b3c4d: [
-    {
-      path: "index.tsx",
-      content: `export default () => (
-  <board width="10mm" height="10mm">
-    <resistor
-      resistance="1k"
-      footprint="0402"
-      name="R1"
-      schX={3}
-      pcbX={3}
-    />
-    <capacitor
-      capacitance="1000pF"
-      footprint="0402"
-      name="C1"
-      schX={-3}
-      pcbX={-3}
-    />
-    <trace from=".R1 > .pin1" to=".C1 > .pin1" />
-  </board>
-)`,
-    },
-    {
-      path: "components/Button.tsx",
-      content: `export default () => (
-  <board width="10mm" height="10mm">
-    <resistor
-      resistance="1k"
-      footprint="0402"
-      name="R1"
-      schX={3}
-      pcbX={3}
-    />
-    <capacitor
-      capacitance="1000pF"
-      footprint="0402"
-      name="C1"
-      schX={-3}
-      pcbX={-3}
-    />
-    <trace from=".R1 > .pin1" to=".C1 > .pin1" />
-  </board>
-)`,
-    },
-  ],
-  pb_9i8j7k6l: [
-    {
-      path: "index.tsx",
-      content: `export default () => (
-  <board width="10mm" height="10mm">
-    <resistor
-      resistance="1k"
-      footprint="0402"
-      name="R1"
-      schX={3}
-      pcbX={3}
-    />
-    <capacitor
-      capacitance="1000pF"
-      footprint="0402"
-      name="C1"
-      schX={-3}
-      pcbX={-3}
-    />
-    <trace from=".R1 > .pin1" to=".C1 > .pin1" />
-  </board>
-)`,
-    },
-    {
-      path: "utils/helpers.ts",
-      content: `export default () => (
-  <board width="10mm" height="10mm">
-    <resistor
-      resistance="1k"
-      footprint="0402"
-      name="R1"
-      schX={3}
-      pcbX={3}
-    />
-    <capacitor
-      capacitance="1000pF"
-      footprint="0402"
-      name="C1"
-      schX={-3}
-      pcbX={-3}
-    />
-    <trace from=".R1 > .pin1" to=".C1 > .pin1" />
-  </board>
-)`,
-    },
-  ],
-  pb_1q2w3e4r: [
-    {
-      path: "index.tsx",
-      content: `export default () => (
-  <board width="10mm" height="10mm">
-    <resistor
-      resistance="1k"
-      footprint="0402"
-      name="R1"
-      schX={3}
-      pcbX={3}
-    />
-    <capacitor
-      capacitance="1000pF"
-      footprint="0402"
-      name="C1"
-      schX={-3}
-      pcbX={-3}
-    />
-    <trace from=".R1 > .pin1" to=".C1 > .pin1" />
-  </board>
-)`,
-    },
-  ],
-  pb_9o8i7u6y: [
-    {
-      path: "index.tsx",
-      content: `export default () => (
-  <board width="10mm" height="10mm">
-    <resistor
-      resistance="1k"
-      footprint="0402"
-      name="R1"
-      schX={3}
-      pcbX={3}
-    />
-    <capacitor
-      capacitance="1000pF"
-      footprint="0402"
-      name="C1"
-      schX={-3}
-      pcbX={-3}
-    />
-    <trace from=".R1 > .pin1" to=".C1 > .pin1" />
-  </board>
-)`,
-    },
-  ],
-}
-
-const getBuildFiles = (buildId: string | null) => {
-  if (!buildId) return []
-  return MOCK_DEPLOYMENT_FILES[buildId] || []
-}
-
-const getBuildFsMap = (buildId: string | null) => {
-  const files = getBuildFiles(buildId)
-  return Object.fromEntries(files.map((f) => [f.path, f.content]))
-}
-
-const StatusPill = ({ status }: { status: string }) => {
-  const color =
-    status === "success"
-      ? "bg-emerald-600"
-      : status === "failed"
-        ? "bg-red-600"
-        : status === "building"
-          ? "bg-blue-600 animate-pulse"
-          : "bg-gray-500"
-  return <span className={cn("inline-block w-2 h-2 rounded-full", color)} />
-}
-
-export default function PreviewBuildPage() {
-  const params = useParams<{ buildId: string }>()
-  const buildId = params?.buildId || null
-
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
-  const [selectedFile, setSelectedFile] = useState<string | null>("index.tsx")
-  const [selectedItemId, setSelectedItemId] = useState<string>("")
-
-  const buildFiles = getBuildFiles(buildId)
-  const buildFsMap = getBuildFsMap(buildId)
-
-  const build = buildId
-    ? MOCK_PACKAGE_BUILDS.find((d) => d.package_build_id === buildId)
-    : MOCK_PACKAGE_BUILDS[0]
-
-  if (!build) {
-    return <NotFoundPage heading="Build Not Found" />
-  }
-  const { status, label } = getBuildStatus(build)
-  const convertFilesToTreeData = (
-    files: Array<{ path: string; content: string }>,
-  ): TreeDataItem[] => {
-    const tree: TreeDataItem[] = []
-    const pathMap = new Map<string, TreeDataItem>()
-
-    files.forEach((file) => {
-      const parts = file.path.split("/")
-      let currentPath = ""
-
-      parts.forEach((part, index) => {
-        const isLast = index === parts.length - 1
-        currentPath = currentPath ? `${currentPath}/${part}` : part
-
-        if (!pathMap.has(currentPath)) {
-          const item: TreeDataItem = {
-            id: currentPath,
-            name: part,
-            icon: isLast ? File : Folder,
-            children: isLast ? undefined : [],
-          }
-
-          pathMap.set(currentPath, item)
-
-          if (index === 0) {
-            tree.push(item)
-          } else {
-            const parentPath = parts.slice(0, index).join("/")
-            const parent = pathMap.get(parentPath)
-            if (parent && parent.children) {
-              parent.children.push(item)
-            }
-          }
-        }
-      })
-    })
-
-    return tree
-  }
-
-  const treeData = convertFilesToTreeData(buildFiles)
-
-  return (
-    <>
-      <Header />
-      <div className="flex flex-col h-screen overflow-hidden  !-mt-1">
-        <div className="flex flex-1 overflow-hidden">
-          <aside
-            className={cn(
-              "relative border-r border-gray-200 rounded-r-lg z-[5] h-full transition-all duration-300 ease-in-out bg-white",
-              sidebarCollapsed ? "w-3" : "w-80",
-            )}
-          >
-            <button
-              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
-              className="absolute top-4 -right-3 z-10 bg-white border border-gray-200 rounded-full p-1 hover:bg-gray-50"
-            >
-              {sidebarCollapsed ? (
-                <ChevronRight size={20} />
-              ) : (
-                <ChevronLeft size={20} />
-              )}
-            </button>
-
-            {!sidebarCollapsed && (
-              <>
-                <div className="p-4 border-b border-gray-200">
-                  <div className="space-y-3">
-                    <div className="flex items-center justify-between">
-                      <h2 className="text-lg font-semibold text-gray-900">
-                        Deployment
-                      </h2>
-                      <StatusPill status={status} />
-                    </div>
-
-                    <div className="space-y-2">
-                      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
-                        <span className="text-xs text-gray-500 uppercase tracking-wide">
-                          ID
-                        </span>
-                        <PrefetchPageLink
-                          href={`/build/${build.package_build_id}`}
-                          className="font-mono text-sm text-gray-900 bg-gray-100 px-2 py-1 rounded"
-                        >
-                          {build.package_build_id}
-                        </PrefetchPageLink>
-                      </div>
-
-                      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
-                        <span className="text-xs text-gray-500 uppercase tracking-wide">
-                          Commit
-                        </span>
-                        <PrefetchPageLink
-                          href={`https://github.com/${build.commit_author}/tscircuit.com/commit/${build.commit_message}`}
-                          className="font-mono text-xs text-gray-600 bg-gray-50 px-2 text-right py-1 rounded line-clamp-1"
-                        >
-                          {build.commit_message}
-                        </PrefetchPageLink>
-                      </div>
-
-                      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
-                        <span className="text-xs text-gray-500 uppercase tracking-wide">
-                          Status
-                        </span>
-                        <span
-                          className={`text-xs font-medium px-2 py-1 rounded-full capitalize ${
-                            status === "success"
-                              ? "bg-emerald-100 text-emerald-800"
-                              : status === "failed"
-                                ? "bg-red-100 text-red-800"
-                                : status === "building"
-                                  ? "bg-blue-100 text-blue-800"
-                                  : "bg-gray-100 text-gray-800"
-                          }`}
-                        >
-                          {status}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="flex-1 overflow-hidden">
-                  <div className="px-4 py-3 border-b border-gray-200">
-                    <h3 className="text-sm font-semibold text-gray-900">
-                      Files
-                    </h3>
-                    <p className="text-xs text-gray-500 mt-1">
-                      {buildFiles.length} file
-                      {buildFiles.length !== 1 ? "s" : ""}
-                    </p>
-                  </div>
-                  <div className="px-2 py-2 overflow-y-auto select-none">
-                    <TreeView
-                      selectedItemId={selectedItemId || ""}
-                      setSelectedItemId={(v) => setSelectedItemId(v || "")}
-                      data={treeData}
-                      className="w-full"
-                      onSelectChange={(item) => {
-                        if (item && !item.children) {
-                          setSelectedFile(item.id)
-                        }
-                      }}
-                    />
-                  </div>
-                </div>
-              </>
-            )}
-          </aside>
-
-          <main className="flex-1 overflow-y-auto">
-            <div className="flex flex-col h-full overflow-h-hidden">
-              {status === "success" ? (
-                <SuspenseRunFrame
-                  fsMap={buildFsMap}
-                  mainComponentPath={selectedFile ?? "index.tsx"}
-                  showRunButton={false}
-                  className="[&>div]:overflow-y-hidden"
-                />
-              ) : (
-                <div className="flex-1 flex items-center justify-center">
-                  {status === "building" ? (
-                    <div className="flex flex-col items-center gap-3 text-gray-500">
-                      <Loader2 className="w-6 h-6 animate-spin" />
-                      <p>Building…</p>
-                    </div>
-                  ) : status === "failed" ? (
-                    <div className="text-center">
-                      <p className="text-red-600 font-medium mb-2">
-                        Build Failed
-                      </p>
-                    </div>
-                  ) : null}
-                </div>
-              )}
-            </div>
-          </main>
-        </div>
-      </div>
-    </>
-  )
-}

package/src/pages/settings.tsx

@@ -1,25 +0,0 @@
-import Header from "@/components/Header"
-import Footer from "@/components/Footer"
-import ShippingInformationForm from "@/components/ShippingInformationForm"
-
-export const SettingsPage = () => {
-  return (
-    <div>
-      <Header />
-      <div className="container mx-auto px-4 py-8">
-        <h1 className="text-3xl font-bold mb-6">Settings</h1>
-        <div className="flex">
-          <div className="lg:w-1/2 sm:w-full pr-4">
-            <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
-              <h2 className="text-2xl font-semibold mb-4">
-                Shipping Information
-              </h2>
-              <ShippingInformationForm />
-            </div>
-          </div>
-        </div>
-      </div>
-      <Footer />
-    </div>
-  )
-}