@tscircuit/fake-snippets 0.0.74 → 0.0.75

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
+  }
 }