@tscircuit/fake-snippets 0.0.121 → 0.0.123

package/src/pages/dashboard.tsx

@@ -1,254 +0,0 @@
-import React, { useState } from "react"
-import { useQuery } from "react-query"
-import { useAxios } from "@/hooks/use-axios"
-import Header from "@/components/Header"
-import Footer from "@/components/Footer"
-import { Package } from "fake-snippets-api/lib/db/schema"
-import { Edit2, KeyRound } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { useGlobalStore } from "@/hooks/use-global-store"
-import { Link } from "wouter"
-import { PackagesList } from "@/components/PackagesList"
-import { Helmet } from "react-helmet-async"
-import { useSignIn } from "@/hooks/use-sign-in"
-import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
-import { useConfirmDeletePackageDialog } from "@/components/dialogs/confirm-delete-package-dialog"
-import { PackageCardSkeleton } from "@/components/PackageCardSkeleton"
-import { PackageCard } from "@/components/PackageCard"
-import { useListUserOrgs } from "@/hooks/use-list-user-orgs"
-import { OrganizationCard } from "@/components/organization/OrganizationCard"
-
-export const DashboardPage = () => {
-  const axios = useAxios()
-  const { data: organizations } = useListUserOrgs()
-
-  const currentUser = useGlobalStore((s) => s.session?.github_username)
-  const isLoggedIn = Boolean(currentUser)
-  const signIn = useSignIn()
-
-  const [showAllTrending, setShowAllTrending] = useState(false)
-  const [showAllLatest, setShowAllLatest] = useState(false)
-  const [packageToDelete, setPackageToDelete] = useState<Package | null>(null)
-  const { Dialog: DeleteDialog, openDialog: openDeleteDialog } =
-    useConfirmDeletePackageDialog()
-
-  const {
-    data: myPackages,
-    isLoading,
-    error,
-    refetch: refetchUserPackages,
-  } = useQuery<Package[]>(
-    ["userPackages", currentUser],
-    async () => {
-      const response = await axios.post(`/packages/list`, {
-        owner_github_username: currentUser,
-      })
-      return response.data.packages
-    },
-    {
-      enabled: isLoggedIn,
-      select: (data: Package[]) => {
-        return [...data].sort(
-          (a: Package, b: Package) =>
-            new Date(b.updated_at || b.created_at).getTime() -
-            new Date(a.updated_at || a.created_at).getTime(),
-        )
-      },
-    },
-  )
-
-  const { data: trendingPackages } = useQuery<Package[]>(
-    "trendingPackages",
-    async () => {
-      const response = await axios.get("/packages/list_trending")
-      return response.data.packages
-    },
-    {
-      refetchOnWindowFocus: false,
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-    },
-  )
-
-  const { data: latestPackages } = useQuery<Package[]>(
-    "latestPackages",
-    async () => {
-      const response = await axios.get("/packages/list_latest", {
-        params: {
-          limit: 10,
-        },
-      })
-      return response.data.packages
-    },
-    {
-      refetchOnWindowFocus: false,
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-    },
-  )
-
-  const baseUrl = useApiBaseUrl()
-
-  const handleDeleteClick = (e: React.MouseEvent, pkg: Package) => {
-    e.preventDefault() // Prevent navigation
-    setPackageToDelete(pkg)
-    openDeleteDialog()
-  }
-  return (
-    <div>
-      <Helmet>
-        <title>Dashboard - tscircuit</title>
-      </Helmet>
-      <Header />
-      <div className="container mx-auto px-4 py-8 min-h-[80vh]">
-        <div className="flex items-center justify-between mb-6">
-          <h1 className="text-3xl font-bold">Dashboard</h1>
-        </div>
-        <div className="flex md:flex-row flex-col">
-          <div className="md:w-3/4 p-0 md:pr-6">
-            {!isLoggedIn ? (
-              <div className="flex flex-col items-center justify-center h-64 rounded-md p-4 mt-[40px] mb-2 sm:mb-4">
-                <div className="p-4 mb-4 rounded-full bg-blue-50 border border-blue-100 shadow-sm">
-                  <KeyRound className="text-blue-500" size={32} />
-                </div>
-                <h2 className="text-xl sm:text-2xl font-bold text-gray-800 mb-3">
-                  You're not logged in
-                </h2>
-
-                <p className="text-gray-600 mb-6 text-center max-w-md text-sm sm:text-base">
-                  Log in to access your dashboard and manage your packages.
-                </p>
-                <Button onClick={() => signIn()} variant="outline">
-                  Log In
-                </Button>
-              </div>
-            ) : (
-              <>
-                <div className="mt-6 mb-4">
-                  <div className="flex items-center">
-                    <h2 className="text-sm text-gray-600 whitespace-nowrap">
-                      Edit Recent
-                    </h2>
-                    <div className="flex gap-2 items-center overflow-x-scroll md:overflow-hidden">
-                      {myPackages &&
-                        myPackages.slice(0, 3).map((pkg) => (
-                          <div key={pkg.package_id}>
-                            <Link
-                              href={`/editor?package_id=${pkg.package_id}`}
-                              className="text-blue-600 hover:underline"
-                            >
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                className="font-medium"
-                              >
-                                {pkg.unscoped_name}
-                                <Edit2 className="w-3 h-3 ml-2" />
-                              </Button>
-                            </Link>
-                          </div>
-                        ))}
-                    </div>
-                  </div>
-                </div>
-                {/* <CreateNewSnippetWithAiHero/> */}
-                <h2 className="text-sm font-bold mb-2 text-gray-700 border-b border-gray-200">
-                  Your Recent Packages
-                </h2>
-                {isLoading && (
-                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-                    {[...Array(6)].map((_, i) => (
-                      <PackageCardSkeleton key={i} />
-                    ))}
-                  </div>
-                )}
-                {myPackages && myPackages.length > 0 ? (
-                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-                    {myPackages.slice(0, 10).map((pkg) => (
-                      <PackageCard
-                        key={pkg.package_id}
-                        pkg={pkg}
-                        isCurrentUserPackage={
-                          pkg.owner_github_username === currentUser
-                        }
-                        onDeleteClick={handleDeleteClick}
-                      />
-                    ))}
-                  </div>
-                ) : (
-                  !isLoading &&
-                  myPackages?.length === 0 && (
-                    <span className="font-medium text-sm text-gray-500">
-                      No packages found
-                    </span>
-                  )
-                )}
-                {myPackages && myPackages.length > 10 && (
-                  <Link
-                    href={`/${currentUser}`}
-                    className="text-sm text-blue-600 hover:underline mt-2 inline-block"
-                  >
-                    View all packages
-                  </Link>
-                )}
-
-                {/* Organizations Section */}
-                {organizations && organizations.length > 0 && (
-                  <div className="mt-8">
-                    <h2 className="text-sm font-bold mb-2 text-gray-700 border-b border-gray-200">
-                      Your Organizations
-                    </h2>
-                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-                      {organizations?.slice(0, 4).map((org: any, i: number) => (
-                        <OrganizationCard
-                          key={i}
-                          organization={org}
-                          withLink={true}
-                          showStats={true}
-                          showMembers={true}
-                        />
-                      ))}
-                    </div>
-                    {organizations && organizations.length > 4 && (
-                      <Link
-                        href="/organizations"
-                        className="text-sm text-blue-600 hover:underline mt-2 inline-block"
-                      >
-                        View all organizations
-                      </Link>
-                    )}
-                  </div>
-                )}
-              </>
-            )}
-          </div>
-          <div className="md:w-1/4">
-            <PackagesList
-              title="Trending Packages"
-              packages={trendingPackages}
-              showAll={showAllTrending}
-              onToggleShowAll={() => setShowAllTrending(!showAllTrending)}
-            />
-            <div className="mt-8">
-              <PackagesList
-                title="Latest Packages"
-                packages={latestPackages}
-                showAll={showAllLatest}
-                onToggleShowAll={() => setShowAllLatest(!showAllLatest)}
-              />
-            </div>
-          </div>
-        </div>
-        {packageToDelete && (
-          <DeleteDialog
-            packageId={packageToDelete.package_id}
-            packageName={packageToDelete.unscoped_name}
-            packageOwner={packageToDelete.owner_github_username ?? ""}
-            refetchUserPackages={refetchUserPackages}
-          />
-        )}
-      </div>
-      <Footer />
-    </div>
-  )
-}

