@tscircuit/fake-snippets 0.0.1

package/src/components/FootprintDialog.tsx

@@ -0,0 +1,342 @@
+import { Input } from "./ui/input"
+import { useEffect, useMemo, useState } from "react"
+import { parseFootprintParams } from "../lib/utils/parseFootprintParams"
+import ParametersEditor from "./ParametersEditor"
+import { convertCircuitJsonToPcbSvg } from "circuit-to-svg"
+import { fp } from "@tscircuit/footprinter"
+import { useToast } from "../hooks/use-toast"
+import { Button } from "./ui/button"
+import { FileName } from "./CodeEditorHeader"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog"
+import { Copy, Check } from "lucide-react"
+import { Combobox } from "./ui/combobox"
+
+interface FootprintDialogProps {
+  currentFile: FileName
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  updateFileContent: (filename: FileName, content: string) => void
+  files: Record<string, string>
+  cursorPosition?: number | null
+}
+
+const PARAM_NAMES: any = {
+  p: "Pitch",
+  w: "Width",
+  num_pins: "Number of Pins",
+  pl: "Pad Length",
+  pw: "Pad Width",
+  id: "Inner Diameter",
+  od: "Outer Diameter",
+}
+
+export const FootprintDialog = ({
+  currentFile,
+  open,
+  onOpenChange,
+  updateFileContent,
+  files,
+  cursorPosition,
+}: FootprintDialogProps) => {
+  const [footprintString, setFootprintString] = useState("")
+  const [footprintName, setFootprintName] = useState("")
+  const [previewSvg, setPreviewSvg] = useState<string | null>(null)
+  const [chipName, setChipName] = useState("")
+  const [footprintNameError, setFootprintNameError] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const { toast } = useToast()
+
+  const PASSIVE_COMPONENTS = ["diode", "led", "resistor", "cap", "res"]
+  const footprintNames = fp
+    .getFootprintNames()
+    .filter((footprintName) => !PASSIVE_COMPONENTS.includes(footprintName))
+
+  useEffect(() => {
+    if (copied) {
+      const timeout = setTimeout(() => {
+        setCopied(false)
+      }, 1000)
+      return () => clearTimeout(timeout)
+    }
+  }, [copied])
+
+  const params: any = useMemo(() => {
+    try {
+      return fp.string(footprintString).json()
+    } catch (error) {
+      return null
+    }
+  }, [footprintName, footprintString])
+
+  const updateFootprintString = (baseName: string, currentParams: any) => {
+    try {
+      const parsedParams = parseFootprintParams(currentParams)
+
+      if (parsedParams.missing && Array.isArray(parsedParams.missing)) {
+        parsedParams.missing =
+          parsedParams.missing.length > 0
+            ? `missing(${parsedParams.missing.join(",")})`
+            : "missing()"
+      }
+
+      if (
+        parsedParams.grid === "0x0" ||
+        parsedParams.grid === "0x" ||
+        /^(\d+x0|0x\d+)$/.test(parsedParams.grid as string)
+      ) {
+        delete parsedParams.grid
+      }
+
+      const paramsString = Object.entries(parsedParams)
+        .filter(([key]) => key !== "fn" && key !== "num_pins")
+        .map(([key, val]) => {
+          if (typeof val === "boolean") return val ? key : ""
+          if (key === "missing") return val
+          return `${key}${val}`
+        })
+        .filter((item) => item !== "")
+        .join("_")
+
+      const newFootprintString = paramsString
+        ? `${baseName}_${paramsString}`
+        : baseName
+      setFootprintString(newFootprintString)
+      handleFootprintPreview(newFootprintString)
+    } catch (error) {
+      console.error("Error updating footprint string:", error)
+    }
+  }
+
+  const updateParam = (
+    paramName: string,
+    value: string | number | boolean | string[],
+  ) => {
+    try {
+      let currentParams = parseFootprintParams({ ...params })
+      if (paramName === "num_pins") {
+        if (Number(value) < 1) value = 1
+        if (Number(value) > 4000) value = 4000
+        const baseNameWithoutNumber = footprintName.replace(/\d+$/, "")
+        const newName = `${baseNameWithoutNumber}${value}`
+        updateFootprintString(newName, currentParams)
+        return
+      }
+
+      currentParams[paramName] = value
+      if (currentParams.missing && Array.isArray(currentParams.missing)) {
+        currentParams.missing =
+          currentParams.missing.length > 0
+            ? `missing(${currentParams.missing.join(",")})`
+            : "missing()"
+      }
+      currentParams = parseFootprintParams(currentParams)
+      const pinMatch = footprintString.match(/\d+(?=(_|$))/)
+      const pinNumber = pinMatch ? pinMatch[0] : ""
+      const baseNameWithoutNumber = footprintName.replace(/\d+$/, "")
+      const nameWithNumber = pinNumber
+        ? `${baseNameWithoutNumber}${pinNumber}`
+        : footprintName
+
+      updateFootprintString(nameWithNumber, currentParams)
+    } catch (error) {
+      console.error("Error updating parameter:", error)
+    }
+  }
+
+  const handleFootprintPreview = async (str: string) => {
+    try {
+      const circuitJson = fp.string(str).circuitJson()
+      const svg = convertCircuitJsonToPcbSvg(circuitJson)
+      setFootprintNameError(false)
+      setPreviewSvg(svg)
+      setError(null)
+    } catch (error) {
+      setFootprintNameError(true)
+      setPreviewSvg(null)
+      setError(
+        error instanceof Error
+          ? error.message
+          : "Invalid footprint configuration",
+      )
+    }
+  }
+
+  const handleInsertFootprint = () => {
+    try {
+      const tsxCode = `\n
+    <chip
+      name="${chipName}"
+      footprint="${footprintString}"
+    />\n`
+      const currentContent = files[currentFile]
+
+      if (cursorPosition !== undefined && cursorPosition !== null) {
+        const newContent =
+          currentContent.slice(0, cursorPosition) +
+          tsxCode +
+          currentContent.slice(cursorPosition)
+        updateFileContent(currentFile, newContent)
+      } else {
+        // No cursor position, look for </board> tag
+        const boardClosingTagIndex = currentContent.lastIndexOf("</board>")
+
+        if (boardClosingTagIndex !== -1) {
+          // Insert before the closing board tag
+          const newContent =
+            currentContent.slice(0, boardClosingTagIndex) +
+            tsxCode +
+            currentContent.slice(boardClosingTagIndex)
+          updateFileContent(currentFile, newContent)
+        } else {
+          const lastParenIndex = currentContent.lastIndexOf(")")
+
+          if (lastParenIndex !== -1) {
+            const newContent =
+              currentContent.slice(0, lastParenIndex) +
+              tsxCode +
+              currentContent.slice(lastParenIndex)
+            updateFileContent(currentFile, newContent)
+          } else {
+            // If no closing parenthesis found, append to end of file
+            updateFileContent(currentFile, currentContent + tsxCode)
+          }
+        }
+      }
+
+      setChipName("")
+    } catch (error) {
+      console.error("Error inserting footprint:", error)
+      toast({
+        title: "Error",
+        description: "Failed to insert footprint",
+        variant: "destructive",
+      })
+    }
+  }
+
+  const handleCopyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(footprintString)
+      setCopied(true)
+    } catch (err) {
+      console.error("Failed to copy to clipboard:", err)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[1160px] h-full flex flex-col overflow-x-scroll">
+        <DialogHeader>
+          <DialogTitle>Insert Chip</DialogTitle>
+          <DialogDescription>
+            Choose a footprint type and configure its parameters. The footprint
+            will be inserted at your cursor position.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="w-fit h-fit flex gap-4 pt-4">
+          <div className="space-y-4 min-w-[280px]">
+            <div>
+              <label className="text-sm font-medium">Chip Name</label>
+              <Input
+                value={chipName}
+                onChange={(e) => setChipName(e.target.value)}
+                placeholder="Enter chip name (e.g., U1)..."
+                className="mt-1"
+              />
+            </div>
+            <div>
+              <label className="text-sm font-medium">Footprint Name</label>
+              <Combobox
+                value={footprintName}
+                onChange={(value) => {
+                  setFootprintName(value)
+                  try {
+                    let newParams = fp.string(value).json()
+                    updateFootprintString(value, newParams)
+                  } catch (error) {
+                    console.error("Error updating footprint string:", error)
+                    setFootprintString(value)
+                    handleFootprintPreview(value)
+                  }
+                }}
+                options={footprintNames}
+                placeholder="Select footprint..."
+                searchPlaceholder="Search footprints..."
+                emptyText="No footprints found."
+                className="mt-1"
+              />
+            </div>
+            <div>
+              <label className="text-sm font-medium">Footprint String</label>
+              <div className="flex items-center justify-center mt-1 gap-1">
+                <Input
+                  readOnly
+                  value={footprintString}
+                  onChange={(e) => {
+                    setFootprintString(e.target.value)
+                    handleFootprintPreview(e.target.value)
+                  }}
+                  placeholder="Complete footprint string..."
+                  className={`bg-gray-50 text-gray-500 ${footprintNameError && "bg-red-50 border-red-200"}`}
+                />
+                <Button
+                  size="icon"
+                  variant="outline"
+                  onClick={handleCopyToClipboard}
+                  className={`shrink-0 ${copied && "text-green-500 border-green-500"}`}
+                  title="Copy to clipboard"
+                >
+                  {copied ? (
+                    <Check className="h-4 w-4" />
+                  ) : (
+                    <Copy className="h-4 w-4" />
+                  )}
+                </Button>
+              </div>
+            </div>
+            {params && (
+              <ParametersEditor
+                params={params}
+                updateParam={updateParam}
+                paramNames={PARAM_NAMES}
+              />
+            )}
+            <Button
+              onClick={() => {
+                handleInsertFootprint()
+                onOpenChange(false)
+              }}
+              disabled={!footprintString || !chipName}
+              className="w-full"
+            >
+              Insert Footprint
+            </Button>
+          </div>
+          <div className="flex flex-col">
+            <div className="rounded-xl overflow-hidden w-[800px] h-[600px]">
+              {previewSvg && (
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: previewSvg,
+                  }}
+                />
+              )}
+            </div>
+            {error && (
+              <div className="mt-2 p-2 text-sm text-red-600 bg-red-50 border border-red-200 rounded">
+                {error}
+              </div>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/Header.tsx

@@ -0,0 +1,187 @@
+import { HeaderLogin } from "@/components/HeaderLogin"
+import { Button } from "@/components/ui/button"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { cn } from "@/lib/utils"
+import {
+  GitHubLogoIcon,
+  OpenInNewWindowIcon,
+  ChatBubbleIcon,
+  DiscordLogoIcon,
+} from "@radix-ui/react-icons"
+import { Menu, X } from "lucide-react"
+import React, { useState } from "react"
+import { useLocation } from "wouter"
+import { PrefetchPageLink } from "./PrefetchPageLink"
+import CmdKMenu from "./CmdKMenu"
+import HeaderDropdown from "./HeaderDropdown"
+import SearchComponent from "./SearchComponent"
+import { Analytics } from "./Analytics"
+
+const HeaderButton = ({
+  href,
+  children,
+  className,
+  alsoHighlightForUrl,
+}: {
+  href: string
+  children: React.ReactNode
+  className?: string
+  alsoHighlightForUrl?: string
+}) => {
+  const [location] = useLocation()
+
+  if (location === href || location === alsoHighlightForUrl) {
+    return (
+      <PrefetchPageLink className={cn("header-button", className)} href={href}>
+        <Button
+          variant="ghost"
+          className={`border-b-2 rounded-none border-blue-600 header-button ${className}`}
+        >
+          {children}
+        </Button>
+      </PrefetchPageLink>
+    )
+  }
+
+  return (
+    <PrefetchPageLink className={cn("header-button", className)} href={href}>
+      <Button className={className} variant="ghost">
+        {children}
+      </Button>
+    </PrefetchPageLink>
+  )
+}
+
+export default function Header() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
+
+  return (
+    <header className="px-4 py-3">
+      <div className="flex items-center">
+        <PrefetchPageLink
+          href="/"
+          className="text-lg font-semibold whitespace-nowrap"
+        >
+          <span className="bg-blue-500 px-2 py-1 rounded-md text-white">
+            tscircuit
+          </span>
+        </PrefetchPageLink>
+        <div className="hidden md:flex items-center space-x-4">
+          <nav>
+            <ul className="flex items-center gap-2 ml-2">
+              {isLoggedIn && (
+                <li>
+                  <HeaderButton href="/dashboard">Dashboard</HeaderButton>
+                </li>
+              )}
+              <li>
+                <HeaderButton href="/newest">Newest</HeaderButton>
+              </li>
+              <li>
+                <HeaderButton href="/quickstart" alsoHighlightForUrl="/editor">
+                  Editor
+                </HeaderButton>
+              </li>
+              <li>
+                <HeaderButton href="/ai">AI</HeaderButton>
+              </li>
+              <li>
+                <a href="https://docs.tscircuit.com">
+                  <Button variant="ghost">Docs</Button>
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://tscircuit.com/join"
+                  target="_blank"
+                  className="mr-2"
+                >
+                  <Button variant="ghost">
+                    <DiscordLogoIcon className="text-gray-400 hover:text-gray-600 transition-colors w-4 h-4" />
+                  </Button>
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <div className="flex-grow"></div>
+        <a
+          href="https://github.com/tscircuit/tscircuit"
+          target="_blank"
+          className="mr-4"
+          aria-label="View TSCircuit on GitHub"
+        >
+          <GitHubLogoIcon className="text-gray-400 hover:text-gray-600 transition-colors" />
+        </a>
+        {/* <a href="https://tscircuit.com/join" target="_blank" className="mr-2">
+          <DiscordLogoIcon className="text-gray-400 hover:text-gray-600 transition-colors" />
+        </a> */}
+        <div className="hidden md:flex items-center space-x-4">
+          <SearchComponent />
+          <HeaderDropdown />
+          <HeaderLogin />
+        </div>
+        <button
+          className="md:hidden"
+          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
+        >
+          {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
+        </button>
+      </div>
+      {mobileMenuOpen && (
+        <div className="md:hidden mt-4">
+          <nav className="mb-4">
+            <ul className="flex flex-col gap-2 w-full">
+              {isLoggedIn && (
+                <li>
+                  <HeaderButton
+                    className="w-full justify-start"
+                    href="/dashboard"
+                  >
+                    Dashboard
+                  </HeaderButton>
+                </li>
+              )}
+              <li>
+                <HeaderButton className="w-full justify-start" href="/newest">
+                  Newest
+                </HeaderButton>
+              </li>
+              <li>
+                <HeaderButton
+                  className="w-full justify-start"
+                  href="/quickstart"
+                  alsoHighlightForUrl="/editor"
+                >
+                  Editor
+                </HeaderButton>
+              </li>
+              <li>
+                <HeaderButton className="w-full justify-start" href="/ai">
+                  AI
+                </HeaderButton>
+              </li>
+              <li>
+                <HeaderButton
+                  className="w-full justify-start"
+                  href="https://docs.tscircuit.com"
+                >
+                  Docs
+                </HeaderButton>
+              </li>
+            </ul>
+          </nav>
+          <div className="flex flex-col gap-4">
+            <SearchComponent />
+            <HeaderDropdown />
+            <HeaderLogin />
+          </div>
+        </div>
+      )}
+      <CmdKMenu />
+      <Analytics />
+    </header>
+  )
+}

package/src/components/Header2.tsx

@@ -0,0 +1,135 @@
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+import {
+  CircuitBoard,
+  Cpu,
+  Layers,
+  CloudLightningIcon as Lightning,
+  Maximize2,
+  Zap,
+  Search,
+  X,
+} from "lucide-react"
+import { Link } from "wouter"
+import { PrefetchPageLink } from "./PrefetchPageLink"
+import { HeaderLogin } from "./HeaderLogin"
+import SearchComponent from "./SearchComponent"
+import HeaderDropdown from "./HeaderDropdown"
+import { useState } from "react"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { Analytics } from "./Analytics"
+
+const SearchButtonComponent = () => {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  return (
+    <div className="relative">
+      {isExpanded ? (
+        <div className="flex items-center gap-2">
+          <div className="w-32 bg-white">
+            <SearchComponent />
+          </div>
+          {/* <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setIsExpanded(false)}
+            className="h-8 w-8"
+          >
+            <X className="h-4 w-4" />
+          </Button> */}
+        </div>
+      ) : (
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setIsExpanded(true)}
+          className="h-8 w-8"
+          aria-label="Open search"
+        >
+          <Search className="h-4 w-4" />
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export const Header2 = () => {
+  const isLoggedIn = useGlobalStore((state) => Boolean(state.session))
+  return (
+    <>
+      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container mx-auto flex h-16 items-center justify-between px-2 md:px-6">
+          <div className="flex items-center gap-2">
+            <CircuitBoard className="h-6 w-6" />
+            <span className="text-lg font-bold">tscircuit</span>
+          </div>
+          <nav className="flex md:hidden">
+            {isLoggedIn && (
+              <Link
+                className="text-sm font-medium hover:underline underline-offset-4"
+                href="/dashboard"
+              >
+                Dashboard
+              </Link>
+            )}
+          </nav>
+          <nav className="hidden md:flex gap-6">
+            <PrefetchPageLink
+              className="text-sm font-medium hover:underline underline-offset-4"
+              href="/dashboard"
+            >
+              Dashboard
+            </PrefetchPageLink>
+            <PrefetchPageLink
+              className="text-sm font-medium hover:underline underline-offset-4"
+              href="/quickstart"
+            >
+              Editor
+            </PrefetchPageLink>
+            {/* <a
+            className="text-sm font-medium hover:underline underline-offset-4"
+            href="https://github.com/tscircuit/tscircuit"
+          >
+            Github
+          </a> */}
+            <a
+              className="text-sm font-medium hover:underline underline-offset-4"
+              href="https://docs.tscircuit.com"
+            >
+              Docs
+            </a>
+            <a
+              className="text-sm font-medium hover:underline underline-offset-4"
+              href="https://tscircuit.com/join"
+            >
+              Discord
+            </a>
+            <a
+              className="text-sm font-medium hover:underline underline-offset-4"
+              href="mailto:hello@tscircuit.com"
+            >
+              Contact
+            </a>
+          </nav>
+          <div className="flex items-center gap-4">
+            <SearchButtonComponent />
+            {isLoggedIn && (
+              <div className="hidden sm:block">
+                <HeaderDropdown />
+              </div>
+            )}
+            <HeaderLogin />
+          </div>
+        </div>
+      </header>
+      <Analytics />
+    </>
+  )
+}