@tscircuit/fake-snippets 0.0.26 → 0.0.28

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

@@ -0,0 +1,107 @@
+import { TypeBadge } from "@/components/TypeBadge"
+import { Button } from "@/components/ui/button"
+import { LockClosedIcon } from "@radix-ui/react-icons"
+import { Eye, GitFork, Star } from "lucide-react"
+import { Link } from "wouter"
+import { Skeleton } from "@/components/ui/skeleton"
+
+interface PackageInfo {
+  name: string
+  unscoped_name: string
+  owner_github_username: string
+  star_count: string
+  description: string
+  ai_description: string
+  creator_account_id?: string
+  owner_org_id?: string
+}
+
+interface PackageHeaderProps {
+  packageInfo?: PackageInfo
+  isPrivate?: boolean
+  isStarred?: boolean
+  onStarClick?: () => void
+  onForkClick?: () => void
+  isCurrentUserAuthor?: boolean
+}
+
+export default function PackageHeader({
+  packageInfo,
+  isPrivate = false,
+  isStarred = false,
+  onStarClick,
+  onForkClick,
+  isCurrentUserAuthor = false,
+}: PackageHeaderProps) {
+  const author = packageInfo?.owner_github_username
+  const packageName = packageInfo?.unscoped_name
+  const starCount = packageInfo?.star_count
+    ? parseInt(packageInfo.star_count)
+    : 0
+
+  return (
+    <header className="bg-white border-b border-gray-200 py-4">
+      <div className="max-w-[1200px] mx-auto px-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center">
+            {author && packageName ? (
+              <>
+                <h1 className="text-xl font-bold mr-2">
+                  <Link href={`/${author}`} className="text-blue-600">
+                    {author}
+                  </Link>
+                  <span className="px-1 text-gray-500">/</span>
+                  <Link
+                    className="text-blue-600"
+                    href={`/${author}/${packageName}`}
+                  >
+                    {packageName}
+                  </Link>
+                </h1>
+                {packageInfo?.name && <TypeBadge type="package" />}
+                {isPrivate && (
+                  <div className="relative group pl-2">
+                    <LockClosedIcon className="h-4 w-4 text-gray-700" />
+                    <span className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-1 hidden group-hover:block bg-black text-white text-xs rounded py-1 px-2">
+                      private
+                    </span>
+                  </div>
+                )}
+              </>
+            ) : (
+              <Skeleton className="h-6 w-72" />
+            )}
+          </div>
+          <div className="flex items-center space-x-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onStarClick}
+              disabled={!onStarClick}
+            >
+              <Star
+                className={`w-4 h-4 mr-2 ${isStarred ? "fill-yellow-500 text-yellow-500" : ""}`}
+              />
+              {isStarred ? "Starred" : "Star"}
+              {starCount > 0 && (
+                <span className="ml-1.5 bg-gray-100 text-gray-700 rounded-full px-1.5 py-0.5 text-xs font-medium">
+                  {starCount}
+                </span>
+              )}
+            </Button>
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onForkClick}
+              disabled={!onForkClick}
+            >
+              <GitFork className="w-4 h-4 mr-2" />
+              {isCurrentUserAuthor ? "Save" : "Fork"}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}

