@tscircuit/fake-snippets 0.0.121 → 0.0.123

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

@@ -1,181 +0,0 @@
-import { useState } from "react"
-import { Button } from "@/components/ui/button"
-import {
-  ChevronDown,
-  CodeIcon,
-  Download,
-  Copy,
-  Check,
-  Hammer,
-  Pencil,
-  GitForkIcon,
-  DownloadIcon,
-  Package2,
-} from "lucide-react"
-import MainContentViewSelector from "./main-content-view-selector"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  DropdownMenuSeparator,
-} from "@/components/ui/dropdown-menu"
-import { DownloadButtonAndMenu } from "@/components/DownloadButtonAndMenu"
-import { useCurrentPackageCircuitJson } from "../hooks/use-current-package-circuit-json"
-import { useLocation } from "wouter"
-import { Package, PackageFile } from "fake-snippets-api/lib/db/schema"
-import { usePackageFiles } from "@/hooks/use-package-files"
-import { useDownloadZip } from "@/hooks/use-download-zip"
-import { useToast } from "@/hooks/use-toast"
-interface MainContentHeaderProps {
-  packageFiles: PackageFile[]
-  activeView: string
-  onViewChange: (view: string) => void
-  onExportClicked?: (exportType: string) => void
-  packageInfo?: Package
-}
-
-export default function MainContentHeader({
-  packageFiles,
-  activeView,
-  onViewChange,
-  packageInfo,
-}: MainContentHeaderProps) {
-  const [, setLocation] = useLocation()
-  const [copyInstallState, setCopyInstallState] = useState<"copy" | "copied">(
-    "copy",
-  )
-  const [copyCloneState, setCopyCloneState] = useState<"copy" | "copied">(
-    "copy",
-  )
-
-  const handleCopyInstall = () => {
-    const command = `tsci add ${packageInfo?.name || "@tscircuit/keyboard-default60"}`
-    navigator.clipboard.writeText(command)
-    setCopyInstallState("copied")
-    setTimeout(() => setCopyInstallState("copy"), 2000)
-  }
-
-  const handleCopyClone = () => {
-    const command = `tsci clone ${packageInfo?.name || "@tscircuit/keyboard-default60"}`
-    navigator.clipboard.writeText(command)
-    setCopyCloneState("copied")
-    setTimeout(() => setCopyCloneState("copy"), 2000)
-  }
-
-  const { downloadZip } = useDownloadZip()
-  const { toastLibrary } = useToast()
-
-  const handleDownloadZip = () => {
-    if (packageInfo && packageFiles) {
-      toastLibrary.promise(downloadZip(packageInfo, packageFiles), {
-        loading: "Downloading ZIP...",
-        success: "ZIP downloaded successfully!",
-        error: "Failed to download ZIP",
-      })
-    }
-  }
-
-  const { circuitJson } = useCurrentPackageCircuitJson()
-
-  return (
-    <div className="flex items-center justify-between mb-4">
-      <MainContentViewSelector
-        activeView={activeView}
-        onViewChange={onViewChange}
-      />
-
-      <div className="flex space-x-2">
-        <DownloadButtonAndMenu
-          unscopedName={packageInfo?.unscoped_name}
-          desiredImageType={activeView}
-          author={packageInfo?.owner_github_username ?? undefined}
-          circuitJson={circuitJson}
-        />
-
-        {/* Code Dropdown */}
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              size="sm"
-              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
-              <ChevronDown className="h-4 w-4 ml-0.5" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-72 relative z-[101]">
-            <DropdownMenuItem disabled={!Boolean(packageInfo)} asChild>
-              <a
-                href={`/editor?package_id=${packageInfo?.package_id}`}
-                className="cursor-pointer px-2 py-3"
-              >
-                <Pencil className="h-4 w-4 mx-3" />
-                Edit Online
-              </a>
-            </DropdownMenuItem>
-
-            <DropdownMenuItem
-              disabled={!Boolean(packageInfo)}
-              onClick={handleDownloadZip}
-              className="cursor-pointer px-2 py-3"
-            >
-              <Package2 className="h-4 w-4 mx-3" />
-              Download ZIP
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-
-            {/* Install Option */}
-            <div className="p-2">
-              <div className="text-sm font-medium mb-4 flex items-center">
-                <DownloadIcon className="h-4 w-4 inline-block mr-1.5" />
-                Install
-              </div>
-              <div className="flex items-center bg-gray-100 dark:bg-[#161b22] rounded-md p-2 text-xs font-mono">
-                <code className="flex-1 overflow-x-auto">
-                  tsci add{" "}
-                  {packageInfo?.name || "@tscircuit/keyboard-default60"}
-                </code>
-                <button
-                  className="ml-2 p-1 hover:bg-gray-200 dark:hover:bg-[#30363d] rounded"
-                  onClick={handleCopyInstall}
-                >
-                  {copyInstallState === "copy" ? (
-                    <Copy className="h-4 w-4" />
-                  ) : (
-                    <Check className="h-4 w-4 text-green-500" />
-                  )}
-                </button>
-              </div>
-            </div>
-
-            {/* Clone Option */}
-            <div className="p-2">
-              <div className="text-sm font-medium mb-4 flex items-center">
-                <GitForkIcon className="h-4 w-4 inline-block mr-1.5" />
-                Clone
-              </div>
-              <div className="flex items-center bg-gray-100 dark:bg-[#161b22] rounded-md p-2 text-xs font-mono">
-                <code className="flex-1 overflow-x-auto">
-                  tsci clone{" "}
-                  {packageInfo?.name || "@tscircuit/keyboard-default60"}
-                </code>
-                <button
-                  className="ml-2 p-1 hover:bg-gray-200 dark:hover:bg-[#30363d] rounded"
-                  onClick={handleCopyClone}
-                >
-                  {copyCloneState === "copy" ? (
-                    <Copy className="h-4 w-4" />
-                  ) : (
-                    <Check className="h-4 w-4 text-green-500" />
-                  )}
-                </button>
-              </div>
-            </div>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </div>
-  )
-}

