@tscircuit/fake-snippets 0.0.44 → 0.0.45

package/src/pages/user-profile.tsx

@@ -15,12 +15,20 @@ import type React from "react"
 import { useState } from "react"
 import { useQuery } from "react-query"
 import { useParams } from "wouter"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
 
 export const UserProfilePage = () => {
   const { username } = useParams()
   const axios = useAxios()
   const [searchQuery, setSearchQuery] = useState("")
   const [activeTab, setActiveTab] = useState("all")
+  const [filter, setFilter] = useState("most-recent") // Changed default from "newest" to "most-recent"
   const session = useGlobalStore((s) => s.session)
   const isCurrentUserProfile = username === session?.github_username
   const { Dialog: DeleteDialog, openDialog: openDeleteDialog } =
@@ -55,12 +63,31 @@ export const UserProfilePage = () => {
   const isLoading =
     activeTab === "starred" ? isLoadingStarredSnippets : isLoadingUserSnippets
 
-  const filteredSnippets = snippetsToShow?.filter((snippet) => {
-    return (
-      !searchQuery ||
-      snippet.unscoped_name.toLowerCase().includes(searchQuery.toLowerCase())
-    )
-  })
+  const filteredSnippets = snippetsToShow
+    ?.filter((snippet) => {
+      return (
+        !searchQuery ||
+        snippet.unscoped_name
+          .toLowerCase()
+          .includes(searchQuery.toLowerCase().trim())
+      )
+    })
+    ?.sort((a, b) => {
+      switch (filter) {
+        case "most-recent":
+          return b.updated_at.localeCompare(a.updated_at)
+        case "least-recent":
+          return a.updated_at.localeCompare(b.updated_at)
+        case "most-starred":
+          return (b.star_count || 0) - (a.star_count || 0)
+        case "a-z":
+          return a.unscoped_name.localeCompare(b.unscoped_name)
+        case "z-a":
+          return b.unscoped_name.localeCompare(a.unscoped_name)
+        default:
+          return 0
+      }
+    })
 
   const handleDeleteClick = (e: React.MouseEvent, snippet: Snippet) => {
     e.preventDefault() // Prevent navigation
@@ -105,13 +132,27 @@ export const UserProfilePage = () => {
             <TabsTrigger value="starred">Starred Packages</TabsTrigger>
           </TabsList>
         </Tabs>
-        <Input
-          type="text"
-          placeholder="Searching User Packages..."
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          className="mb-4"
-        />
+        <div className="flex gap-4 mb-4">
+          <Input
+            type="text"
+            placeholder="Searching User Packages..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="mb-4"
+          />
+          <Select value={filter} onValueChange={setFilter}>
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="Sort by" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="most-recent">Most Recent</SelectItem>
+              <SelectItem value="least-recent">Least Recent</SelectItem>
+              <SelectItem value="most-starred">Most Starred</SelectItem>
+              <SelectItem value="a-z">A-Z</SelectItem>
+              <SelectItem value="z-a">Z-A</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
         {isLoading ? (
           <div>
             {activeTab === "starred"
@@ -120,20 +161,18 @@ export const UserProfilePage = () => {
           </div>
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {filteredSnippets
-              ?.sort((a, b) => b.updated_at.localeCompare(a.updated_at))
-              ?.map((snippet) => (
-                <SnippetCard
-                  key={snippet.snippet_id}
-                  snippet={snippet}
-                  baseUrl={baseUrl}
-                  showOwner={activeTab === "starred"}
-                  isCurrentUserSnippet={
-                    isCurrentUserProfile && activeTab === "all"
-                  }
-                  onDeleteClick={handleDeleteClick}
-                />
-              ))}
+            {filteredSnippets?.map((snippet) => (
+              <SnippetCard
+                key={snippet.snippet_id}
+                snippet={snippet}
+                baseUrl={baseUrl}
+                showOwner={activeTab === "starred"}
+                isCurrentUserSnippet={
+                  isCurrentUserProfile && activeTab === "all"
+                }
+                onDeleteClick={handleDeleteClick}
+              />
+            ))}
           </div>
         )}
       </div>

package/src/components/FootprintDialog.tsx

@@ -1,339 +0,0 @@
-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, getFootprintNamesByType } 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 { normalFootprintNames } = getFootprintNamesByType()
-
-  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={normalFootprintNames}
-                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/ParametersEditor.tsx

@@ -1,140 +0,0 @@
-import { Input } from "./ui/input"
-
-interface ParametersEditorProps {
-  params: Record<string, any>
-  updateParam: (
-    key: string,
-    value: string | number | boolean | string[],
-  ) => void
-  paramNames: Record<string, string>
-}
-
-const ParametersEditor = ({
-  params,
-  updateParam,
-  paramNames,
-}: ParametersEditorProps) => {
-  const renderStringInput = (key: string, value: string) => {
-    if (key === "grid") {
-      let rows = "",
-        cols = ""
-      if (typeof value === "string") {
-        ;[rows = "", cols = ""] = value.split("x").map(String)
-      } else if (typeof value === "number") {
-        rows = cols = String(value)
-      } else if (value && typeof value === "object") {
-        const grid = value as { x: number; y: number }
-        rows = String(grid.x || "")
-        cols = String(grid.y || "")
-      }
-      return (
-        <div className="flex gap-2 flex-1">
-          <Input
-            type="number"
-            value={rows || ""}
-            onChange={(e) => {
-              const newRows = e.target.value || "0"
-              const newCols = cols || "0"
-              updateParam(key, `${newRows}x${newCols}`)
-            }}
-            placeholder="Rows"
-            className="flex-1"
-          />
-          <span className="flex items-center">×</span>
-          <Input
-            type="number"
-            value={cols || ""}
-            onChange={(e) => {
-              const newRows = rows || "0"
-              const newCols = e.target.value || "0"
-              updateParam(key, `${newRows}x${newCols}`)
-            }}
-            placeholder="Cols"
-            className="flex-1"
-          />
-        </div>
-      )
-    }
-
-    if (key === "missing") {
-      const missingArray = Array.isArray(value) ? value : []
-      return (
-        <div className="flex flex-wrap gap-2 items-center">
-          {missingArray.map((item, index) => (
-            <Input
-              key={index}
-              type="number"
-              value={item}
-              onChange={(e) => {
-                if (!e.target.value) {
-                  const newArray = missingArray.filter((_, i) => i !== index)
-                  updateParam(key, newArray)
-                  return
-                }
-                const newArray = [...missingArray]
-                newArray[index] = e.target.value
-                updateParam(key, newArray)
-              }}
-              className="w-16 h-8 text-center p-1"
-            />
-          ))}
-          <button
-            onClick={() => {
-              updateParam(key, [...missingArray, "0"])
-            }}
-            className="w-8 h-8 flex items-center justify-center rounded border border-gray-200 hover:bg-gray-50"
-          >
-            +
-          </button>
-        </div>
-      )
-    }
-
-    return (
-      <Input
-        type="text"
-        value={value}
-        onChange={(e) => updateParam(key, e.target.value)}
-        className="flex-1"
-      />
-    )
-  }
-
-  return (
-    <div className="space-y-2">
-      <label className="text-sm font-medium">Parameters</label>
-      {Object.entries(params)
-        .filter(
-          ([key]) => key !== "fn" && (key !== "num_pins" || !key.match(/\d/)),
-        )
-        .map(([key, value]) => {
-          return (
-            <div key={key} className="flex gap-2 items-center">
-              <label className="text-sm">
-                {paramNames[key] ? `${paramNames[key]} (${key})` : key}:
-              </label>
-              {typeof value === "boolean" ? (
-                <input
-                  type="checkbox"
-                  checked={value}
-                  onChange={(e) => updateParam(key, e.target.checked)}
-                  className="h-4 w-4"
-                />
-              ) : typeof value === "number" ? (
-                <Input
-                  type="number"
-                  value={value}
-                  onChange={(e) => updateParam(key, e.target.value)}
-                  className="flex-1"
-                />
-              ) : (
-                renderStringInput(key, value)
-              )}
-            </div>
-          )
-        })}
-    </div>
-  )
-}
-
-export default ParametersEditor

package/src/lib/utils/parseFootprintParams.ts

@@ -1,52 +0,0 @@
-export interface FootprintParams {
-  [key: string]: string | number | boolean | string[]
-}
-
-/**
- * Parses and normalizes footprint parameters
- * @param params Raw parameters from footprint
- * @returns Normalized parameters with proper formatting
- */
-export function parseFootprintParams(params: FootprintParams): FootprintParams {
-  if (params.grid) {
-    const grid = params.grid
-    if (typeof grid === "object" && grid !== null) {
-      const { x, y } = grid as any
-      params.grid = `${x}x${y}`
-    } else if (typeof grid === "string") {
-      const gridMatch = grid.match(/^(\d+)(?:x(\d+)?)?$/)
-      if (gridMatch) {
-        const [, x, y = x] = gridMatch
-        params.grid = `${x}x${y}`
-      }
-    } else if (typeof grid === "number") {
-      params.grid = `${grid}x${grid}`
-    }
-    delete params.grid3x3
-  }
-
-  if ("missing" in params && typeof params.missing === "string") {
-    const value = params.missing
-    if (value === "") {
-      params.missing = []
-    } else if (!Array.isArray(value)) {
-      if (value.startsWith("missing(") && value.endsWith(")")) {
-        const pinsStr = value.slice(8, -1)
-        params.missing = pinsStr ? pinsStr.split(",").map((p) => p.trim()) : []
-      } else {
-        params.missing = value
-          .split(",")
-          .map((p) => p.trim())
-          .filter(Boolean)
-      }
-    }
-  }
-
-  Object.entries(params).forEach(([key, value]) => {
-    if (typeof value === "string" && !isNaN(Number(value)) && key !== "grid") {
-      params[key] = Number(Number(value).toFixed(2))
-    }
-  })
-
-  return params
-}