package/src/components/ViewPackagePage/components/preview-image-squares.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import type { Package } from "fake-snippets-api/lib/db/schema"
+import { useState } from "react"
+
+interface ViewPlaceholdersProps {
+  packageInfo?: Pick<Package, "name">
+  onViewChange?: (view: "3d" | "pcb" | "schematic") => void
+}
+
+export default function PreviewImageSquares({
+  packageInfo,
+  onViewChange,
+}: ViewPlaceholdersProps) {
+  const [activeView, setActiveView] = useState("code")
+
+  const views = [
+    { id: "3d", label: "3D View" },
+    {
+      id: "pcb",
+      label: "PCB View",
+      imageUrl: `https://registry-api.tscircuit.com/snippets/images/${packageInfo?.name}/pcb.png`,
+    },
+    {
+      id: "schematic",
+      label: "Schematic View",
+      imageUrl: `https://registry-api.tscircuit.com/snippets/images/${packageInfo?.name}/schematic.png`,
+    },
+  ] satisfies {
+    id: "3d" | "pcb" | "schematic"
+    label: string
+    imageUrl?: string
+  }[]
+
+  const handleViewClick = (viewId: string) => {
+    setActiveView(viewId)
+    onViewChange?.(viewId as "3d" | "pcb" | "schematic")
+  }
+
+  return (
+    <div className="grid grid-cols-3 gap-2 mb-6">
+      {views.map((view) => (
+        <button
+          key={view.id}
+          className={`aspect-square bg-gray-100 dark:bg-[#161b22] rounded-lg border border-gray-200 dark:border-[#30363d] hover:bg-gray-200 dark:hover:bg-[#21262d] flex items-center justify-center transition-colors`}
+          onClick={() => handleViewClick(view.id)}
+        >
+          {view.imageUrl ? (
+            <img
+              src={view.imageUrl}
+              alt={view.label}
+              className="w-full h-full object-cover"
+            />
+          ) : (
+            <span className="text-xs font-medium text-gray-700 dark:text-[#c9d1d9]">
+              {view.label}
+            </span>
+          )}
+        </button>
+      ))}
+    </div>
+  )
+}

package/src/components/ViewPackagePage/components/readme-view.tsx