package/src/pages/datasheet.tsx

@@ -1,198 +0,0 @@
-import { useParams } from "wouter"
-import { useDatasheet } from "@/hooks/use-datasheet"
-import { useCreateDatasheet } from "@/hooks/use-create-datasheet"
-import Header from "@/components/Header"
-import Footer from "@/components/Footer"
-import ExpandableText from "@/components/ExpandableText"
-import type { Datasheet } from "fake-snippets-api/lib/db/schema"
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Loader2, AlertCircle, FileText } from "lucide-react"
-
-const SectionCard = ({
-  title,
-  children,
-}: { title: string; children: React.ReactNode }) => (
-  <Card className="mb-6">
-    <CardHeader className="pb-2">
-      <CardTitle className="text-xl font-semibold">{title}</CardTitle>
-    </CardHeader>
-    <CardContent>{children}</CardContent>
-  </Card>
-)
-
-export const DatasheetPage = () => {
-  const { chipName } = useParams<{ chipName: string }>()
-  const datasheetQuery = useDatasheet(chipName)
-  const createDatasheet = useCreateDatasheet()
-
-  const handleCreate = () => {
-    if (!chipName) return
-    createDatasheet.mutate({ chip_name: chipName })
-  }
-
-  return (
-    <div className="min-h-screen flex flex-col">
-      <Header />
-      <main className="flex-grow  mx-auto px-4 md:px-20 lg:px-28 py-8 w-full">
-        <div className="mb-8">
-          <h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-2 break-words">
-            {chipName} Datasheet
-          </h1>
-          <p className="text-lg text-gray-600 mb-4">
-            View and download the datasheet for{" "}
-            <span className="font-semibold text-gray-800">{chipName}</span>. If
-            the datasheet is not available, you can request its creation.
-          </p>
-          <a
-            href={`https://api.tscircuit.com/datasheets/get?chip_name=${encodeURIComponent(chipName)}`}
-            className="inline-flex items-center gap-1 text-blue-600 hover:underline text-sm font-medium"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <FileText className="w-4 h-4" /> Download JSON
-          </a>
-        </div>
-
-        {datasheetQuery.isLoading ? (
-          <div className="flex flex-col items-center justify-center py-20">
-            <Loader2 className="w-10 h-10 animate-spin text-blue-500 mb-4" />
-            <h3 className="text-xl font-semibold mb-2">Loading Datasheet...</h3>
-            <p className="text-gray-500 max-w-md text-center">
-              Please wait while we fetch the datasheet information for{" "}
-              <span className="font-semibold">{chipName}</span>.
-            </p>
-          </div>
-        ) : datasheetQuery.data ? (
-          <>
-            {!(
-              datasheetQuery.data.pin_information ||
-              datasheetQuery.data.datasheet_pdf_urls
-            ) && (
-              <SectionCard title="Processing">
-                <div className="flex items-center gap-3 text-yellow-700">
-                  <Loader2 className="w-5 h-5 animate-spin" />
-                  <span>Datasheet is processing. Please check back later.</span>
-                </div>
-              </SectionCard>
-            )}
-
-            <SectionCard title="Description">
-              {datasheetQuery.data.ai_description ? (
-                <div className="flex items-center gap-3 text-gray-500">
-                  <span>{datasheetQuery.data.ai_description}</span>
-                </div>
-              ) : (
-                <p className="text-gray-500">No description available.</p>
-              )}
-            </SectionCard>
-
-            <SectionCard title="PDFs">
-              {datasheetQuery.data.datasheet_pdf_urls &&
-              datasheetQuery.data.datasheet_pdf_urls.length > 0 ? (
-                <ul className="list-disc pl-5 space-y-2">
-                  {datasheetQuery.data.datasheet_pdf_urls.map((url) => (
-                    <li key={url}>
-                      <a
-                        href={url}
-                        className="text-blue-600 underline break-all"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        {url}
-                      </a>
-                    </li>
-                  ))}
-                </ul>
-              ) : (
-                <p className="text-gray-500">No datasheet PDFs available.</p>
-              )}
-            </SectionCard>
-
-            <SectionCard title="Pin Information">
-              {datasheetQuery.data.pin_information &&
-              datasheetQuery.data.pin_information.length > 0 ? (
-                <div className="overflow-x-auto">
-                  <table className="min-w-full border-collapse text-sm">
-                    <thead>
-                      <tr>
-                        <th className="border-b px-3 py-2 text-left font-semibold">
-                          Pin
-                        </th>
-                        <th className="border-b px-3 py-2 text-left font-semibold">
-                          Name
-                        </th>
-                        <th className="border-b px-3 py-2 text-left font-semibold">
-                          Description
-                        </th>
-                        <th className="border-b px-3 py-2 text-left font-semibold">
-                          Capabilities
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {datasheetQuery.data.pin_information.map((pin) => (
-                        <tr key={pin.pin_number} className="hover:bg-gray-50">
-                          <td className="border-b px-3 py-2 font-mono">
-                            {pin.pin_number}
-                          </td>
-                          <td className="border-b px-3 py-2">{pin.name}</td>
-                          <td className="border-b px-3 py-2">
-                            {pin.description}
-                          </td>
-                          <td className="border-b px-3 py-2">
-                            <ExpandableText
-                              text={pin.capabilities.join(", ")}
-                              maxChars={30}
-                            />
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              ) : (
-                <p className="text-gray-500">No pin information available.</p>
-              )}
-            </SectionCard>
-          </>
-        ) : datasheetQuery.error &&
-          (datasheetQuery.error as any).status === 404 ? (
-          <SectionCard title="No Datasheet Found">
-            <div className="flex flex-col items-center gap-4">
-              <AlertCircle className="w-8 h-8 text-red-500" />
-              <p className="text-gray-700 text-center">
-                No datasheet found for{" "}
-                <span className="font-semibold">{chipName}</span>.<br />
-                You can request its creation below.
-              </p>
-              <Button
-                className="mt-2"
-                onClick={handleCreate}
-                disabled={createDatasheet.isLoading}
-                size="lg"
-              >
-                {createDatasheet.isLoading ? "Creating..." : "Create Datasheet"}
-              </Button>
-            </div>
-          </SectionCard>
-        ) : (
-          <div className="flex flex-col items-center justify-center py-16">
-            <AlertCircle className="w-10 h-10 text-red-500 mb-4" />
-            <h3 className="text-xl font-semibold mb-2">
-              Error loading datasheet
-            </h3>
-            <p className="text-gray-500 max-w-md text-center">
-              There was an error loading the datasheet for{" "}
-              <span className="font-semibold">{chipName}</span>. Please try
-              again later.
-            </p>
-          </div>
-        )}
-      </main>
-      <Footer />
-    </div>
-  )
-}
-
-export default DatasheetPage

package/src/pages/datasheets.tsx

@@ -1,148 +0,0 @@
-import React, { useState } from "react"
-import { useQuery } from "react-query"
-import { useAxios } from "@/hooks/use-axios"
-import { useCreateDatasheet } from "@/hooks/use-create-datasheet"
-import Header from "@/components/Header"
-import Footer from "@/components/Footer"
-import { Input } from "@/components/ui/input"
-import { Loader2, Search } from "lucide-react"
-import { Link, useLocation } from "wouter"
-
-interface DatasheetSummary {
-  datasheet_id: string
-  chip_name: string
-}
-
-export const DatasheetsPage: React.FC = () => {
-  const axios = useAxios()
-  const [, navigate] = useLocation()
-  const createDatasheet = useCreateDatasheet({
-    onSuccess: (datasheet) => navigate(`/datasheets/${datasheet.chip_name}`),
-  })
-  const [searchQuery, setSearchQuery] = useState("")
-
-  const {
-    data: datasheets,
-    isLoading,
-    error,
-  } = useQuery(
-    ["datasheetList", searchQuery],
-    async () => {
-      const params = new URLSearchParams()
-      if (searchQuery) {
-        params.append("chip_name", searchQuery)
-      } else {
-        params.append("is_popular", "true")
-      }
-      const { data } = await axios.get(`/datasheets/list?${params.toString()}`)
-      return data.datasheets as DatasheetSummary[]
-    },
-    { keepPreviousData: true },
-  )
-
-  return (
-    <div className="min-h-screen flex flex-col">
-      <Header />
-      <main className="flex-grow container mx-auto px-4 py-8 min-h-[80vh]">
-        <div className="mb-8 max-w-3xl">
-          <div className="flex items-center gap-2 mb-3">
-            <h1 className="text-4xl font-bold text-gray-900">Datasheets</h1>
-          </div>
-          <p className="text-lg text-gray-600 mb-4">
-            Explore datasheets for popular electronic components and chips.
-            Search to find specific ones.
-          </p>
-        </div>
-
-        <div className="mb-6">
-          <div className="flex flex-col sm:flex-row gap-4 mb-4">
-            <div className="relative flex-grow">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
-              <Input
-                type="search"
-                placeholder="Search datasheets..."
-                className="pl-10"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                aria-label="Search datasheets"
-                role="searchbox"
-              />
-            </div>
-          </div>
-        </div>
-
-        {isLoading ? (
-          <div className="text-center py-20 px-4">
-            <div className="bg-slate-50 inline-flex rounded-full p-4 mb-4">
-              <Loader2 className="size-8 animate-spin text-slate-400" />
-            </div>
-            <h3 className="text-xl font-medium text-slate-900 mb-2">
-              Loading Datasheets
-            </h3>
-            <p className="text-slate-500 max-w-md mx-auto mb-6">
-              Please wait while we fetch the datasheets...
-            </p>
-          </div>
-        ) : error ? (
-          <div className="bg-red-50 border border-red-200 text-red-700 p-6 rounded-xl shadow-sm max-w-2xl mx-auto">
-            <div className="flex items-start">
-              <div className="mr-4 bg-red-100 p-2 rounded-full">
-                <Search className="w-6 h-6 text-red-600" />
-              </div>
-              <div>
-                <h3 className="text-lg font-semibold mb-2">
-                  Error Loading Datasheets
-                </h3>
-                <p className="text-red-600">
-                  We couldn't load the datasheets. Please try again later.
-                </p>
-              </div>
-            </div>
-          </div>
-        ) : datasheets && datasheets.length > 0 ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {datasheets.map((ds) => (
-              <Link
-                key={ds.datasheet_id}
-                href={`/datasheets/${ds.chip_name}`}
-                className="block p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow"
-              >
-                <h3 className="font-semibold text-gray-900">{ds.chip_name}</h3>
-              </Link>
-            ))}
-          </div>
-        ) : (
-          <div className="text-center py-12 px-4">
-            <div className="bg-slate-50 inline-flex rounded-full p-4 mb-4">
-              <Search className="w-8 h-8 text-slate-400" />
-            </div>
-            <h3 className="text-xl font-medium text-slate-900 mb-2">
-              No Matching Datasheets
-            </h3>
-            <p className="text-slate-500 max-w-md mx-auto mb-6">
-              {searchQuery
-                ? `No datasheets match your search for "${searchQuery}".`
-                : "There are no popular datasheets at the moment."}
-            </p>
-            {searchQuery && (
-              <button
-                className="mt-2 px-4 py-2 bg-blue-600 text-white rounded"
-                onClick={() =>
-                  createDatasheet.mutate({ chip_name: searchQuery })
-                }
-                disabled={createDatasheet.isLoading}
-              >
-                {createDatasheet.isLoading
-                  ? "Creating..."
-                  : `Create Datasheet for ${searchQuery}`}
-              </button>
-            )}
-          </div>
-        )}
-      </main>
-      <Footer />
-    </div>
-  )
-}
-
-export default DatasheetsPage

package/src/pages/dev-login.tsx

@@ -1,68 +0,0 @@
-import { useGlobalStore } from "@/hooks/use-global-store"
-import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
-import { useState } from "react"
-import { useLocation } from "wouter"
-
-export const DevLoginPage = () => {
-  const snippetsBaseApiUrl = useApiBaseUrl()
-  const [username, setUsername] = useState("")
-  const setSession = useGlobalStore((s) => s.setSession)
-  const [, setLocation] = useLocation()
-
-  const handleDevLogin = async () => {
-    try {
-      // Call passwordless login endpoint
-      const response = await fetch(
-        `${snippetsBaseApiUrl}/sessions/create_passwordless`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            github_username: username,
-          }),
-        },
-      )
-
-      const data = await response.json()
-      const token = data.session.token
-
-      if (!token) {
-        throw new Error("No token received from server")
-      }
-
-      // Set session in global store
-      setSession({
-        token,
-        account_id: data.session.account_id,
-        session_id: data.session.session_id,
-        github_username: username,
-      })
-
-      // Redirect to home page
-      setLocation("/")
-    } catch (error) {
-      console.error("Dev login failed:", error)
-    }
-  }
-
-  return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
-      <h1 className="text-2xl font-bold mb-4">Development Login</h1>
-      <input
-        type="text"
-        value={username}
-        onChange={(e) => setUsername(e.target.value)}
-        placeholder="Enter GitHub username"
-        className="mb-4 p-2 border border-gray-300 rounded"
-      />
-      <button
-        onClick={handleDevLogin}
-        className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-      >
-        Login
-      </button>
-    </div>
-  )
-}