@tscircuit/fake-snippets 0.0.74 → 0.0.76

package/src/components/PackageBuildsPage/package-build-header.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown, Download, Github, Link } from "lucide-react"
+import { ChevronDown, Download, Github, Link, RefreshCw } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
@@ -7,9 +7,12 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { useParams } from "wouter"
+import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
+import { DownloadButtonAndMenu } from "../DownloadButtonAndMenu"
 
 export function PackageBuildHeader() {
   const { author, packageName } = useParams()
+  const { packageRelease } = useCurrentPackageRelease()
 
   return (
     <div className="border-b border-gray-200 bg-white px-6 py-4">
@@ -39,35 +42,17 @@ export function PackageBuildHeader() {
               Report Issue
             </a>
           </Button>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                size="sm"
-                className="bg-gray-900 text-white hover:bg-gray-800"
-              >
-                <Download className="w-4 h-4 mr-2" />
-                Download
-                <ChevronDown className="w-4 h-4 ml-2" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-              align="end"
-              className="bg-white border-gray-200"
-            >
-              <DropdownMenuItem className="text-gray-900 hover:bg-gray-100">
-                Circuit JSON
-              </DropdownMenuItem>
-              <DropdownMenuItem className="text-gray-900 hover:bg-gray-100">
-                PCB SVG
-              </DropdownMenuItem>
-              <DropdownMenuItem className="text-gray-900 hover:bg-gray-100">
-                Schematic SVG
-              </DropdownMenuItem>
-              <DropdownMenuItem className="text-gray-900 hover:bg-gray-100">
-                3D Model (stl)
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+          <Button
+            variant="outline"
+            size="sm"
+            className="border-gray-300 bg-white hover:bg-gray-50 text-xs sm:text-sm"
+          >
+            <RefreshCw className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
+            Rebuild
+          </Button>
+          <DownloadButtonAndMenu
+            snippetUnscopedName={`${author}/${packageName}`}
+          />
         </div>
       </div>
     </div>

package/src/components/ViewPackagePage/components/main-content-header.tsx

@@ -79,7 +79,7 @@ export default function MainContentHeader({
           <DropdownMenuTrigger asChild>
             <Button
               size="sm"
-              className="h-9 bg-green-600 hover:bg-green-700 dark:bg-[#238636] dark:hover:bg-[#2ea043] text-white"
+              className="bg-green-600 hover:bg-green-700 dark:bg-[#238636] dark:hover:bg-[#2ea043] text-white"
             >
               <CodeIcon className="h-4 w-4 mr-1.5" />
               Code

package/src/components/ViewPackagePage/components/package-header.tsx

@@ -76,7 +76,6 @@ export default function PackageHeader({
     window.TSCIRCUIT_REGISTRY_API_BASE_URL =
       import.meta.env.VITE_TSCIRCUIT_REGISTRY_API_URL ??
       `${window.location.origin}/api`
-    window.TSCIRCUIT_REGISTRY_TOKEN = sessionToken ?? ""
     // TODO: replace with production stripe checkout base url
     window.TSCIRCUIT_STRIPE_CHECKOUT_BASE_URL =
       import.meta.env.VITE_TSCIRCUIT_STRIPE_CHECKOUT_BASE_URL

package/src/components/dialogs/pcb-download-dialog.tsx

@@ -0,0 +1,113 @@
+import { useState } from "react"
+import { Button } from "../ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "../ui/dialog"
+import { Label } from "../ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select"
+import { Checkbox } from "../ui/checkbox"
+import { AnyCircuitElement } from "circuit-json"
+import { createUseDialog } from "./create-use-dialog"
+import {
+  downloadPcbSvg,
+  DownloadPcbSvgOptions,
+} from "@/lib/download-fns/download-pcb-svg"
+
+interface PcbDownloadDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  circuitJson: AnyCircuitElement[]
+  fileName: string
+}
+
+export const PcbDownloadDialog = ({
+  open,
+  onOpenChange,
+  circuitJson,
+  fileName,
+}: PcbDownloadDialogProps) => {
+  const [layer, setLayer] = useState<"all" | "top" | "bottom">("all")
+  const [drawPadding, setDrawPadding] = useState(true)
+  const [transparentBg, setTransparentBg] = useState(false)
+  const [matchAspectRatio, setMatchAspectRatio] = useState(false)
+
+  const handleDownload = () => {
+    const options: DownloadPcbSvgOptions = {
+      layer,
+      drawPaddingOutsideBoard: drawPadding,
+      backgroundColor: transparentBg ? "transparent" : "#000",
+      matchAspectRatio,
+    }
+    downloadPcbSvg(circuitJson, fileName, options)
+    onOpenChange(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Download PCB SVG</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4 py-2">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="layer" className="text-right">
+              Layer
+            </Label>
+            <Select value={layer} onValueChange={(v) => setLayer(v as any)}>
+              <SelectTrigger id="layer" className="col-span-3">
+                <SelectValue placeholder="Layer" />
+              </SelectTrigger>
+              <SelectContent className="!z-[999]">
+                <SelectItem value="all">All</SelectItem>
+                <SelectItem value="top">Top</SelectItem>
+                <SelectItem value="bottom">Bottom</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="padding"
+              checked={drawPadding}
+              onCheckedChange={(v) => setDrawPadding(Boolean(v))}
+            />
+            <Label htmlFor="padding">Draw Padding and Board Outline</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="transparentBg"
+              checked={transparentBg}
+              onCheckedChange={(v) => setTransparentBg(Boolean(v))}
+            />
+            <Label htmlFor="transparentBg">Transparent Background</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="matchAspectRatio"
+              checked={matchAspectRatio}
+              onCheckedChange={(v) => setMatchAspectRatio(Boolean(v))}
+            />
+            <Label htmlFor="matchAspectRatio">Match Aspect Ratio</Label>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleDownload}>Download</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export const usePcbDownloadDialog = createUseDialog(PcbDownloadDialog)

package/src/lib/download-fns/download-pcb-svg.ts

@@ -0,0 +1,35 @@
+import { AnyCircuitElement } from "circuit-json"
+import { convertCircuitJsonToPcbSvg } from "circuit-to-svg"
+import { saveAs } from "file-saver"
+
+export interface DownloadPcbSvgOptions {
+  layer?: "all" | "top" | "bottom"
+  drawPaddingOutsideBoard?: boolean
+  backgroundColor?: string
+  matchAspectRatio?: boolean
+}
+
+export const downloadPcbSvg = (
+  circuitJson: AnyCircuitElement[],
+  fileName: string,
+  options: DownloadPcbSvgOptions = {},
+) => {
+  const convertOptions: any = {}
+  if (options.layer && options.layer !== "all") {
+    convertOptions.layer = options.layer
+  }
+  if (options.matchAspectRatio) {
+    convertOptions.matchBoardAspectRatio = true
+  }
+  if (typeof options.drawPaddingOutsideBoard === "boolean") {
+    convertOptions.drawPaddingOutsideBoard = options.drawPaddingOutsideBoard
+  }
+  if (options.backgroundColor) {
+    convertOptions.backgroundColor = options.backgroundColor
+  }
+
+  const svg = convertCircuitJsonToPcbSvg(circuitJson, convertOptions)
+
+  const blob = new Blob([svg], { type: "image/svg+xml" })
+  saveAs(blob, fileName + ".svg")
+}

package/src/lib/utils/timeAgo.ts

@@ -3,7 +3,18 @@ import en from "javascript-time-ago/locale/en"
 
 TimeAgo.addDefaultLocale(en)
 
-export const timeAgo = (date: Date) => {
-  const timeAgo = new TimeAgo("en-US")
-  return timeAgo.format(date)
+export const timeAgo = (
+  date: Date | string | null | undefined,
+  fallback = "???",
+) => {
+  if (!date) return fallback
+  if (typeof date === "string") {
+    date = new Date(date)
+  }
+  try {
+    const timeAgo = new TimeAgo("en-US")
+    return timeAgo.format(date)
+  } catch (error) {
+    return fallback
+  }
 }

package/bun-tests/fake-snippets-api/fixtures/get-circuit-json.ts

@@ -1,10 +0,0 @@
-import type { AnyCircuitElement } from "circuit-json"
-import { runTscircuitCode } from "@tscircuit/eval"
-
-export const generateCircuitJson = async ({
-  code,
-}: {
-  code: string
-}): Promise<AnyCircuitElement[]> => {
-  return (await runTscircuitCode(code)) as any
-}