@@ -0,0 +1,58 @@
+import { Edit, FileText, List } from "lucide-react"
+
+export default function ReadmeView() {
+  return (
+    <div className="mt-4 border border-gray-200 dark:border-[#30363d] rounded-md overflow-hidden">
+      <div className="flex items-center px-4 py-2 bg-gray-100 dark:bg-[#161b22] border-b border-gray-200 dark:border-[#30363d]">
+        <div className="flex items-center">
+          <FileText className="h-4 w-4 mr-2" />
+          <span className="font-semibold">README</span>
+        </div>
+        <div className="ml-4 px-2 py-0.5 bg-gray-200 dark:bg-[#30363d] rounded-md text-xs">
+          MIT license
+        </div>
+        <div className="ml-auto flex items-center">
+          <Edit className="h-4 w-4 mr-1" />
+          <List className="h-4 w-4 ml-2" />
+        </div>
+      </div>
+      <div className="p-4 bg-white dark:bg-[#0d1117]">
+        <h2 className="text-2xl font-bold mb-4">@tscircuit/core</h2>
+        <p className="mb-4">
+          The core logic used to build Circuit JSON from tscircuit React
+          elements.
+        </p>
+        <div className="mb-4">
+          <a
+            href="#"
+            className="text-blue-600 dark:text-[#58a6ff] hover:underline"
+          >
+            tscircuit
+          </a>
+          <span className="mx-2">•</span>
+          <a
+            href="#"
+            className="text-blue-600 dark:text-[#58a6ff] hover:underline"
+          >
+            Development Guide
+          </a>
+          <span className="mx-2">•</span>
+          <a
+            href="#"
+            className="text-blue-600 dark:text-[#58a6ff] hover:underline"
+          >
+            Core Benchmarks
+          </a>
+        </div>
+        <p>
+          You can use{" "}
+          <code className="bg-gray-100 dark:bg-[#161b22] px-1 py-0.5 rounded">
+            core
+          </code>{" "}
+          to create Circuit JSON, which can then be converted into Gerbers,
+          viewed online, and much
+        </p>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,36 @@
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { ChevronDown } from "lucide-react"
+import type { ReactNode } from "react"
+
+interface RepoHeaderButtonProps {
+  icon: ReactNode
+  label: string
+  count?: number
+}
+
+export default function RepoHeaderButton({
+  icon,
+  label,
+  count,
+}: RepoHeaderButtonProps) {
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      className="border-gray-300 dark:border-[#30363d] bg-gray-100 hover:bg-gray-200 dark:bg-[#21262d] dark:hover:bg-[#30363d] text-gray-700 dark:text-[#c9d1d9]"
+    >
+      {icon}
+      {label}
+      {count !== undefined && (
+        <Badge
+          variant="outline"
+          className="ml-2 text-xs rounded-full px-2 py-0.5 bg-transparent border-gray-300 dark:border-[#30363d]"
+        >
+          {count}
+        </Badge>
+      )}
+      <ChevronDown className="h-4 w-4 ml-1" />
+    </Button>
+  )
+}

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

@@ -0,0 +1,4 @@
+export default function RepoHeader() {
+  // This component is being handled by a different team
+  return null
+}

package/src/components/ViewPackagePage/components/repo-page-content.tsx

@@ -0,0 +1,213 @@
+"use client"
+
+import { useState, useEffect, useMemo } from "react"
+import MainContentHeader from "./main-content-header"
+import Sidebar from "./sidebar"
+import MobileSidebar from "./mobile-sidebar"
+import ImportantFilesView from "./important-files-view"
+import { ShikiCodeViewer } from "./ShikiCodeViewer"
+
+// Tab Views
+import FilesView from "./tab-views/files-view"
+import ThreeDView from "./tab-views/3d-view"
+import PCBView from "./tab-views/pcb-view"
+import SchematicView from "./tab-views/schematic-view"
+import BOMView from "./tab-views/bom-view"
+import { isPackageFileImportant } from "../utils/is-package-file-important"
+import Header from "@/components/Header"
+import Footer from "@/components/Footer"
+import ViewSnippetHeader from "@/components/ViewSnippetHeader"
+import PackageHeader from "./package-header"
+
+interface PackageFile {
+  package_file_id: string
+  package_release_id: string
+  file_path: string
+  content_text: string
+  created_at: string // iso-8601
+}
+
+interface PackageInfo {
+  name: string
+  unscoped_name: string
+  owner_github_username: string
+  star_count: string
+  description: string
+  ai_description: string
+  ai_usage_instructions: string
+  creator_account_id?: string
+  owner_org_id?: string
+}
+
+interface RepoPageContentProps {
+  packageFiles?: PackageFile[]
+  importantFilePaths?: string[]
+  packageInfo?: PackageInfo
+  onFileClicked?: (file: any) => void
+  onDirectoryClicked?: (directory: any) => void
+  onExportClicked?: (exportType: string) => void
+  onEditClicked?: () => void
+}
+
+export default function RepoPageContent({
+  packageFiles,
+  packageInfo,
+  onFileClicked,
+  onDirectoryClicked,
+  onExportClicked,
+  onEditClicked,
+}: RepoPageContentProps) {
+  const [activeView, setActiveView] = useState("files")
+
+  const importantFilePaths = packageFiles
+    ?.filter((pf) => isPackageFileImportant(pf.file_path))
+    ?.map((pf) => pf.file_path)
+
+  // Parse package files to determine directories and files structure
+  const { directories, files } = useMemo(() => {
+    if (!packageFiles) {
+      return { directories: [], files: [] }
+    }
+
+    const dirs = new Set<string>()
+    const filesList: Array<{
+      type: "file"
+      path: string
+      name: string
+      created_at: string
+    }> = []
+
+    packageFiles.forEach((file) => {
+      // Extract directory path
+      const pathParts = file.file_path.split("/")
+      const fileName = pathParts.pop() || ""
+
+      // Add all parent directories
+      let currentPath = ""
+      pathParts.forEach((part) => {
+        currentPath += (currentPath ? "/" : "") + part
+        dirs.add(currentPath)
+      })
+
+      filesList.push({
+        type: "file",
+        path: file.file_path,
+        name: fileName,
+        created_at: file.created_at,
+      })
+    })
+
+    // Convert directories set to array of directory objects
+    const dirsList = Array.from(dirs)
+      .map((path) => {
+        const pathParts = path.split("/")
+        if (!path) return null
+        return {
+          type: "directory",
+          path,
+          name: pathParts[pathParts.length - 1],
+        }
+      })
+      .filter((dir) => dir !== null)
+
+    return {
+      directories: dirsList,
+      files: filesList,
+    }
+  }, [packageFiles])
+
+  // Find important files based on importantFilePaths
+  const importantFiles = useMemo(() => {
+    if (!packageFiles || !importantFilePaths) return []
+
+    return packageFiles.filter((file) =>
+      importantFilePaths.some((path) => file.file_path.endsWith(path)),
+    )
+  }, [packageFiles, importantFilePaths])
+
+  // Render the appropriate content based on the active view
+  const renderContent = () => {
+    switch (activeView) {
+      case "files":
+        return (
+          <FilesView
+            directories={directories as any}
+            files={files as any}
+            isLoading={!packageFiles}
+            onFileClicked={onFileClicked}
+            onDirectoryClicked={onDirectoryClicked}
+          />
+        )
+      case "3d":
+        return <ThreeDView />
+      case "pcb":
+        return <PCBView />
+      case "schematic":
+        return <SchematicView />
+      case "bom":
+        return <BOMView />
+      default:
+        return (
+          <FilesView
+            directories={directories as any}
+            files={files as any}
+            isLoading={!packageFiles}
+            onFileClicked={onFileClicked}
+            onDirectoryClicked={onDirectoryClicked}
+          />
+        )
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#0d1117] text-gray-900 dark:text-[#c9d1d9] font-sans">
+      <Header />
+      <PackageHeader packageInfo={packageInfo} />
+
+      {/* Mobile Sidebar */}
+      <div className="max-w-[1200px] mx-auto">
+        <MobileSidebar packageInfo={packageInfo} isLoading={!packageInfo} />
+      </div>
+
+      {/* Main Content */}
+      <div className="max-w-[1200px] mx-auto">
+        <div className="flex flex-col md:flex-row">
+          {/* Main Content Area */}
+          <div className="w-full md:flex-1 border-r border-gray-200 dark:border-[#30363d] p-4 md:max-w-[calc(100%-296px)] max-w-full">
+            {/* Main Content Header with Tabs */}
+            <MainContentHeader
+              activeView={activeView}
+              onViewChange={setActiveView}
+              onExportClicked={onExportClicked}
+              packageInfo={packageInfo}
+            />
+
+            {/* Dynamic Content based on active view */}
+            {renderContent()}
+
+            {/* Important Files View - Always shown */}
+            <ImportantFilesView
+              importantFiles={importantFiles}
+              isLoading={!packageFiles}
+              onEditClicked={onEditClicked}
+              aiDescription={packageInfo?.ai_description}
+              aiUsageInstructions={packageInfo?.ai_usage_instructions}
+            />
+          </div>
+
+          {/* Sidebar - Hidden on mobile, shown on md and up */}
+          <div className="hidden md:block md:w-[296px] flex-shrink-0">
+            <Sidebar
+              packageInfo={packageInfo}
+              isLoading={!packageInfo}
+              onViewChange={(view) => {
+                setActiveView(view)
+              }}
+            />
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  )
+}

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

@@ -0,0 +1,12 @@
+interface RepoTabHeaderProps {
+  activeTab: string
+  setActiveTab: (tab: string) => void
+}
+
+export default function RepoTabHeader({
+  activeTab,
+  setActiveTab,
+}: RepoTabHeaderProps) {
+  // This component is being handled by a different team
+  return null
+}

package/src/components/ViewPackagePage/components/sidebar-about-section.tsx

@@ -0,0 +1,103 @@
+import { Badge } from "@/components/ui/badge"
+import { GitFork, Star } from "lucide-react"
+import { Skeleton } from "@/components/ui/skeleton"
+
+interface PackageInfo {
+  name: string
+  unscoped_name: string
+  owner_github_username: string
+  star_count: string
+  description: string
+  ai_description: string
+  creator_account_id?: string
+  owner_org_id?: string
+  is_package?: boolean
+  website?: string
+}
+
+interface SidebarAboutSectionProps {
+  packageInfo?: PackageInfo
+  isLoading?: boolean
+}
+
+const LinkIcon = () => (
+  <svg className="h-4 w-4 mr-1" viewBox="0 0 16 16" fill="currentColor">
+    <path d="M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25a2 2 0 1 1 2.83 2.83l-2.5 2.5a2 2 0 0 1-2.83 0 .75.75 0 0 0-1.06 1.06 3.5 3.5 0 0 0 4.95 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.95l-1.25 1.25Zm-4.69 9.64a2 2 0 0 1 0-2.83l2.5-2.5a2 2 0 0 1 2.83 0 .75.75 0 0 0 1.06-1.06 3.5 3.5 0 0 0-4.95 0l-2.5 2.5a3.5 3.5 0 0 0 4.95 4.95l1.25-1.25a.75.75 0 0 0-1.06-1.06l-1.25 1.25a2 2 0 0 1-2.83 0Z"></path>
+  </svg>
+)
+
+export default function SidebarAboutSection({
+  packageInfo,
+  isLoading = false,
+}: SidebarAboutSectionProps) {
+  const topics = packageInfo?.is_package ? ["Package"] : ["Board"]
+
+  if (isLoading) {
+    return (
+      <div className="mb-6">
+        <h2 className="text-lg font-semibold mb-2">About</h2>
+        <Skeleton className="h-4 w-full mb-3" />
+        <Skeleton className="h-4 w-3/4 mb-4" />
+        <div className="flex flex-wrap gap-2 mb-4">
+          {[1, 2, 3].map((i) => (
+            <Skeleton key={i} className="h-6 w-20 rounded-full" />
+          ))}
+        </div>
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-4 w-20" />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="mb-6">
+      <h2 className="text-lg font-semibold mb-2">About</h2>
+      <p className="text-sm mb-3">
+        {packageInfo?.description || packageInfo?.ai_description}
+      </p>
+      {packageInfo?.website && (
+        <a
+          href="#"
+          className="text-blue-600 dark:text-[#58a6ff] hover:underline text-sm flex items-center mb-4"
+        >
+          <LinkIcon />
+          {packageInfo?.website}
+        </a>
+      )}
+      <div className="flex flex-wrap gap-2 mb-4">
+        {topics.map((topic, index) => (
+          <Badge
+            key={index}
+            variant="outline"
+            className="text-xs rounded-full px-2 py-0.5 bg-blue-100 dark:bg-[#1f6feb33] text-blue-600 dark:text-[#58a6ff] border-blue-300 dark:border-[#1f6feb66]"
+          >
+            {topic}
+          </Badge>
+        ))}
+      </div>
+      <div className="space-y-2 text-sm">
+        <div className="flex items-center">
+          <svg
+            className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]"
+            viewBox="0 0 16 16"
+            fill="currentColor"
+          >
+            <path d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.53.53-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.29.736c-.264.152-.563.231-.868.231h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.53.53-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.29-.736c.263-.15.561-.231.865-.231H7.25V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path>
+          </svg>
+          <span>MIT license</span>
+        </div>
+        <div className="flex items-center">
+          <Star className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
+          <span>{packageInfo?.star_count || "16"} stars</span>
+        </div>
+        <div className="flex items-center">
+          <GitFork className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
+          <span>39 forks</span>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/ViewPackagePage/components/sidebar-contributors-section.tsx

@@ -0,0 +1,31 @@
+import { Badge } from "@/components/ui/badge"
+
+export default function SidebarContributorsSection() {
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-2">
+        <h2 className="text-lg font-semibold">Contributors</h2>
+        <Badge
+          variant="outline"
+          className="text-xs rounded-full px-2 py-0.5 bg-transparent border-gray-300 dark:border-[#30363d]"
+        >
+          18
+        </Badge>
+      </div>
+      <div className="flex flex-wrap gap-1 mb-2">
+        {[...Array(10)].map((_, i) => (
+          <div
+            key={i}
+            className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-500"
+          ></div>
+        ))}
+      </div>
+      <a
+        href="#"
+        className="text-blue-600 dark:text-[#58a6ff] hover:underline text-sm"
+      >
+        + 4 contributors
+      </a>
+    </div>
+  )
+}

package/src/components/ViewPackagePage/components/sidebar-packages-section.tsx

@@ -0,0 +1,16 @@
+export default function SidebarPackagesSection() {
+  return (
+    <div className="mb-6">
+      <h2 className="text-lg font-semibold mb-2">Packages</h2>
+      <p className="text-sm text-gray-500 dark:text-[#8b949e] mb-1">
+        No packages published
+      </p>
+      <a
+        href="#"
+        className="text-blue-600 dark:text-[#58a6ff] hover:underline text-sm"
+      >
+        Publish your first package
+      </a>
+    </div>
+  )
+}