@tscircuit/fake-snippets 0.0.120 → 0.0.122

package/src/components/TableViewer/CircuitJsonTableViewer.tsx

@@ -1,316 +0,0 @@
-// CircuitJsonTableViewer.tsx
-import React, { useReducer, useState } from "react"
-import { ClickableText } from "./ClickableText"
-import { HeaderCell } from "./HeaderCell"
-import Modal from "./Modal"
-
-type Filters = {
-  component_type_filter?:
-    | "any"
-    | "source"
-    | "source/pcb"
-    | "source/schematic"
-    | string
-  id_search?: string
-  name_search?: string
-  selector_search?: string
-  focused_id?: string
-}
-
-type CommonProps = { name?: string; type: string }
-
-type ModalState =
-  | { open: false; element?: never }
-  | { open: true; element: Element; title: string }
-
-interface Element {
-  [key: string]: any
-  type: string
-  name?: string
-}
-
-interface ProcessedElement extends CommonProps {
-  primary_id: string
-  other_ids: { [key: string]: string }
-  selector_path?: string
-  _og_elm: Element
-}
-
-interface Column {
-  key: string
-  name: string
-  renderCell?: (row: ProcessedElement) => React.ReactNode
-  renderHeaderCell?: (col: Column) => React.ReactNode
-}
-
-export const CircuitJsonTableViewer: React.FC<{ elements: Element[] }> = ({
-  elements,
-}) => {
-  const [modal, setModal] = useState<ModalState>({ open: false })
-  const [filters, setFilter] = useReducer(
-    (s: Filters, a: Filters) => ({
-      ...s,
-      ...a,
-    }),
-    {},
-  )
-
-  const element_types = [...new Set(elements.map((e) => e.type))]
-
-  // Process elements to separate primary and non-primary ids
-  const elements2: ProcessedElement[] = elements.map((e) => {
-    const primary_id = e[`${e.type}_id`]
-
-    const other_ids = Object.fromEntries(
-      Object.entries(e).filter(([k]) => {
-        if (k === `${e.type}_id`) return false
-        if (!k.endsWith("_id")) return false
-        return true
-      }),
-    ) as { [key: string]: string }
-
-    const other_props: CommonProps = Object.fromEntries(
-      Object.entries(e).filter(([k]) => !k.endsWith("_id")),
-    ) as CommonProps
-
-    return {
-      primary_id,
-      other_ids,
-      ...other_props,
-      _og_elm: e,
-    }
-  })
-
-  const elements3 = elements2.map((e) => {
-    let selector_path = ""
-
-    const getSelectorPath = (e2: ProcessedElement): string => {
-      const parent_key = Object.keys(e2.other_ids).find((k) =>
-        k.startsWith("source_"),
-      )
-      if (!parent_key) return `.${e2.name}`
-      const parent_type = parent_key.slice(0, -3) // trim "_id"
-
-      const parent = elements2.find(
-        (p) =>
-          p.type === parent_type && p.primary_id === e2.other_ids[parent_key],
-      )
-
-      if (!parent) return `??? > .${e2.name}`
-
-      if (!("name" in parent)) return `#${parent.primary_id} > .${e2.name}`
-
-      return `${getSelectorPath(parent)} > .${e2.name}`
-    }
-
-    if ("name" in e) {
-      selector_path = getSelectorPath(e)
-    }
-
-    return {
-      ...e,
-      selector_path,
-    }
-  })
-
-  const columns: Column[] = [
-    {
-      key: "primary_id",
-      name: "primary_id",
-      renderCell: (row: ProcessedElement) => (
-        <div className="flex items-center">
-          <ClickableText
-            text={row.primary_id}
-            onClick={() =>
-              setFilter({
-                focused_id: row.primary_id,
-                id_search: undefined,
-                selector_search: undefined,
-              })
-            }
-          />
-          <span className="flex-grow" />
-          <ClickableText
-            text="(JSON)"
-            onClick={() =>
-              setModal({
-                open: true,
-                element: row._og_elm,
-                title: row.primary_id,
-              })
-            }
-          />
-        </div>
-      ),
-      renderHeaderCell: (col: Column) => (
-        <HeaderCell
-          column={col}
-          onTextChange={(v) => setFilter({ id_search: v })}
-          field={
-            !filters.focused_id
-              ? undefined
-              : () => (
-                  <div>
-                    Focus:{" "}
-                    <span className="underline">{filters.focused_id}</span>
-                    <ClickableText
-                      text="(unfocus)"
-                      onClick={() => setFilter({ focused_id: undefined })}
-                    />
-                  </div>
-                )
-          }
-        />
-      ),
-    },
-    {
-      key: "type",
-      name: "type",
-      renderHeaderCell: (col: Column) => (
-        <HeaderCell
-          column={col}
-          field={() => (
-            <select
-              onChange={(e) =>
-                setFilter({ component_type_filter: e.target.value })
-              }
-              className="border rounded p-1 w-full"
-            >
-              <option key="any" value="any">
-                any
-              </option>
-              <option key="source" value="source">
-                source
-              </option>
-              <option key="source/pcb" value="source/pcb">
-                source/pcb
-              </option>
-              <option key="source/schematic" value="source/schematic">
-                source/schematic
-              </option>
-              {element_types.map((type) => (
-                <option key={type} value={type}>
-                  {type}
-                </option>
-              ))}
-            </select>
-          )}
-        />
-      ),
-    },
-    {
-      key: "name",
-      name: "name",
-      renderHeaderCell: (col: Column) => (
-        <HeaderCell
-          column={col}
-          onTextChange={(t) => setFilter({ name_search: t })}
-        />
-      ),
-    },
-    {
-      key: "selector_path",
-      name: "selector_path",
-      renderHeaderCell: (col: Column) => (
-        <HeaderCell
-          column={col}
-          onTextChange={(t) => setFilter({ selector_search: t })}
-        />
-      ),
-    },
-    {
-      key: "other_ids",
-      name: "other_ids",
-      renderCell: (row: ProcessedElement) => (
-        <div className="space-x-2">
-          {Object.entries(row.other_ids).map(([other_id, v]) => (
-            <ClickableText
-              key={v}
-              text={v}
-              onClick={() => setFilter({ focused_id: v })}
-            />
-          ))}
-        </div>
-      ),
-    },
-  ]
-
-  const elements4 = elements3
-    .filter((e) => {
-      if (!filters.name_search) return true
-      return e.name?.toLowerCase()?.includes(filters.name_search.toLowerCase())
-    })
-    .filter((e) => {
-      if (!filters.component_type_filter) return true
-      if (filters.component_type_filter === "any") return true
-      if (filters.component_type_filter === "source") {
-        return e.type.startsWith("source_")
-      }
-      if (filters.component_type_filter === "source/pcb") {
-        return e.type.startsWith("source_") || e.type.startsWith("pcb_")
-      }
-      if (filters.component_type_filter === "source/schematic") {
-        return e.type.startsWith("source_") || e.type.startsWith("schematic_")
-      }
-      return e.type?.includes(filters.component_type_filter)
-    })
-    .filter((e) => {
-      if (!filters.selector_search) return true
-      const parts = filters.selector_search
-        .split(" ")
-        .filter((p) => p.length > 0)
-      return parts.every((part) => e.selector_path?.includes(part))
-    })
-    .filter((e) => {
-      if (!filters.id_search) return true
-      return e.primary_id?.includes(filters.id_search)
-    })
-    .filter((e) => {
-      if (!filters.focused_id) return true
-      if (e.primary_id === filters.focused_id) return true
-      if (Object.values(e.other_ids).includes(filters.focused_id)) return true
-      return false
-    })
-
-  return (
-    <div className="font-mono text-xs">
-      <div className="overflow-x-auto">
-        <table className="table-auto w-full text-left">
-          <thead>
-            <tr>
-              {columns.map((col) => (
-                <th key={col.key} className="px-4 py-2 border-b">
-                  {col.renderHeaderCell ? col.renderHeaderCell(col) : col.name}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {elements4.map((row, rowIndex) => (
-              <tr key={rowIndex} className="hover:bg-gray-100">
-                {columns.map((col) => (
-                  <td key={col.key} className="px-4 py-2 border-b">
-                    {col.renderCell
-                      ? col.renderCell(row)
-                      : (row as any)[col.key]}
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-      <Modal
-        open={modal.open}
-        onClose={() => setModal({ open: false })}
-        title={modal.open ? modal.title : ""}
-      >
-        <div className="bg-gray-800 p-3 text-white rounded">
-          <pre className="whitespace-pre-wrap">
-            {modal.open ? JSON.stringify(modal.element, null, 2) : ""}
-          </pre>
-        </div>
-      </Modal>
-    </div>
-  )
-}

package/src/components/TableViewer/ClickableText.tsx

@@ -1,21 +0,0 @@
-// ClickableText.tsx
-import React from "react"
-
-interface ClickableTextProps {
-  text: string
-  onClick: () => void
-}
-
-export const ClickableText: React.FC<ClickableTextProps> = ({
-  text,
-  onClick,
-}) => {
-  return (
-    <span
-      className="cursor-pointer underline text-blue-300 mx-2"
-      onClick={onClick}
-    >
-      {text}
-    </span>
-  )
-}

package/src/components/TableViewer/HeaderCell.tsx

@@ -1,27 +0,0 @@
-// HeaderCell.tsx
-import React from "react"
-
-interface HeaderCellProps {
-  column: { name: string }
-  field?: () => React.ReactNode
-  onTextChange?: (value: string) => void
-}
-
-export const HeaderCell: React.FC<HeaderCellProps> = (p) => {
-  return (
-    <div className="leading-5">
-      <div className="py-2 font-bold">{p.column.name}</div>
-      <div>
-        {p.field?.() ?? (
-          <input
-            type="text"
-            className="border rounded p-1 w-full"
-            onChange={(e) => {
-              p.onTextChange?.(e.target.value)
-            }}
-          />
-        )}
-      </div>
-    </div>
-  )
-}

package/src/components/TableViewer/Modal.tsx

@@ -1,39 +0,0 @@
-// Modal.tsx
-import React from "react"
-
-interface ModalProps {
-  open: boolean
-  children: React.ReactNode
-  title: string
-  onClose: () => void
-}
-
-const Modal: React.FC<ModalProps> = ({ open, children, title, onClose }) => {
-  if (!open) return null
-
-  return (
-    <div
-      className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50"
-      onClick={onClose}
-    >
-      <div
-        className="bg-white p-5 rounded-lg relative w-11/12 max-w-2xl"
-        onClick={(e) => {
-          e.preventDefault()
-          e.stopPropagation()
-        }}
-      >
-        <h2 className="mt-0 text-xl">{title}</h2>
-        <button
-          className="absolute top-4 right-4 text-2xl font-bold"
-          onClick={onClose}
-        >
-          &times;
-        </button>
-        {children}
-      </div>
-    </div>
-  )
-}
-
-export default Modal

package/src/components/TrendingPackagesCarousel.tsx

@@ -1,79 +0,0 @@
-import { useQuery } from "react-query"
-import { useAxios } from "@/hooks/use-axios"
-import { StarFilledIcon } from "@radix-ui/react-icons"
-import { Link } from "wouter"
-import { Package } from "fake-snippets-api/lib/db/schema"
-import { useRef } from "react"
-const CarouselItem = ({ pkg }: { pkg: Package }) => {
-  const previewImageUrl =
-    pkg.latest_pcb_preview_image_url ??
-    pkg.latest_cad_preview_image_url ??
-    pkg.latest_sch_preview_image_url ??
-    undefined
-
-  return (
-    <Link href={`/${pkg.name}`}>
-      <div className="flex-shrink-0 w-[200px] bg-white p-3 py-2 rounded-lg shadow-sm border border-gray-200 hover:border-gray-300 transition-colors">
-        <div className="font-medium text-blue-600 mb-1 truncate text-sm">
-          {pkg.name}
-        </div>
-        <div className="mb-2 h-24 w-full bg-black rounded overflow-hidden">
-          {previewImageUrl ? (
-            <img
-              src={previewImageUrl}
-              alt="PCB preview"
-              className="w-full h-full object-contain p-2 scale-[3] rotate-45 hover:scale-[3.5] transition-transform"
-            />
-          ) : null}
-        </div>
-        <div className="flex items-center text-xs text-gray-500">
-          <StarFilledIcon className="w-3 h-3 mr-1" />
-          {pkg.star_count || 0} stars
-        </div>
-      </div>
-    </Link>
-  )
-}
-
-export const TrendingPackagesCarousel = () => {
-  const axios = useAxios()
-  const scrollRef = useRef<HTMLDivElement>(null)
-
-  const { data: trendingPackages } = useQuery<Package[]>(
-    "trendingPackages",
-    async () => {
-      const response = await axios.get("/packages/list_trending")
-      return response.data.packages
-    },
-    {
-      refetchOnWindowFocus: false,
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-      staleTime: 1000 * 60 * 60 * 24, // 24 hours
-    },
-  )
-
-  return (
-    <div className="w-full bg-gray-50 py-8 min-h-[280px]">
-      {trendingPackages?.length ? (
-        <>
-          <div className="container mx-auto px-4">
-            <h2 className="text-2xl font-semibold mb-6">Trending Packages</h2>
-          </div>
-          <div className="flex gap-6 overflow-x-hidden relative">
-            <div
-              ref={scrollRef}
-              className="flex gap-6 transition-transform duration-1000 animate-carousel-left"
-            >
-              {[...(trendingPackages ?? []), ...(trendingPackages ?? [])].map(
-                (pkg, i) => (
-                  <CarouselItem key={`${pkg.package_id}-${i}`} pkg={pkg} />
-                ),
-              )}
-            </div>
-          </div>
-        </>
-      ) : null}
-    </div>
-  )
-}

package/src/components/TypeBadge.tsx

@@ -1,31 +0,0 @@
-import React from "react"
-import { cn } from "@/lib/utils"
-
-type BadgeType = "board" | "package" | "footprint" | "model"
-
-interface TypeBadgeProps {
-  type: string | BadgeType
-  className?: string
-}
-
-const typeColors: Record<BadgeType, string> = {
-  board: "bg-blue-500",
-  package: "bg-green-500",
-  footprint: "bg-purple-500",
-  model: "bg-indigo-500",
-}
-
-export const TypeBadge: React.FC<TypeBadgeProps> = ({ type, className }) => {
-  if (!type) return null
-  return (
-    <span
-      className={cn(
-        "text-white px-2 py-1 rounded text-xs font-semibold",
-        typeColors[type as BadgeType],
-        className,
-      )}
-    >
-      {type.toUpperCase()}
-    </span>
-  )
-}

package/src/components/UserCard.tsx

@@ -1,80 +0,0 @@
-import React from "react"
-import { Link } from "wouter"
-import { Account } from "fake-snippets-api/lib/db/schema"
-import { User } from "lucide-react"
-
-export interface UserCardProps {
-  /** The account data to display */
-  account: Account | Omit<Account, "account_id">
-  /** Whether to render the card with a link to the user profile page */
-  withLink?: boolean
-  /** Custom class name for the card container */
-  className?: string
-  /** Custom onClick handler */
-  onClick?: (account: Account | Omit<Account, "account_id">) => void
-}
-
-export const UserCard: React.FC<UserCardProps> = ({
-  account,
-  withLink = true,
-  className = "",
-  onClick,
-}) => {
-  const handleClick = () => {
-    if (onClick) {
-      onClick(account)
-    } else if (!withLink) {
-      window.location.href = `/${account.github_username}`
-    }
-  }
-
-  const cardContent = (
-    <div
-      className={`border p-4 rounded-md hover:shadow-md transition-shadow flex flex-col gap-4 cursor-pointer ${className}`}
-      onClick={!withLink ? handleClick : undefined}
-    >
-      <div className="flex items-start gap-4">
-        <div className="w-16 h-16 flex-shrink-0 rounded-md overflow-hidden bg-gray-50 border flex items-center justify-center">
-          <img
-            src={`https://github.com/${account.github_username}.png?size=69`}
-            alt={`${account.github_username} avatar`}
-            className="object-cover h-full w-full transition-transform duration-300 hover:scale-110"
-            onError={(e) => {
-              const target = e.target as HTMLImageElement
-              target.style.display = "none"
-              target.nextElementSibling?.classList.remove("hidden")
-              target.nextElementSibling?.classList.add("flex")
-            }}
-          />
-          <div className="hidden items-center justify-center h-full w-full">
-            <User className="w-6 h-6 text-gray-300" />
-          </div>
-        </div>
-        <div className="flex-1 min-w-0 flex flex-col justify-center my-auto">
-          <div className="flex justify-between items-start">
-            <h2 className="text-md font-semibold truncate pr-[30px]">
-              <span className="text-gray-900">{account.github_username}</span>
-            </h2>
-          </div>
-          <p className="text-sm text-gray-500 truncate max-w-xs">
-            @{account.github_username}
-          </p>
-        </div>
-      </div>
-    </div>
-  )
-
-  if (withLink) {
-    return (
-      <Link
-        key={account.github_username}
-        href={`/${account.github_username}`}
-        onClick={onClick ? () => onClick(account) : undefined}
-      >
-        {cardContent}
-      </Link>
-    )
-  }
-
-  return cardContent
-}

package/src/components/ViewPackagePage/components/ShikiCodeViewer.tsx

@@ -1,49 +0,0 @@
-import { useShikiHighlighter } from "@/hooks/use-shiki-highlighter"
-import { useMemo } from "react"
-import { Skeleton } from "@/components/ui/skeleton"
-
-// Pre-randomized array to avoid flickering on re-renders
-export const SKELETON_WIDTHS = [
-  "w-2/3",
-  "w-1/4",
-  "w-5/6",
-  "w-1/3",
-  "w-1/2",
-  "w-3/4",
-]
-const PLACEHOLDER_SHIKI_HTML = `<pre class="shiki vitesse-light" style="background-color:#ffffff;color:#393a34" tabindex="0"><code><span class="line"></span></code></pre>`
-export const ShikiCodeViewer = ({
-  code,
-  filePath,
-}: {
-  code: string
-  filePath: string
-}) => {
-  const { highlighter } = useShikiHighlighter()
-
-  const html = useMemo(
-    () =>
-      highlighter?.codeToHtml(code, {
-        lang: "tsx",
-        theme: "vitesse-light",
-      }),
-    [filePath, code, highlighter],
-  )
-
-  if (html && html?.trim() !== PLACEHOLDER_SHIKI_HTML) {
-    return (
-      <div
-        className="text-sm shiki"
-        dangerouslySetInnerHTML={{ __html: html }}
-      />
-    )
-  }
-
-  return (
-    <div className="text-sm p-4">
-      {SKELETON_WIDTHS.map((w, i) => (
-        <Skeleton key={i} className={`h-4 mb-2 ${w}`} />
-      ))}
-    </div>
-  )
-}

package/src/components/ViewPackagePage/components/build-status.tsx

@@ -1,38 +0,0 @@
-import { CheckCircle, XCircle, Clock, Loader2, Hourglass } from "lucide-react"
-import { Link, useParams } from "wouter"
-
-export interface BuildStep {
-  id: string
-  name: string
-  status: "pending" | "running" | "success" | "error"
-}
-
-export interface BuildStatusProps {
-  step: BuildStep
-  packageReleaseId: string
-}
-
-export const BuildStatus = ({ step, packageReleaseId }: BuildStatusProps) => {
-  const { author, packageName } = useParams()
-  const href = `/${author}/${packageName}/releases/${packageReleaseId}`
-
-  return (
-    <Link href={href} className="flex items-center gap-2">
-      {step.status === "success" && (
-        <CheckCircle className="h-4 w-4 text-green-600 dark:text-[#8b949e]" />
-      )}
-      {step.status === "error" && (
-        <XCircle className="h-4 w-4 text-red-600 dark:text-[#8b949e]" />
-      )}
-      {step.status === "running" && (
-        <Loader2 className="h-4 w-4 text-blue-600 animate-spin dark:text-[#8b949e]" />
-      )}
-      {step.status === "pending" && (
-        <Hourglass className="h-4 w-4 text-gray-500 dark:text-[#8b949e]" />
-      )}
-      <span className="text-sm text-gray-500 dark:text-[#8b949e]">
-        {step.name}
-      </span>
-    </Link>
-  )
-}