@tscircuit/fake-snippets 0.0.121 → 0.0.122

package/src/components/HeaderLogin.tsx

@@ -1,105 +0,0 @@
-import { Button } from "@/components/ui/button"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { User } from "lucide-react"
-import { useGlobalStore } from "@/hooks/use-global-store"
-import { useSignIn } from "@/hooks/use-sign-in"
-import { Link } from "wouter"
-import { useState } from "react"
-
-export const HeaderLogin = () => {
-  const session = useGlobalStore((s) => s.session)
-  const isLoggedIn = Boolean(session)
-  const setSession = useGlobalStore((s) => s.setSession)
-  const signIn = useSignIn()
-  const [isOpen, setIsOpen] = useState(false)
-
-  if (!isLoggedIn) {
-    return (
-      <div className="flex items-center md:space-x-2 justify-end">
-        <Button onClick={() => signIn()} variant="ghost">
-          Log In
-        </Button>
-        <Button onClick={() => signIn()}>Get Started</Button>
-      </div>
-    )
-  }
-
-  return (
-    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
-      <DropdownMenuTrigger asChild>
-        <Avatar className="w-8 h-8 login-avatar">
-          <AvatarImage
-            src={`https://github.com/${session?.github_username}.png?size=40`}
-            alt={`${session?.github_username}'s profile picture`}
-          />
-          <AvatarFallback aria-label="User avatar fallback">
-            <User size={16} aria-hidden="true" />
-          </AvatarFallback>
-        </Avatar>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="ml-1 mr-1 md:ml-0 md:mr-1">
-        {/* <DropdownMenuItem asChild className="text-gray-500 text-xs" disabled>
-          <div>
-            AI Usage $
-            {accountBalance?.monthly_ai_budget_used_usd.toFixed(2) ?? "0.00"} /
-            $5.00
-          </div>
-        </DropdownMenuItem> */}
-        <DropdownMenuItem asChild>
-          <Link
-            href={`/${session?.github_username}`}
-            className="cursor-pointer"
-            onClick={() => setIsOpen(false)}
-          >
-            My Profile
-          </Link>
-        </DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <Link
-            href="/dashboard"
-            className="cursor-pointer"
-            onClick={() => setIsOpen(false)}
-          >
-            Dashboard
-          </Link>
-        </DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <Link
-            href={`/${session?.github_username}/settings`}
-            className="cursor-pointer"
-            onClick={() => setIsOpen(false)}
-          >
-            Settings
-          </Link>
-        </DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <Link
-            href="/orgs/new"
-            className="cursor-pointer"
-            onClick={() => setIsOpen(false)}
-          >
-            Create Organization
-          </Link>
-        </DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <Link
-            href="/"
-            className="cursor-pointer"
-            onClick={() => {
-              setSession(null)
-              setIsOpen(false)
-            }}
-          >
-            Sign Out
-          </Link>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}

package/src/components/HiddenFilesDropdown.tsx

@@ -1,42 +0,0 @@
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { MoreVertical, Check } from "lucide-react"
-
-interface HiddenFilesDropdownProps {
-  showHiddenFiles: boolean
-  onToggleHiddenFiles: () => void
-}
-
-export default function HiddenFilesDropdown({
-  showHiddenFiles,
-  onToggleHiddenFiles,
-}: HiddenFilesDropdownProps) {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <button className="ml-2 text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none">
-          <MoreVertical className="h-4 w-4" />
-        </button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        align="end"
-        className="bg-white dark:bg-[#161b22] border border-gray-200 dark:border-[#30363d] rounded-md shadow-lg"
-      >
-        <DropdownMenuItem
-          onSelect={(e) => e.preventDefault()}
-          onClick={onToggleHiddenFiles}
-          className="text-xs text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-[#21262d] flex items-center gap-2"
-        >
-          <Check
-            className={`h-4 w-4 transition-opacity ${showHiddenFiles ? "opacity-100" : "opacity-0"}`}
-          />
-          Show Hidden Files
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}

package/src/components/ImageWithFallback.tsx

@@ -1,37 +0,0 @@
-import { useState } from "react"
-
-interface ImageWithFallbackProps
-  extends React.ImgHTMLAttributes<HTMLImageElement> {
-  src: string
-  alt: string
-  className?: string
-  fallbackSrc?: string
-}
-
-export function ImageWithFallback({
-  src,
-  alt,
-  className = "",
-  fallbackSrc = "/assets/fallback-image.svg",
-  ...props
-}: ImageWithFallbackProps) {
-  const [loading, setLoading] = useState(true)
-  const [currentSrc, setCurrentSrc] = useState(src)
-
-  return (
-    <img
-      src={currentSrc}
-      alt={alt}
-      className={`object-contain h-full w-full ${
-        loading ? "animate-pulse bg-gray-200" : ""
-      } ${className}`}
-      onLoad={() => setLoading(false)}
-      onError={() => {
-        console.error("PCB image failed to load:", src)
-        setCurrentSrc(fallbackSrc)
-        setLoading(false)
-      }}
-      {...props}
-    />
-  )
-}

package/src/components/LatestSnippets.tsx

@@ -1,39 +0,0 @@
-import React from "react"
-import { useQuery } from "react-query"
-import { useAxios } from "@/hooks/use-axios"
-import { Snippet } from "fake-snippets-api/lib/db/schema"
-import { Link } from "wouter"
-
-export const LatestSnippets: React.FC = () => {
-  const axios = useAxios()
-  const {
-    data: snippets,
-    isLoading,
-    error,
-  } = useQuery<Snippet[]>("latestSnippets", async () => {
-    const response = await axios.get("/snippets/list_latest")
-    return response.data.snippets
-  })
-
-  if (isLoading) return <div>Loading...</div>
-  if (error) return <div>Error loading snippets</div>
-
-  return (
-    <div className="space-y-4">
-      {snippets?.map((snippet) => (
-        <div key={snippet.snippet_id} className="border p-4 rounded-md">
-          <Link
-            href={`/${snippet.owner_name}/${snippet.unscoped_name}`}
-            className="text-blue-600 hover:underline"
-          >
-            <h3 className="text-lg font-semibold">{snippet.unscoped_name}</h3>
-          </Link>
-          <p className="text-sm text-gray-600">by {snippet.owner_name}</p>
-          <p className="text-sm text-gray-500">
-            Created: {new Date(snippet.created_at).toLocaleString()}
-          </p>
-        </div>
-      ))}
-    </div>
-  )
-}

package/src/components/NotFound.tsx

@@ -1,37 +0,0 @@
-import { Button } from "@/components/ui/button"
-import { Link } from "wouter"
-
-export function NotFound({ heading = "Page not found" }: { heading?: string }) {
-  return (
-    <section className="flex-1 flex items-center justify-center min-h-[90vh]">
-      <div className="container px-4 md:px-6 py-12 flex flex-col items-center text-center max-w-3xl">
-        <div className="mb-8 flex flex-col items-center justify-center">
-          <div className="mb-2">
-            <span className="text-3xl font-bold text-white bg-blue-500 px-4 py-2 rounded-md shadow-md inline-block">
-              404
-            </span>
-          </div>
-        </div>
-        <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl mb-4">
-          {heading}
-        </h1>
-        <p className="text-xl text-muted-foreground mb-8">
-          The page you're looking for doesn't exist or has been moved to another
-          address.
-        </p>
-        <div className="flex flex-col sm:flex-row gap-4">
-          <Link href="/">
-            <Button size="lg" className="bg-blue-500 hover:bg-blue-600">
-              Return Home
-            </Button>
-          </Link>
-          <Link href="/search">
-            <Button size="lg" variant="outline">
-              Search Packages
-            </Button>
-          </Link>
-        </div>
-      </div>
-    </section>
-  )
-}

package/src/components/OptimizedImage.tsx

@@ -1,100 +0,0 @@
-import { useState, useEffect } from "react"
-
-/**
- * OptimizedImage component for responsive images with automatic srcset generation
- *
- * This component automatically generates srcset attributes for responsive images.
- * Place your original high-resolution images in src/assets/originals/.
- * The build process will automatically generate all required sizes.
- *
- * Example usage:
- * <OptimizedImage
- *   src="/assets/example.jpg"
- *   alt="Example"
- * />
- *
- * The build process will generate:
- * /assets/
- *   example-400w.jpg
- *   example-600w.jpg
- *   example-800w.jpg
- *   example-1000w.jpg
- *   example-1200w.jpg
- *   example-1600w.jpg
- *   example-2000w.jpg
- */
-interface OptimizedImageProps
-  extends React.ImgHTMLAttributes<HTMLImageElement> {
-  src: string
-  alt: string
-  priority?: boolean
-  fallbackSrc?: string
-}
-
-const getImageSizes = (src: string) => {
-  if (src.endsWith(".svg")) return { srcSet: src, sizes: "100vw" }
-
-  const widths = [400, 600, 800, 1000, 1200, 1600, 2000]
-  const basePath = src.substring(0, src.lastIndexOf("."))
-  const extension = src.substring(src.lastIndexOf("."))
-  const srcSet = widths
-    .map((w) => `${basePath}-${w}w${extension} ${w}w`)
-    .join(", ")
-
-  const sizes =
-    "(max-width: 400px) 400px, (max-width: 600px) 600px, (max-width: 800px) 800px, (max-width: 1000px) 1000px, (max-width: 1200px) 1200px, (max-width: 1600px) 1600px, 2000px"
-
-  return { srcSet, sizes }
-}
-
-export function OptimizedImage({
-  src,
-  alt,
-  className,
-  priority = false,
-  fallbackSrc = "/assets/fallback-image.svg",
-  ...props
-}: OptimizedImageProps) {
-  const [currentSrc, setCurrentSrc] = useState(src)
-  const [imageLoading, setImageLoading] = useState(true)
-  const { srcSet, sizes } = getImageSizes(currentSrc)
-
-  useEffect(() => {
-    if (priority) {
-      const link = document.createElement("link")
-      link.rel = "preload"
-      link.as = "image"
-      link.href = src
-      link.type = src.endsWith(".svg") ? "image/svg+xml" : "image/webp"
-      link.imageSrcset = srcSet
-      link.imageSizes = sizes
-      document.head.appendChild(link)
-
-      return () => {
-        document.head.removeChild(link)
-      }
-    }
-  }, [src, priority, srcSet, sizes])
-
-  return (
-    <img
-      src={currentSrc}
-      srcSet={srcSet}
-      sizes={sizes}
-      alt={alt}
-      loading={priority ? "eager" : "lazy"}
-      decoding={priority ? "sync" : "async"}
-      fetchPriority={priority ? "high" : "auto"}
-      className={`${className} ${
-        imageLoading ? "animate-pulse bg-gray-200" : ""
-      } object-contain`}
-      onLoad={() => setImageLoading(false)}
-      onError={() => {
-        console.error("Image failed to load:", currentSrc)
-        setCurrentSrc(fallbackSrc)
-        setImageLoading(false)
-      }}
-      {...props}
-    />
-  )
-}

package/src/components/PackageBreadcrumb.tsx

@@ -1,105 +0,0 @@
-import { Link } from "wouter"
-import {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb"
-
-interface PackageBreadcrumbProps {
-  author: string
-  packageName: string
-  unscopedName?: string
-  currentPage?: "releases" | "builds" | string
-  releaseVersion?: string
-}
-
-export function PackageBreadcrumb({
-  author,
-  packageName,
-  unscopedName,
-  currentPage,
-  releaseVersion,
-}: PackageBreadcrumbProps) {
-  return (
-    <Breadcrumb className="mb-4">
-      <BreadcrumbList>
-        {/* Author */}
-        <BreadcrumbItem>
-          <BreadcrumbLink asChild>
-            <Link href={`/${author}`}>{author}</Link>
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <span>/</span>
-        </BreadcrumbSeparator>
-
-        {/* Package */}
-        <BreadcrumbItem>
-          <BreadcrumbLink asChild>
-            <Link href={`/${packageName}`}>{unscopedName || packageName}</Link>
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <span>/</span>
-        </BreadcrumbSeparator>
-
-        {/* Releases */}
-        {(currentPage === "releases" ||
-          releaseVersion ||
-          currentPage === "builds") && (
-          <>
-            <BreadcrumbItem>
-              {currentPage === "releases" ? (
-                <BreadcrumbPage>releases</BreadcrumbPage>
-              ) : (
-                <BreadcrumbLink asChild>
-                  <Link href={`/${packageName}/releases`}>releases</Link>
-                </BreadcrumbLink>
-              )}
-            </BreadcrumbItem>
-            <BreadcrumbSeparator>
-              <span>/</span>
-            </BreadcrumbSeparator>
-          </>
-        )}
-
-        {/* Release Version */}
-        {releaseVersion && (
-          <>
-            <BreadcrumbItem>
-              {currentPage === "builds" ? (
-                <BreadcrumbLink asChild>
-                  <Link href={`/${packageName}/releases/${releaseVersion}`}>
-                    {releaseVersion}
-                  </Link>
-                </BreadcrumbLink>
-              ) : (
-                <BreadcrumbPage>{releaseVersion}</BreadcrumbPage>
-              )}
-            </BreadcrumbItem>
-            {currentPage === "builds" && (
-              <>
-                <BreadcrumbSeparator>
-                  <span>/</span>
-                </BreadcrumbSeparator>
-                <BreadcrumbItem>
-                  <BreadcrumbPage>builds</BreadcrumbPage>
-                </BreadcrumbItem>
-              </>
-            )}
-          </>
-        )}
-
-        {/* Other current pages */}
-        {currentPage && !["releases", "builds"].includes(currentPage) && (
-          <BreadcrumbItem>
-            <BreadcrumbPage>{currentPage}</BreadcrumbPage>
-          </BreadcrumbItem>
-        )}
-      </BreadcrumbList>
-    </Breadcrumb>
-  )
-}

package/src/components/PackageBuildsPage/ErrorObject.ts

@@ -1,12 +0,0 @@
-export type ErrorObjectOrString =
-  | {
-      message: string
-    }
-  | string
-
-export const getErrorText = (error: ErrorObjectOrString) => {
-  if (typeof error === "string") {
-    return error
-  }
-  return error.message
-}

package/src/components/PackageBuildsPage/capitalCase.ts

@@ -1,4 +0,0 @@
-export const capitalCase = (str: string | null | undefined) => {
-  if (!str) return ""
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}

package/src/components/PackageBuildsPage/getColorForDisplayStatus.ts

@@ -1,17 +0,0 @@
-import { PackageRelease } from "fake-snippets-api/lib/db/schema"
-
-export const getColorForDisplayStatus = (
-  display_status?: PackageRelease["display_status"] | null,
-) => {
-  switch (display_status) {
-    case "pending":
-      return "bg-yellow-500"
-    case "building":
-      return "bg-blue-500"
-    case "complete":
-      return "bg-green-500"
-    case "error":
-      return "bg-red-500"
-  }
-  return "bg-gray-500"
-}