@tscircuit/fake-snippets 0.0.109 → 0.0.111

package/src/pages/user-settings.tsx

@@ -0,0 +1,161 @@
+import { useState } from "react"
+import { useLocation, Redirect } from "wouter"
+import { Helmet } from "react-helmet-async"
+import { Button } from "@/components/ui/button"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { useToast } from "@/hooks/use-toast"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { useHydration } from "@/hooks/use-hydration"
+import { AlertTriangle, Loader2, Trash2 } from "lucide-react"
+import Header from "@/components/Header"
+import Footer from "@/components/Footer"
+import { FullPageLoader } from "@/App"
+
+export default function UserSettingsPage() {
+  const [, navigate] = useLocation()
+  const { toast } = useToast()
+  const session = useGlobalStore((s) => s.session)
+  const hasHydrated = useHydration()
+
+  const [showDeleteAccountDialog, setShowDeleteAccountDialog] = useState(false)
+
+  if (!hasHydrated) {
+    return <FullPageLoader />
+  }
+
+  if (!session) {
+    return <Redirect to="/" />
+  }
+
+  const pageTitle = "User Settings - tscircuit"
+
+  const handleDeleteAccount = () => {
+    setShowDeleteAccountDialog(true)
+  }
+
+  const confirmDeleteAccount = () => {
+    // TODO: Implement delete account functionality
+    toast({
+      title: "Account deleted",
+      description: "Your account has been permanently deleted.",
+    })
+    navigate("/")
+  }
+
+  return (
+    <div className="min-h-screen bg-white">
+      <Helmet>
+        <title>{pageTitle}</title>
+      </Helmet>
+      <Header />
+
+      <section className="w-full px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16">
+        <div className="max-w-7xl mx-auto py-8">
+          <div className="mb-8">
+            <div className="flex items-center gap-4 mb-6">
+              <Avatar className="h-16 w-16 border-2 border-gray-200 shadow-sm">
+                <AvatarImage
+                  src={`https://github.com/${session.github_username}.png`}
+                  alt={`${session.github_username} avatar`}
+                />
+                <AvatarFallback className="text-lg bg-gradient-to-br from-blue-100 to-indigo-100 text-blue-700 font-medium">
+                  {(session.github_username || session.account_id || "")
+                    .slice(0, 2)
+                    .toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <div>
+                <h1 className="text-3xl font-bold text-gray-900">
+                  Account Settings
+                </h1>
+                <p className="text-gray-600 mt-1">
+                  Manage your account preferences and settings
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-8">
+            <div className="bg-white border border-red-200 rounded-xl shadow-sm">
+              <div className="px-6 py-5 border-b border-red-200 bg-red-50 rounded-t-xl">
+                <h2 className="text-xl font-semibold text-red-900">
+                  Danger Zone
+                </h2>
+                <p className="text-sm text-red-600 mt-2">
+                  Irreversible and destructive actions for your account.
+                </p>
+              </div>
+
+              <div className="p-6 lg:p-8">
+                <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
+                  <div className="flex-1">
+                    <h3 className="text-sm font-semibold text-gray-900 mb-2">
+                      Delete Account
+                    </h3>
+                    <p className="text-sm text-gray-500 leading-relaxed">
+                      Permanently delete your account and all associated data.
+                      This action cannot be undone and will remove all your
+                      packages, snippets, and account information.
+                    </p>
+                  </div>
+                  <div className="flex-shrink-0">
+                    <Button
+                      variant="destructive"
+                      onClick={handleDeleteAccount}
+                      className="bg-red-600 hover:bg-red-700 text-white px-6 py-2.5 text-sm font-medium shadow-sm w-full lg:w-auto"
+                    >
+                      <Trash2 className="mr-2 h-4 w-4" />
+                      Delete Account
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+
+      <AlertDialog
+        open={showDeleteAccountDialog}
+        onOpenChange={setShowDeleteAccountDialog}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle className="flex items-center gap-2 text-red-600">
+              <AlertTriangle className="h-5 w-5" />
+              Delete Account
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you absolutely sure you want to delete your account? This
+              action is permanent and cannot be undone. All your packages,
+              snippets, and account data will be permanently removed.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmDeleteAccount}
+              disabled={true}
+              className="bg-red-600 hover:bg-red-700"
+            >
+              {false && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Delete Account
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}

package/src/pages/view-package.tsx

@@ -1,11 +1,11 @@
 import RepoPageContent from "@/components/ViewPackagePage/components/repo-page-content"
 import { usePackageFiles } from "@/hooks/use-package-files"
-import { usePackageRelease } from "@/hooks/use-package-release"
+import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
 import { useLocation, useParams } from "wouter"
 import { Helmet } from "react-helmet-async"
-import { useEffect, useState } from "react"
 import NotFoundPage from "./404"
 import { usePackageByName } from "@/hooks/use-package-by-package-name"
+import { SentryNotFoundReporter } from "@/components/SentryNotFoundReporter"
 
 export const ViewPackagePage = () => {
   const { author, packageName } = useParams()
@@ -19,30 +19,44 @@ export const ViewPackagePage = () => {
     isLoading: isLoadingPackage,
   } = usePackageByName(packageNameFull)
   const {
-    data: packageRelease,
+    packageRelease,
     error: packageReleaseError,
     isLoading: isLoadingPackageRelease,
-  } = usePackageRelease(
-    {
-      is_latest: true,
-      package_name: `${author}/${packageName}`,
-      include_ai_review: true,
-    },
-    {
-      refetchInterval: (data) =>
-        data?.ai_review_requested && !data.ai_review_text ? 2000 : false,
-    },
-  )
+  } = useCurrentPackageRelease({
+    include_ai_review: true,
+    refetchInterval: (data) =>
+      data?.ai_review_requested && !data.ai_review_text ? 2000 : false,
+  })
 
   const { data: packageFiles, isFetched: arePackageFilesFetched } =
     usePackageFiles(packageRelease?.package_release_id)
 
   if (!isLoadingPackage && packageError) {
-    return <NotFoundPage heading="Package Not Found" />
+    return (
+      <>
+        <SentryNotFoundReporter
+          context="package"
+          slug={packageNameFull}
+          status={(packageError as any)?.status}
+          message={packageError.message}
+        />
+        <NotFoundPage heading="Package Not Found" />
+      </>
+    )
   }
 
   if (!isLoadingPackageRelease && packageReleaseError?.status == 404) {
-    return <NotFoundPage heading="Package Not Found" />
+    return (
+      <>
+        <SentryNotFoundReporter
+          context="package_release"
+          slug={packageNameFull}
+          status={packageReleaseError.status}
+          message={packageReleaseError.message}
+        />
+        <NotFoundPage heading="Package Not Found" />
+      </>
+    )
   }
 
   return (

package/vite.config.ts

@@ -183,11 +183,18 @@ export default defineConfig(async (): Promise<UserConfig> => {
     }
   }
 
+  if (process.env.SENTRY_DSN) {
+    process.env.VITE_SENTRY_DSN = process.env.SENTRY_DSN
+  }
+
   return {
     plugins,
     define: {
       global: {},
     },
+    optimizeDeps: {
+      exclude: ["@resvg/resvg-js", "@resvg/resvg-js-darwin-arm64"],
+    },
     server: {
       host: "127.0.0.1",
       proxy: proxyConfig,
@@ -211,11 +218,13 @@ export default defineConfig(async (): Promise<UserConfig> => {
           main: path.resolve(__dirname, "index.html"),
           landing: path.resolve(__dirname, "landing.html"),
         },
+        external: ["@resvg/resvg-js"],
       },
     },
     ssr: {
       noExternal: ["react-dom/client"],
       target: "node",
+      external: ["@resvg/resvg-js", "@resvg/resvg-js-darwin-arm64"],
     },
     resolve: {
       alias: {

package/fake-snippets-api/routes/api/autocomplete/create_autocomplete.ts

@@ -1,133 +0,0 @@
-import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
-import { z } from "zod"
-import OpenAI from "openai"
-
-// Lazy-loaded client instance
-let openai: OpenAI | null = null
-let cachedReadme: string | null = null
-
-function getOpenAIClient() {
-  const apiKey = process.env.VITE_OPENROUTER_API_KEY
-  if (!apiKey) {
-    throw new Error("Missing Api Key in env")
-  }
-
-  if (!openai) {
-    openai = new OpenAI({
-      apiKey,
-      baseURL: "https://openrouter.ai/api/v1",
-      defaultHeaders: {
-        "HTTP-Referer": "https://tscircuit.com",
-        "X-Title": "TSCircuit Editor",
-      },
-    })
-  }
-
-  return openai
-}
-
-// Cache README
-async function getCachedReadme(): Promise<string> {
-  if (cachedReadme !== null) return cachedReadme
-  const res = await fetch(
-    "https://raw.githubusercontent.com/tscircuit/props/main/README.md",
-  )
-  if (!res.ok) {
-    throw new Error(`Failed to fetch README: ${res.status}`)
-  }
-  cachedReadme = await res.text()
-  return cachedReadme
-}
-
-async function completion(
-  openai: OpenAI,
-  readmeContent: string,
-  prefix: string,
-  suffix: string,
-  model = "openai/gpt-4.1-mini",
-  language?: string,
-) {
-  const systemMessage = `You are an expert ${language ? language + " " : ""}programmer working in a TSX (TypeScript + React JSX) environment.
-
-Below is the README.md for the available components. You MUST use this to determine which components and props are valid. 
-Only use components explicitly documented under Available Components in the README. Never invent or guess new components. If the user partially types a component that does not exist in the README, do NOT try to complete it.
-
-===== README.md START =====
-${readmeContent}
-===== README.md END =====
-
-Special instruction for the <chip> component:
-- Do NOT add chip as a prop (e.g., <chip chip="..."> is invalid).
-- Always use this format: 
-  <chip name="U<number>" footprint="<valid footprint>" pinLabels={{}} pcbX={0} pcbY={0} schX={0} schY={0} />
-- Determine the next sequential name automatically: e.g. U1, U2, U3.
-- Only use valid footprints and pinLabels from the README.
-- Some components like <netlabel> do not have a 'name' prop — do not add it for those.
-
-STRICT rules:
-- If partial like "<capa", only append remaining "citor". Never repeat letters. 
-- If input is "<capacitor", add only props, never repeat tag. 
-- Always produce exactly one JSX component, starting with "<" if needed. 
-- If partial doesn’t match any valid component, output nothing. 
-- Never output two JSX elements. Always end with exactly one "/>". 
-- Never add duplicate closing "/>". 
-- Never output the component name as a prop. 
-- Never add whitespace before your completion.
-- If the input is exactly "<", then start with the component name directly (like "resistor ... />") without adding another "<".
-- So that the final result is "<resistor ... />", not "<<resistor ... />".
-- Never produce a double "<".
-
-Examples:
-- Input: "<FILL_ME>"
-  Output: <resistor name="R1" footprint="0603" pcbX={5} pcbY={7} schX={1} schY={2} resistance={1000} />
-- Input: "<ca<FILL_ME>"
-  Output: pacitor name="C1" footprint="0805" pcbX={10} pcbY={15} schX={3} schY={4} />
-- Input: "<chip<FILL_ME>"
-  Output: name="U1" footprint="SOIC-8" pinLabels={{}} pcbX={0} pcbY={0} schX={0} schY={0} />
-- Input: "<netl<FILL_ME>"
-  Output: abel name="N1" />
-- NEVER output: <capacitor capacitor ... /> or <netnet ... />
-- Input: "<"
-  Output: resistor name="R1" footprint="0603" pcbX={5} pcbY={7} schX={1} schY={2} resistance={1000} />
-- Input: "<ca"
-  Output: pacitor name="C1" footprint="0805" pcbX={10} pcbY={15} schX={3} schY={4} />
-- Input: "<capacitor"
-  Output:  capacitance="1000pF" footprint="0805" name="C1" pcbX={10} pcbY={15} schX={3} schY={4} />`
-
-  const chatCompletion = await openai.chat.completions.create({
-    messages: [
-      { role: "system", content: systemMessage },
-      { role: "user", content: `${prefix}<FILL_ME>${suffix}` },
-    ],
-    model,
-  })
-
-  return chatCompletion.choices[0].message?.content ?? ""
-}
-export default withRouteSpec({
-  methods: ["POST"],
-  auth: "session", // ✅ Require user to be signed in
-  jsonBody: z.object({
-    prefix: z.string(),
-    suffix: z.string(),
-    model: z.string().optional(),
-    language: z.string().optional(),
-  }),
-  jsonResponse: z.object({
-    prediction: z.string(),
-  }),
-})(async (req, ctx) => {
-  const openai = getOpenAIClient()
-  const { prefix, suffix, model, language } = req.jsonBody
-
-  const readmeContent = await getCachedReadme()
-  const predictionResult = await completion(
-    openai,
-    readmeContent,
-    prefix,
-    suffix,
-    model,
-    language,
-  )
-  return ctx.json({ prediction: predictionResult })
-})

package/src/components/JLCPCBImportDialog.tsx

@@ -1,280 +0,0 @@
-import React, { useState } from "react"
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-  DialogDescription,
-} 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
-}
-
-interface ImportState {
-  isLoading: boolean
-  error: string | null
-  existingComponent: {
-    partNumber: string
-    username: string
-  } | null
-}
-
-interface JLCPCBResponse {
-  ok: boolean
-  package: {
-    package_id: string
-  }
-}
-
-interface APIError {
-  status: number
-  data?: {
-    message?: string
-    existing_part_number?: string
-    part_number?: string
-    error?: {
-      message?: string
-    }
-  }
-}
-
-const extractErrorMessage = (error: APIError): string => {
-  return (
-    error?.data?.message ||
-    error?.data?.error?.message ||
-    "An unexpected error occurred"
-  )
-}
-
-const extractExistingPartNumber = (
-  error: APIError,
-  fallback: string,
-): string => {
-  return error?.data?.message || error?.data?.error?.message || fallback
-}
-
-const useJLCPCBImport = () => {
-  const [state, setState] = useState<ImportState>({
-    isLoading: false,
-    error: null,
-    existingComponent: null,
-  })
-
-  const axios = useAxios()
-  const { toast } = useToast()
-  const [, navigate] = useLocation()
-  const session = useGlobalStore((s) => s.session)
-
-  const resetState = () => {
-    setState({
-      isLoading: false,
-      error: null,
-      existingComponent: null,
-    })
-  }
-
-  const importComponent = async (partNumber: string) => {
-    if (!partNumber.startsWith("C") || partNumber.length < 2) {
-      toast({
-        title: "Invalid Part Number",
-        description:
-          "JLCPCB part numbers should start with 'C' and be at least 2 characters long.",
-        variant: "destructive",
-      })
-      return { success: false }
-    }
-
-    setState((prev) => ({
-      ...prev,
-      isLoading: true,
-      error: null,
-      existingComponent: null,
-    }))
-
-    try {
-      const response = await axios.post<JLCPCBResponse>(
-        "/packages/generate_from_jlcpcb",
-        {
-          jlcpcb_part_number: partNumber,
-        },
-      )
-
-      if (!response.data.ok) {
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          error: "Failed to generate package from JLCPCB part",
-        }))
-        return { success: false }
-      }
-
-      const { package: generatedPackage } = response.data
-
-      toast({
-        title: "Import Successful",
-        description: "JLCPCB component has been imported successfully.",
-      })
-
-      navigate(`/editor?package_id=${generatedPackage.package_id}`)
-      return { success: true }
-    } catch (error: any) {
-      const apiError = error as APIError
-
-      if (apiError.status === 404) {
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          error: `Component with JLCPCB part number ${partNumber} not found`,
-        }))
-      } else if (apiError.status === 409) {
-        const existingPartNumber = extractExistingPartNumber(
-          apiError,
-          partNumber,
-        )
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          existingComponent: {
-            partNumber: existingPartNumber,
-            username: session?.github_username || "",
-          },
-        }))
-      } else {
-        const errorMessage = extractErrorMessage(apiError)
-        setState((prev) => ({ ...prev, isLoading: false, error: errorMessage }))
-
-        toast({
-          title: "Import Failed",
-          description: errorMessage,
-          variant: "destructive",
-        })
-      }
-
-      return { success: false }
-    }
-  }
-
-  return {
-    ...state,
-    importComponent,
-    resetState,
-  }
-}
-
-export function JLCPCBImportDialog({
-  open,
-  onOpenChange,
-}: JLCPCBImportDialogProps) {
-  const [partNumber, setPartNumber] = useState("")
-  const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
-
-  const { isLoading, error, existingComponent, importComponent, resetState } =
-    useJLCPCBImport()
-
-  const handleImport = async () => {
-    const result = await importComponent(partNumber)
-    if (result.success) {
-      onOpenChange(false)
-    }
-  }
-
-  const handleInputChange = (value: string) => {
-    setPartNumber(value)
-    resetState()
-  }
-
-  const createGitHubIssue = () => {
-    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)}`
-    window.open(url, "_blank")
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Import from JLCPCB</DialogTitle>
-          <DialogDescription>
-            Enter the JLCPCB part number to import the component.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="py-4 text-center">
-          <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}
-            disabled={isLoading}
-            onChange={(e) => handleInputChange(e.target.value)}
-            onKeyDown={(e) => {
-              if (
-                e.key === "Enter" &&
-                !isLoading &&
-                isLoggedIn &&
-                partNumber.trim()
-              ) {
-                handleImport()
-              }
-            }}
-          />
-
-          {error && !existingComponent && (
-            <>
-              <p className="bg-red-100 p-2 mt-2 pre-wrap">{error}</p>
-              <div className="flex justify-end mt-2">
-                <Button variant="default" onClick={createGitHubIssue}>
-                  File Issue on GitHub (prefilled)
-                </Button>
-              </div>
-            </>
-          )}
-
-          {existingComponent && (
-            <p className="p-2 mt-2 pre-wrap text-md text-green-600">
-              This part number has already been imported to your profile.{" "}
-              <PrefetchPageLink
-                className="text-blue-500 hover:underline"
-                href={`/${existingComponent.username}/${existingComponent.partNumber}`}
-              >
-                View it here
-              </PrefetchPageLink>
-            </p>
-          )}
-        </div>
-
-        <DialogFooter>
-          <Button onClick={handleImport} disabled={isLoading || !isLoggedIn}>
-            {!isLoggedIn
-              ? "You must be logged in to import from JLCPCB"
-              : isLoading
-                ? "Importing..."
-                : "Import"}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}