@tscircuit/fake-snippets 0.0.1

package/src/components/HeaderDropdown.tsx

@@ -0,0 +1,83 @@
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { cn } from "@/lib/utils"
+import { ChevronDown, FileUp, Upload, Zap } from "lucide-react"
+import { PrefetchPageLink } from "./PrefetchPageLink"
+
+export default function HeaderDropdown() {
+  const blankTemplates = [
+    { name: "Blank Circuit Board", type: "board", badgeColor: "bg-blue-500" },
+    {
+      name: "Blank Circuit Module",
+      type: "package",
+      badgeColor: "bg-green-500",
+    },
+    {
+      name: "Blank 3D Model",
+      type: "model",
+      badgeColor: "bg-purple-500 ",
+      disabled: true,
+    },
+    {
+      name: "Blank Footprint",
+      type: "footprint",
+      badgeColor: "bg-pink-500 ",
+      disabled: true,
+    },
+  ]
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          size="sm"
+          variant="default"
+          className="bg-blue-600 hover:bg-blue-700"
+        >
+          New <ChevronDown className="ml-1 h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-fit">
+        <DropdownMenuItem asChild>
+          <PrefetchPageLink
+            href="/quickstart"
+            className="flex items-center cursor-pointer"
+          >
+            <Zap className="mr-2 h-3 w-3" />
+            Quickstart Templates
+          </PrefetchPageLink>
+        </DropdownMenuItem>
+        {blankTemplates.map((template, index) => (
+          <DropdownMenuItem key={index} asChild disabled={template.disabled}>
+            <a
+              href={`/editor?template=${template.name.toLowerCase().replace(/ /g, "-")}`}
+              className={cn(
+                "flex items-center cursor-pointer",
+                template.disabled && "opacity-50 cursor-not-allowed",
+              )}
+            >
+              <span
+                className={`w-2 h-2 rounded-full mr-2 ${template.badgeColor}`}
+              />
+              {template.name}
+            </a>
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuItem asChild>
+          <PrefetchPageLink
+            href="/quickstart"
+            className="flex items-center cursor-pointer"
+          >
+            <Upload className="mr-2 h-3 w-3" />
+            Import Part
+          </PrefetchPageLink>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/components/HeaderLogin.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from "react"
+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 { Link, useLocation, useRouter } from "wouter"
+import { User } from "lucide-react"
+import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { useAccountBalance } from "@/hooks/use-account-balance"
+import { useIsUsingFakeApi } from "@/hooks/use-is-using-fake-api"
+import { useSignIn } from "@/hooks/use-sign-in"
+
+interface HeaderLoginProps {}
+
+export const HeaderLogin: React.FC<HeaderLoginProps> = () => {
+  const [, setLocation] = useLocation()
+  const session = useGlobalStore((s) => s.session)
+  const isLoggedIn = Boolean(session)
+  const setSession = useGlobalStore((s) => s.setSession)
+  const snippetsBaseApiUrl = useSnippetsBaseApiUrl()
+  const isUsingFakeApi = useIsUsingFakeApi()
+  const signIn = useSignIn()
+  const { data: accountBalance } = useAccountBalance()
+
+  if (!isLoggedIn) {
+    const handleLogin = () => {
+      if (isUsingFakeApi) {
+        setSession({
+          account_id: "account-1234",
+          github_username: "testuser",
+          token: "1234",
+          session_id: "session-1234",
+        })
+      } else {
+        signIn()
+      }
+    }
+    return (
+      <div className="flex items-center space-x-2 justify-end">
+        <Button onClick={() => signIn()} variant="ghost">
+          Log in
+        </Button>
+        <Button onClick={() => signIn()}>Get Started</Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex justify-end items-center">
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Avatar className="w-8 h-8 login-avatar">
+            <AvatarImage
+              src={`https://github.com/${session?.github_username}.png`}
+              alt={`${session?.github_username}'s profile picture`}
+            />
+            <AvatarFallback aria-label="User avatar fallback">
+              <User size={16} aria-hidden="true" />
+            </AvatarFallback>
+          </Avatar>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem className="text-gray-500 text-xs" disabled>
+            AI Usage $
+            {accountBalance?.monthly_ai_budget_used_usd.toFixed(2) ?? "0.00"} /
+            $5.00
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => setLocation(`/${session?.github_username}`)}
+          >
+            My Profile
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => setLocation("/dashboard")}>
+            Dashboard
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => setLocation("/my-orders")}>
+            My Orders
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => setLocation("/settings")}>
+            Settings
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => setSession(null)}>
+            Sign out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}

package/src/components/JLCPCBImportDialog.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from "react"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { useAxios } from "@/hooks/use-axios"
+import { useToast } from "@/hooks/use-toast"
+import { useLocation } from "wouter"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { PrefetchPageLink } from "./PrefetchPageLink"
+
+interface JLCPCBImportDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function JLCPCBImportDialog({
+  open,
+  onOpenChange,
+}: JLCPCBImportDialogProps) {
+  const [partNumber, setPartNumber] = useState("")
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const axios = useAxios()
+  const { toast } = useToast()
+  const [, navigate] = useLocation()
+  const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
+  const session = useGlobalStore((s) => s.session)
+
+  const handleImport = async () => {
+    if (!partNumber.startsWith("C")) {
+      toast({
+        title: "Invalid Part Number",
+        description: "JLCPCB part numbers should start with 'C'.",
+        variant: "destructive",
+      })
+      return
+    }
+
+    setIsLoading(true)
+    setError(null)
+    try {
+      // Check that module doesn't already exist
+      const existingSnippetRes = await axios.get(
+        `/snippets/get?owner_name=${session?.github_username}&unscoped_name=${partNumber}`,
+        {
+          validateStatus: (status) => true,
+        },
+      )
+
+      if (existingSnippetRes.status !== 404) {
+        toast({
+          title: "JLCPCB Part Already Imported",
+          description: (
+            <div>
+              <PrefetchPageLink
+                className="text-blue-500 hover:underline"
+                href={`/editor?snippet_id=${existingSnippetRes.data.snippet.snippet_id}`}
+              >
+                View {partNumber}
+              </PrefetchPageLink>
+            </div>
+          ),
+        })
+        return
+      }
+
+      const response = await axios
+        .post("/snippets/generate_from_jlcpcb", {
+          jlcpcb_part_number: partNumber,
+        })
+        .catch((e) => e)
+      const { snippet, error } = response.data
+      if (error) {
+        setError(error.message)
+        setIsLoading(false)
+        return
+      }
+      toast({
+        title: "Import Successful",
+        description: "JLCPCB component has been imported successfully.",
+      })
+      onOpenChange(false)
+      navigate(`/editor?snippet_id=${snippet.snippet_id}`)
+    } catch (error) {
+      console.error("Error importing JLCPCB component:", error)
+      toast({
+        title: "Import Failed",
+        description: "Failed to import the JLCPCB component. Please try again.",
+        variant: "destructive",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Import from JLCPCB</DialogTitle>
+        </DialogHeader>
+        <div className="py-4">
+          <a
+            href="https://yaqwsx.github.io/jlcparts/#/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-500 hover:underline opacity-80"
+          >
+            JLCPCB Part Search
+          </a>
+          <Input
+            className="mt-3"
+            placeholder="Enter JLCPCB part number (e.g., C46749)"
+            value={partNumber}
+            onChange={(e) => setPartNumber(e.target.value)}
+          />
+          {error && <p className="bg-red-100 p-2 mt-2 pre-wrap">{error}</p>}
+          {error && (
+            <div className="flex justify-end mt-2">
+              <Button
+                variant="default"
+                onClick={() => {
+                  const issueTitle = `[${partNumber}] Failed to import from JLCPCB`
+                  const issueBody = `I tried to import the part number ${partNumber} from JLCPCB, but it failed. Here's the error I got:\n\`\`\`\n${error}\n\`\`\`\n\nCould be an issue in \`fetchEasyEDAComponent\` or \`convertRawEasyEdaToTs\``
+                  const issueLabels = "snippets,good first issue"
+                  const url = `https://github.com/tscircuit/easyeda-converter/issues/new?title=${encodeURIComponent(issueTitle)}&body=${encodeURIComponent(issueBody)}&labels=${encodeURIComponent(issueLabels)}`
+
+                  // Open the issue in a new tab
+                  window.open(url, "_blank")
+                }}
+              >
+                File Issue on Github (prefilled)
+              </Button>
+            </div>
+          )}
+        </div>
+        <DialogFooter>
+          <Button onClick={handleImport} disabled={isLoading || !isLoggedIn}>
+            {!isLoggedIn
+              ? "Must be logged in for jlcpcb import"
+              : isLoading
+                ? "Importing..."
+                : "Import"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/LandingHero.tsx

@@ -0,0 +1,175 @@
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Link, useLocation } from "wouter"
+import { useGlobalStore } from "../hooks/use-global-store"
+import { CreateNewSnippetWithAiHero } from "./CreateNewSnippetWithAiHero"
+import { TypeBadge } from "./TypeBadge"
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import { Star } from "lucide-react"
+import { Snippet } from "fake-snippets-api/lib/db/schema"
+import { StarFilledIcon } from "@radix-ui/react-icons"
+
+export const LandingHero = () => {
+  const { should_onboarding_tips_be_closed, setOnboardingTipsClosed } =
+    useGlobalStore((state) => ({
+      should_onboarding_tips_be_closed: state.should_onboarding_tips_be_closed,
+      setOnboardingTipsClosed: state.setOnboardingTipsClosed,
+    }))
+  const [, setLocation] = useLocation()
+  const axios = useAxios()
+
+  const { data: trendingSnippets } = useQuery<Snippet[]>(
+    "trendingSnippets",
+    async () => {
+      const response = await axios.get("/snippets/list_trending")
+      return response.data.snippets
+    },
+  )
+
+  return (
+    <div className="p-6">
+      <div className="mb-12">
+        <h1 className="text-xl font-bold mb-4">
+          Design Circuit Boards with Code
+        </h1>
+        <p className="text-lg text-gray-600 mb-8 max-w-2xl">
+          tscircuit is an open-source library
+          <a
+            href="https://github.com/tscircuit/tscircuit"
+            className="inline-flex items-center translate-y-[3px]"
+          >
+            <img
+              src="https://img.shields.io/github/stars/tscircuit/tscircuit?style=social"
+              alt="GitHub stars"
+              className="mx-1"
+            />
+          </a>
+          for creating and sharing electronic designs using TypeScript and
+          React. Design functional circuit boards you can actually order using
+          code, completely in your browser!
+        </p>
+
+        {trendingSnippets && trendingSnippets.length > 0 && (
+          <div className="mb-8">
+            <h2 className="text-xl font-semibold mb-4">Trending Snippets</h2>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              {trendingSnippets.slice(0, 6).map((snippet) => (
+                <Link
+                  key={snippet.snippet_id}
+                  href={`/${snippet.owner_name}/${snippet.unscoped_name}`}
+                  className="text-sm flex justify-between text-blue-600 py-3 px-3 border border-gray-300 shadow rounded-sm m-0 items-center"
+                >
+                  <div className="truncate max-w-[80%]">
+                    {snippet.owner_name}/{snippet.unscoped_name}
+                  </div>
+                  <div className="flex items-center ml-2 flex-shrink-0">
+                    {snippet.star_count || 0}
+                    <StarFilledIcon className="w-3 h-3 ml-1" />
+                  </div>
+                </Link>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {!should_onboarding_tips_be_closed && (
+          <Card className="mb-6 bg-gray-50 rounded-sm">
+            <CardHeader className="p-3 pl-8">
+              <CardTitle className="flex justify-between items-center">
+                <div className="pt-2">Onboarding Tips</div>
+                <Button
+                  variant="ghost"
+                  className="text-gray-400 text-2xl"
+                  onClick={() =>
+                    setOnboardingTipsClosed(!should_onboarding_tips_be_closed)
+                  }
+                >
+                  &times;
+                </Button>
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ul className="list-disc marker:text-gray-400 pl-5 space-y-2">
+                <li>
+                  tscircuit snippets are React components that turn into
+                  manufacturable circuit boards, circuit modules, 3D models or
+                  footprints.
+                </li>
+                <li>
+                  You can design full boards, or individual components like
+                  chips
+                </li>
+                <li>
+                  You can export snippets to{" "}
+                  <a href="#" className="text-blue-600">
+                    KiCad
+                  </a>
+                  ,{" "}
+                  <a href="#" className="text-blue-600">
+                    Gerbers
+                  </a>
+                  ,{" "}
+                  <a href="#" className="text-blue-600">
+                    STEP
+                  </a>
+                  , and other formats
+                </li>
+                <li>Press "import" when coding to import other snippets</li>
+              </ul>
+            </CardContent>
+          </Card>
+        )}
+
+        <div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
+          <div>
+            <Link href="/editor?template=blank-circuit-board">
+              <Button className="w-full justify-between mb-2 px-2">
+                Create new <TypeBadge type="board" className="ml-2" />
+              </Button>
+            </Link>
+            <p className="text-sm text-gray-600">
+              A printed circuit board containing multiple chips, resistors and
+              capacitors to form a functional, manufacturable electronic device.
+            </p>
+          </div>
+          <div>
+            <Link href="/editor?template=blank-circuit-module">
+              <Button className="w-full justify-between mb-2 px-2">
+                Create new <TypeBadge type="package" className="ml-2" />
+              </Button>
+            </Link>
+            <p className="text-sm text-gray-600">
+              A chip or circuit module that you'd like to use as part of a
+              larger package.
+            </p>
+          </div>
+          <div>
+            <Link href="/editor?template=blank-footprint">
+              <Button className="w-full justify-between mb-2 px-2">
+                Create new <TypeBadge type="footprint" className="ml-2" />
+              </Button>
+            </Link>
+            <p className="text-sm text-gray-600">
+              A footprint or landing-pattern for a component. This is usually
+              used as part of a chip.
+            </p>
+          </div>
+          <div>
+            <Link href="/editor?template=blank-3d-model">
+              <Button className="w-full justify-between mb-2 px-2">
+                Create new <TypeBadge type="model" className="ml-2" />
+              </Button>
+            </Link>
+            <p className="text-sm text-gray-600">
+              A 3d model of a component. This is usually used as part of a chip.
+            </p>
+          </div>
+        </div>
+        <div className="mt-6">
+          <CreateNewSnippetWithAiHero />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/LatestSnippets.tsx

@@ -0,0 +1,39 @@
+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_newest")
+    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/OptimizedImage.tsx

@@ -0,0 +1,96 @@
+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
+}
+
+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,
+  ...props
+}: OptimizedImageProps) {
+  const [imageLoading, setImageLoading] = useState(true)
+  const { srcSet, sizes } = getImageSizes(src)
+
+  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={src}
+      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={(e) => {
+        console.error("Image failed to load:", e)
+        setImageLoading(false)
+      }}
+      {...props}
+    />
+  )
+}