package/src/components/ViewPackagePage/components/main-content-view-selector.tsx

@@ -1,167 +0,0 @@
-import React from "react"
-import {
-  Code,
-  CuboidIcon as Cube,
-  CircuitBoardIcon as Circuit,
-  FileTerminal,
-  ClipboardList,
-} from "lucide-react"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Button } from "@/components/ui/button"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
-import { useCurrentPackageCircuitJson } from "@/components/ViewPackagePage/hooks/use-current-package-circuit-json"
-
-interface MainContentViewSelectorProps {
-  activeView: string
-  onViewChange: (view: string) => void
-}
-
-export default function MainContentViewSelector({
-  activeView,
-  onViewChange,
-}: MainContentViewSelectorProps) {
-  const { circuitJson } = useCurrentPackageCircuitJson()
-
-  const views = [
-    {
-      id: "files",
-      label: "Files",
-      icon: <Code className="h-4 w-4 mr-1" />,
-      requiresCircuitJson: false,
-    },
-    {
-      id: "3d",
-      label: "3D",
-      icon: <Cube className="h-4 w-4 mr-1" />,
-      requiresCircuitJson: true,
-    },
-    {
-      id: "pcb",
-      label: "PCB",
-      icon: <Circuit className="h-4 w-4 mr-1" />,
-      requiresCircuitJson: true,
-    },
-    {
-      id: "schematic",
-      label: "Schematic",
-      icon: <FileTerminal className="h-4 w-4 mr-1" />,
-      requiresCircuitJson: true,
-    },
-    {
-      id: "bom",
-      label: "BOM",
-      icon: <ClipboardList className="h-4 w-4 mr-1" />,
-      requiresCircuitJson: true,
-    },
-  ]
-
-  return (
-    <>
-      {/* Desktop Tabs */}
-      <div className="bg-gray-100 dark:bg-[#161b22] rounded-md p-1 hidden lg:flex">
-        <TooltipProvider>
-          {views.map((view) => {
-            const isDisabled = !circuitJson && view.requiresCircuitJson
-            return (
-              <Tooltip key={view.id}>
-                <TooltipTrigger asChild>
-                  <button
-                    className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors flex items-center ${
-                      activeView === view.id && !isDisabled
-                        ? "bg-white dark:bg-[#0d1117] text-gray-800 dark:text-white"
-                        : isDisabled
-                          ? "text-gray-400 dark:text-gray-600 cursor-not-allowed"
-                          : "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white"
-                    }`}
-                    onClick={() => !isDisabled && onViewChange(view.id)}
-                    disabled={isDisabled}
-                  >
-                    {React.cloneElement(view.icon, {
-                      className: "h-4 w-4 mr-1",
-                    })}
-                    {view.label}
-                  </button>
-                </TooltipTrigger>
-                {isDisabled && (
-                  <TooltipContent>
-                    <p>Circuit JSON not available</p>
-                  </TooltipContent>
-                )}
-              </Tooltip>
-            )
-          })}
-        </TooltipProvider>
-      </div>
-
-      {/* Mobile Dropdown */}
-      <div className="lg:hidden">
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-9 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]"
-            >
-              {views.find((view) => view.id === activeView)?.icon}
-              {views.find((view) => view.id === activeView)?.label || "View"}
-              <svg
-                className="h-4 w-4 ml-1"
-                fill="none"
-                height="24"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path d="m6 9 6 6 6-6" />
-              </svg>
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start" className="z-[101]">
-            <TooltipProvider>
-              {views.map((view) => {
-                const isDisabled = !circuitJson && view.requiresCircuitJson
-                return (
-                  <Tooltip key={view.id}>
-                    <TooltipTrigger asChild>
-                      <DropdownMenuItem
-                        onClick={() => !isDisabled && onViewChange(view.id)}
-                        className={`flex items-center ${
-                          isDisabled
-                            ? "text-gray-400 dark:text-gray-600 cursor-not-allowed"
-                            : "cursor-pointer"
-                        }`}
-                        disabled={isDisabled}
-                      >
-                        {view.icon}
-                        {view.label}
-                      </DropdownMenuItem>
-                    </TooltipTrigger>
-                    {isDisabled && (
-                      <TooltipContent>
-                        <p>Circuit JSON not available</p>
-                      </TooltipContent>
-                    )}
-                  </Tooltip>
-                )
-              })}
-            </TooltipProvider>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </>
-  )
-}

package/src/components/ViewPackagePage/components/markdown-viewer.tsx

@@ -1,88 +0,0 @@
-import React, { useEffect, useState } from "react"
-import Markdown from "react-markdown"
-import remarkGfm from "remark-gfm"
-
-import { useShikiHighlighter } from "@/hooks/use-shiki-highlighter"
-import { Check, Clipboard, Copy, CopyPlus } from "lucide-react"
-import { useToast } from "@/hooks/use-toast"
-
-export default function MarkdownViewer({
-  markdownContent,
-}: {
-  markdownContent: string
-}) {
-  const { highlighter } = useShikiHighlighter()
-  const [copiedCode, setCopiedCode] = useState<string | null>(null)
-  const { toast } = useToast()
-
-  const copyCodeToClipboard = async (text: string) => {
-    try {
-      await navigator.clipboard.writeText(text)
-      setCopiedCode(text)
-      // changes check icon back to clipboard
-      setTimeout(() => {
-        setCopiedCode(null)
-      }, 1500)
-    } catch (error) {
-      toast({
-        title: "Failed to copy",
-        description: "Could not copy to clipboard.",
-      })
-    }
-  }
-
-  return (
-    <div className="markdown-code">
-      <div className="prose dark:prose-invert prose-pre:py-0 prose-pre:px-6 prose-pre:bg-white dark:prose-pre:bg-gray-800 prose-code:font-mono markdown-content">
-        <Markdown
-          remarkPlugins={[remarkGfm]}
-          components={{
-            code({ node, className, children, ...props }) {
-              const isCodeBlock =
-                className?.includes("language-") || /\n/.test(String(children))
-              const codeString = children?.toString() || ""
-
-              const dom = document.createElement("div")
-              if (highlighter) {
-                dom.innerHTML = highlighter.codeToHtml(codeString, {
-                  lang: "tsx",
-                  themes: {
-                    light: "github-light",
-                    dark: "github-dark",
-                  },
-                })
-              }
-
-              return isCodeBlock ? (
-                <div className="flex border rounded-lg relative">
-                  <div
-                    dangerouslySetInnerHTML={{ __html: dom.innerHTML }}
-                    className="flex-1 overflow-auto"
-                  ></div>
-                  {copiedCode === codeString ? (
-                    <Check
-                      size={25}
-                      className="text-green-500 hover:bg-gray-100 p-1 mt-1 mr-1 cursor-pointer rounded-md absolute top-2 right-2"
-                    />
-                  ) : (
-                    <Copy
-                      onClick={() => copyCodeToClipboard(codeString)}
-                      size={25}
-                      className="text-slate-500 hover:bg-gray-100 p-1 mt-1 mr-1 cursor-pointer rounded-md absolute top-2 right-2"
-                    />
-                  )}
-                </div>
-              ) : (
-                <span className="bg-gray-100 dark:bg-gray-800 text-gray-800 font-semibold font-mono dark:text-gray-200 px-1 py-0.5 rounded">
-                  {children}
-                </span>
-              )
-            },
-          }}
-        >
-          {markdownContent}
-        </Markdown>
-      </div>
-    </div>
-  )
-}