@tscircuit/fake-snippets 0.0.121 → 0.0.122

package/src/components/ViewPackagePage/components/mobile-sidebar.tsx

@@ -1,301 +0,0 @@
-import { GitFork, Star, Tag, Settings, LinkIcon } from "lucide-react"
-import { Badge } from "@/components/ui/badge"
-import { Skeleton } from "@/components/ui/skeleton"
-import { usePackageReleaseImages } from "@/hooks/use-package-release-images"
-import { usePreviewImages } from "@/hooks/use-preview-images"
-import { useGlobalStore } from "@/hooks/use-global-store"
-import { Button } from "@/components/ui/button"
-import { useEditPackageDetailsDialog } from "@/components/dialogs/edit-package-details-dialog"
-import React, { useState, useEffect, useMemo, useCallback } from "react"
-import {
-  normalizeSvgForSquareTile,
-  svgToDataUrl,
-} from "@/lib/normalize-svg-for-tile"
-import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
-import { usePackageFileById, usePackageFiles } from "@/hooks/use-package-files"
-import { getLicenseFromLicenseContent } from "@/lib/getLicenseFromLicenseContent"
-
-interface MobileSidebarProps {
-  isLoading?: boolean
-  onViewChange: (view: "schematic" | "pcb" | "3d") => void
-}
-
-const MobileSidebar = ({
-  isLoading = false,
-  onViewChange,
-}: MobileSidebarProps) => {
-  const { packageInfo, refetch: refetchPackageInfo } = useCurrentPackageInfo()
-  const { data: releaseFiles } = usePackageFiles(
-    packageInfo?.latest_package_release_id,
-  )
-  const licenseFileId = useMemo(() => {
-    return (
-      releaseFiles?.find((f) => f.file_path === "LICENSE")?.package_file_id ||
-      null
-    )
-  }, [releaseFiles])
-  const { data: licenseFileMeta } = usePackageFileById(licenseFileId)
-  const currentLicense = useMemo(() => {
-    if (packageInfo?.latest_license) {
-      return packageInfo?.latest_license
-    }
-    if (licenseFileMeta?.content_text) {
-      return getLicenseFromLicenseContent(licenseFileMeta.content_text)
-    }
-    return undefined
-  }, [licenseFileMeta, packageInfo?.latest_license])
-  const topics = useMemo(
-    () => (packageInfo?.is_package ? ["Package"] : ["Board"]),
-    [packageInfo?.is_package],
-  )
-  const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
-  const isOwner =
-    isLoggedIn &&
-    packageInfo?.owner_github_username ===
-      useGlobalStore((s) => s.session?.github_username)
-
-  const {
-    Dialog: EditPackageDetailsDialog,
-    openDialog: openEditPackageDetailsDialog,
-  } = useEditPackageDetailsDialog()
-
-  const [localDescription, setLocalDescription] = useState<string>("")
-  const [localWebsite, setLocalWebsite] = useState<string>("")
-
-  useEffect(() => {
-    if (packageInfo) {
-      setLocalDescription(
-        packageInfo.description || packageInfo.ai_description || "",
-      )
-      setLocalWebsite((packageInfo as any)?.website || "")
-    }
-  }, [packageInfo])
-
-  const handlePackageUpdate = useCallback(
-    (newDescription: string, newWebsite: string) => {
-      setLocalDescription(newDescription)
-      setLocalWebsite(newWebsite)
-      refetchPackageInfo()
-    },
-    [refetchPackageInfo],
-  )
-
-  const { availableViews: imageViews } = usePackageReleaseImages({
-    packageReleaseId: packageInfo?.latest_package_release_id,
-  })
-
-  const { availableViews: pngViews } = usePreviewImages({
-    cadPreviewUrl: packageInfo?.latest_cad_preview_image_url,
-    pcbPreviewUrl: packageInfo?.latest_pcb_preview_image_url,
-    schematicPreviewUrl: packageInfo?.latest_sch_preview_image_url,
-  })
-
-  const viewsToRender =
-    imageViews.length === 0 ||
-    imageViews.every((v) => !v.isLoading && !v.imageUrl)
-      ? (pngViews as any)
-      : imageViews
-
-  const handleViewClick = useCallback(
-    (viewId: string) => {
-      onViewChange?.(viewId as "3d" | "pcb" | "schematic")
-    },
-    [onViewChange],
-  )
-
-  if (isLoading) {
-    return (
-      <div className="p-4 bg-white dark:bg-[#0d1117] border-b border-gray-200 dark:border-[#30363d] md:hidden">
-        <Skeleton className="h-4 w-full 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="flex justify-between text-sm">
-          <Skeleton className="h-4 w-16" />
-          <Skeleton className="h-4 w-16" />
-          <Skeleton className="h-4 w-24" />
-        </div>
-        <div className="grid grid-cols-3 gap-2 mt-4">
-          {[1, 2, 3].map((i) => (
-            <Skeleton key={i} className="aspect-square rounded-lg" />
-          ))}
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="p-4 bg-white dark:bg-[#0d1117] border-b border-gray-200 dark:border-[#30363d] md:hidden">
-      <div className="flex justify-between items-start mb-4">
-        <p className="text-sm text-gray-700 dark:text-[#c9d1d9]">
-          {localDescription ||
-            packageInfo?.description ||
-            packageInfo?.ai_description ||
-            ""}
-        </p>
-        {isOwner && (
-          <Button
-            variant="ghost"
-            size="sm"
-            className="h-8 w-8 p-0 ml-2 flex-shrink-0"
-            onClick={openEditPackageDetailsDialog}
-            title="Edit package details"
-          >
-            <Settings className="h-4 w-4 text-gray-500" />
-          </Button>
-        )}
-      </div>
-
-      {localWebsite && (
-        <a
-          href={localWebsite}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-blue-600 font-medium dark:text-[#58a6ff] hover:underline text-sm flex items-center mb-4 max-w-full overflow-hidden"
-        >
-          <LinkIcon className="h-4 w-4 min-w-[16px] mr-1 flex-shrink-0" />
-          <span className="truncate">{localWebsite}</span>
-        </a>
-      )}
-
-      {/* Tags/Topics */}
-      <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="flex justify-between text-sm">
-        <div className="flex items-center">
-          <Star className="h-4 w-4 mr-1 text-gray-500 dark:text-[#8b949e]" />
-          <span className="mr-4">
-            {packageInfo ? (
-              `${packageInfo.star_count} stars`
-            ) : (
-              <Skeleton className="h-4 w-12 inline-block" />
-            )}
-          </span>
-        </div>
-        <div className="flex items-center">
-          <GitFork className="h-4 w-4 mr-1 text-gray-500 dark:text-[#8b949e]" />
-          <span className="mr-4">
-            {packageInfo ? (
-              `${(packageInfo as any).fork_count ?? 0} forks`
-            ) : (
-              <Skeleton className="h-4 w-12 inline-block" />
-            )}
-          </span>
-        </div>
-        <div className="flex items-center">
-          <Tag className="h-4 w-4 mr-1 text-gray-500 dark:text-[#8b949e]" />
-          <span>
-            {packageInfo ? (
-              `v${packageInfo.latest_version || "-"}`
-            ) : (
-              <Skeleton className="h-4 w-12 inline-block" />
-            )}
-          </span>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-3 gap-2">
-        {viewsToRender.map((view: any) => (
-          <PreviewButton
-            key={view.id}
-            view={view.label}
-            onClick={() => handleViewClick(view.id)}
-            backgroundClass={view.backgroundClass}
-            svg={view.svg}
-            isLoading={view.isLoading}
-            imageUrl={view.imageUrl}
-            status={view.status}
-            onLoad={view.onLoad}
-            onError={view.onError}
-          />
-        ))}
-      </div>
-      {packageInfo && (
-        <EditPackageDetailsDialog
-          currentAllowPrPreviews={packageInfo.allow_pr_previews}
-          packageReleaseId={packageInfo.latest_package_release_id}
-          packageId={packageInfo.package_id}
-          currentDescription={
-            packageInfo.description || packageInfo?.ai_description || ""
-          }
-          currentGithubRepoFullName={packageInfo.github_repo_full_name}
-          currentLicense={currentLicense}
-          currentWebsite={(packageInfo as any)?.website || ""}
-          isPrivate={Boolean(packageInfo.is_private)}
-          packageAuthor={packageInfo.owner_github_username}
-          onUpdate={handlePackageUpdate}
-          packageName={packageInfo.name}
-          unscopedPackageName={packageInfo.unscoped_name}
-          currentDefaultView={packageInfo.default_view}
-        />
-      )}
-    </div>
-  )
-}
-
-export default React.memo(MobileSidebar)
-
-function PreviewButton({
-  view,
-  onClick,
-  backgroundClass,
-  svg,
-  isLoading,
-  imageUrl,
-  status,
-  onLoad,
-  onError,
-}: {
-  view: string
-  onClick: () => void
-  backgroundClass?: string
-  svg?: string | null
-  isLoading?: boolean
-  imageUrl?: string
-  status?: "loading" | "loaded" | "error"
-  onLoad?: () => void
-  onError?: () => void
-}) {
-  if (!svg && !isLoading && !imageUrl) {
-    return null
-  }
-
-  return (
-    <button
-      onClick={onClick}
-      className={`aspect-square ${backgroundClass ?? "bg-gray-100"} rounded-lg border border-gray-200 dark:border-[#30363d] flex items-center justify-center transition-colors mt-4 overflow-hidden`}
-    >
-      {(isLoading || status === "loading") && (
-        <Skeleton className="w-full h-full rounded-lg" />
-      )}
-      {!isLoading && !status && svg && (
-        <img
-          src={svgToDataUrl(normalizeSvgForSquareTile(svg))}
-          alt={view}
-          className="w-full h-full object-contain"
-        />
-      )}
-      {imageUrl && !isLoading && (
-        <img
-          src={imageUrl}
-          alt={view}
-          className="w-full h-full object-cover rounded-lg"
-          onLoad={onLoad}
-          onError={onError}
-        />
-      )}
-    </button>
-  )
-}

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

@@ -1,264 +0,0 @@
-import { useEffect } from "react"
-import { Link } from "wouter"
-import { Button } from "@/components/ui/button"
-import { Skeleton } from "@/components/ui/skeleton"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
-import { Lock, Globe } from "lucide-react"
-import { GitFork, Package, Star } from "lucide-react"
-
-import { useForkPackageMutation } from "@/hooks/use-fork-package-mutation"
-import { usePackageStarringByName } from "@/hooks/use-package-stars"
-import { useOrderDialog } from "@tscircuit/runframe"
-import { useGlobalStore } from "@/hooks/use-global-store"
-import { Package as PackageType } from "fake-snippets-api/lib/db/schema"
-import { useSignIn } from "@/hooks/use-sign-in"
-
-interface PackageHeaderProps {
-  packageInfo?: PackageType
-  isPrivate?: boolean
-  isCurrentUserAuthor?: boolean
-}
-
-export default function PackageHeader({
-  packageInfo,
-  isPrivate = false,
-  isCurrentUserAuthor = false,
-}: PackageHeaderProps) {
-  const accountName = packageInfo?.owner_github_username
-  const packageName = packageInfo?.unscoped_name
-  const sessionToken = useGlobalStore((s) => s.session?.token)
-  const isOwner =
-    packageInfo?.owner_github_username ===
-    useGlobalStore((s) => s.session?.github_username)
-  const isLoggedIn = useGlobalStore((s) => s.session != null)
-  const signIn = useSignIn()
-  const { OrderDialog, isOpen, open, close, stage, setStage } = useOrderDialog({
-    onSignIn: signIn,
-    isLoggedIn,
-    packageReleaseId: packageInfo?.latest_package_release_id ?? "",
-  })
-
-  const { isStarred, starCount, toggleStar } = usePackageStarringByName(
-    packageInfo?.name ?? null,
-  )
-
-  const { mutateAsync: forkPackage, isLoading: isForkLoading } =
-    useForkPackageMutation()
-
-  const handleStarClick = async () => {
-    if (!packageInfo?.name || !isLoggedIn) return
-    await toggleStar()
-  }
-
-  const handleForkClick = async () => {
-    if (!packageInfo?.package_id || !isLoggedIn) return
-    await forkPackage(packageInfo.package_id)
-  }
-
-  useEffect(() => {
-    window.TSCIRCUIT_REGISTRY_API_BASE_URL =
-      import.meta.env.VITE_TSCIRCUIT_REGISTRY_API_URL ??
-      `${window.location.origin}/api`
-    // TODO: replace with production stripe checkout base url
-    window.TSCIRCUIT_STRIPE_CHECKOUT_BASE_URL =
-      import.meta.env.VITE_TSCIRCUIT_STRIPE_CHECKOUT_BASE_URL
-  }, [sessionToken])
-
-  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 flex-wrap gap-y-2">
-          <div className="flex items-center min-w-0 flex-wrap">
-            {accountName && packageName ? (
-              <>
-                <h1 className="text-lg md:text-xl font-bold mr-2 break-words">
-                  <Link
-                    href={`/${accountName}`}
-                    className="text-blue-600 hover:underline"
-                  >
-                    {accountName}
-                  </Link>
-                  <span className="px-1 text-gray-500">/</span>
-                  <Link
-                    href={`/${accountName}/${packageName}`}
-                    className="text-blue-600 hover:underline"
-                  >
-                    {packageName}
-                  </Link>
-                </h1>
-                {packageInfo?.name && (
-                  <div
-                    className={`select-none inline-flex items-center px-2 py-1 rounded text-xs font-medium ${
-                      isPrivate
-                        ? "bg-gray-100 text-gray-700 border border-gray-200"
-                        : "bg-blue-50 text-blue-700 border border-blue-200"
-                    }`}
-                  >
-                    {isPrivate ? (
-                      <>
-                        <Lock className="w-3 h-3 mr-1 flex-shrink-0" />
-                        <span className="leading-none">Private</span>
-                      </>
-                    ) : (
-                      <>
-                        <Globe className="w-3 h-3 mr-1 flex-shrink-0" />
-                        <span className="leading-none">Public</span>
-                      </>
-                    )}
-                  </div>
-                )}
-              </>
-            ) : (
-              <Skeleton className="h-6 w-72" />
-            )}
-          </div>
-
-          <div className="hidden md:flex items-center space-x-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={open}
-              disabled={!packageInfo?.latest_package_release_id}
-            >
-              <Package className="w-4 h-4 mr-2" />
-              Order
-            </Button>
-
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className={
-                        isForkLoading || !packageInfo?.name || !isLoggedIn
-                          ? "pointer-events-none"
-                          : ""
-                      }
-                      onClick={handleStarClick}
-                      disabled={!packageInfo?.name || !isLoggedIn}
-                    >
-                      <Star
-                        className={`w-4 h-4 mr-2 ${
-                          isStarred ? "fill-yellow-500 text-yellow-500" : ""
-                        }`}
-                      />
-                      {isStarred ? "Starred" : "Star"}
-                      {(starCount ?? 0) > 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>
-                  </span>
-                </TooltipTrigger>
-                {!isLoggedIn && (
-                  <TooltipContent>
-                    You must Log in to star a package
-                  </TooltipContent>
-                )}
-              </Tooltip>
-            </TooltipProvider>
-
-            {!isOwner && (
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <span>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={handleForkClick}
-                        disabled={
-                          isForkLoading || !packageInfo?.name || !isLoggedIn
-                        }
-                        className={
-                          isForkLoading || !packageInfo?.name || !isLoggedIn
-                            ? "pointer-events-none"
-                            : ""
-                        }
-                      >
-                        <GitFork className="w-4 h-4 mr-2" />
-                        Fork
-                      </Button>
-                    </span>
-                  </TooltipTrigger>
-                  {!isLoggedIn && (
-                    <TooltipContent>
-                      <p>Log in to Fork this package</p>
-                    </TooltipContent>
-                  )}
-                </Tooltip>
-              </TooltipProvider>
-            )}
-          </div>
-
-          {/* Mobile buttons */}
-          <div className="md:hidden flex items-center space-x-2 w-full justify-end pt-2">
-            <Button variant="outline" size="sm" onClick={open}>
-              <Package className="w-4 h-4 mr-2" />
-              Order
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              className={
-                isForkLoading || !packageInfo?.name || !isLoggedIn
-                  ? "pointer-events-none"
-                  : ""
-              }
-              onClick={handleStarClick}
-              disabled={!packageInfo?.name || !isLoggedIn}
-            >
-              <Star
-                className={`w-4 h-4 mr-2 ${
-                  isStarred ? "fill-yellow-500 text-yellow-500" : ""
-                }`}
-              />
-              {isStarred ? "Starred" : "Star"}
-              {(starCount ?? 0) > 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>
-
-            {!isOwner && (
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleForkClick}
-                className={
-                  isForkLoading || !packageInfo?.name || !isLoggedIn
-                    ? "pointer-events-none"
-                    : ""
-                }
-                disabled={
-                  isCurrentUserAuthor ||
-                  isForkLoading ||
-                  !packageInfo?.package_id
-                }
-              >
-                <GitFork className="w-4 h-4 mr-2" />
-                Fork
-              </Button>
-            )}
-          </div>
-        </div>
-      </div>
-
-      <OrderDialog
-        isOpen={isOpen}
-        onClose={close}
-        stage={stage}
-        setStage={setStage}
-      />
-    </header>
-  )
-}

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

@@ -1,47 +0,0 @@
-import { usePreviewImages } from "@/hooks/use-preview-images"
-import type { Package } from "fake-snippets-api/lib/db/schema"
-
-interface ViewPlaceholdersProps {
-  packageInfo?: Pick<
-    Package,
-    | "latest_cad_preview_image_url"
-    | "latest_pcb_preview_image_url"
-    | "latest_sch_preview_image_url"
-  >
-  onViewChange?: (view: "3d" | "pcb" | "schematic") => void
-}
-
-export default function PreviewImageSquares({
-  packageInfo,
-  onViewChange,
-}: ViewPlaceholdersProps) {
-  const { availableViews } = usePreviewImages({
-    cadPreviewUrl: packageInfo?.latest_cad_preview_image_url,
-    pcbPreviewUrl: packageInfo?.latest_pcb_preview_image_url,
-    schematicPreviewUrl: packageInfo?.latest_sch_preview_image_url,
-  })
-  const handleViewClick = (viewId: string) => {
-    onViewChange?.(viewId as "3d" | "pcb" | "schematic")
-  }
-
-  return (
-    <div className="grid grid-cols-3 gap-2">
-      {availableViews.map((view) => (
-        <button
-          key={view.id}
-          className={`aspect-square ${view.status == "loading" ? "bg-slate-900/10 animate-pulse" : (view.backgroundClass ?? "bg-gray-100")} rounded-lg border border-gray-200 dark:border-[#30363d] flex items-center justify-center transition-colors overflow-hidden mb-6`}
-          onClick={() => handleViewClick(view.id)}
-        >
-          {view.imageUrl && (
-            <img
-              src={view.imageUrl}
-              className="w-full h-full object-cover rounded-lg"
-              onLoad={view.onLoad}
-              onError={view.onError}
-            />
-          )}
-        </button>
-      ))}
-    </div>
-  )
-}