@tscircuit/fake-snippets 0.0.108 → 0.0.110

package/src/components/preview/PackageReleasesDashboard.tsx

@@ -8,18 +8,20 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { MoreHorizontal, Clock, GitBranch, Eye } from "lucide-react"
 import { GitHubLogoIcon } from "@radix-ui/react-icons"
-import { useLocation } from "wouter"
 import { BuildsList } from "./BuildsList"
 import Header from "../Header"
 import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
 import { getBuildStatus } from "."
-import { PrefetchPageLink } from "../PrefetchPageLink"
+import { Link } from "wouter"
 import { PackageBreadcrumb } from "../PackageBreadcrumb"
 import {
   Package,
   PackageBuild,
   PackageRelease,
 } from "fake-snippets-api/lib/db/schema"
+import { useDownloadZip } from "@/hooks/use-download-zip"
+import { useToast } from "@/hooks/use-toast"
+import { usePackageFiles } from "@/hooks/use-package-files"
 
 export const PackageReleasesDashboard = ({
   latestRelease,
@@ -30,9 +32,21 @@ export const PackageReleasesDashboard = ({
   latestBuild: PackageBuild | null
   pkg: Package
 }) => {
-  const [, setLocation] = useLocation()
   const { status, label } = getBuildStatus(latestBuild)
-
+  const { toastLibrary } = useToast()
+  const { downloadZip } = useDownloadZip()
+  const { data: packageFiles } = usePackageFiles(
+    latestRelease.package_release_id,
+  )
+  const handleDownloadZip = () => {
+    if (pkg && packageFiles) {
+      toastLibrary.promise(downloadZip(pkg, packageFiles ?? []), {
+        loading: "Downloading ZIP...",
+        success: "ZIP downloaded successfully!",
+        error: "Failed to download ZIP",
+      })
+    }
+  }
   return (
     <>
       <Header />
@@ -59,12 +73,12 @@ export const PackageReleasesDashboard = ({
                 </div>
                 <div className="min-w-0 flex-1">
                   <div className="flex flex-col sm:flex-row sm:items-center gap-3">
-                    <PrefetchPageLink
+                    <Link
                       href={"/" + pkg.name}
                       className="text-2xl font-bold text-gray-900 truncate"
                     >
                       {pkg.name}
-                    </PrefetchPageLink>
+                    </Link>
                     <Badge
                       variant={
                         status === "success"
@@ -91,8 +105,9 @@ export const PackageReleasesDashboard = ({
                   </div>
                   <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 mt-2 text-sm text-gray-600">
                     <div
-                      className="flex cursor-pointer items-center gap-1"
+                      className={`flex items-center gap-1 ${pkg.github_repo_full_name ? "cursor-pointer" : ""}`}
                       onClick={() =>
+                        pkg.github_repo_full_name &&
                         window?.open(
                           `https://github.com/${pkg.github_repo_full_name}/tree/${latestRelease?.branch_name || "main"}`,
                           "_blank",
@@ -121,22 +136,24 @@ export const PackageReleasesDashboard = ({
               </div>
 
               <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="flex items-center gap-2 justify-center min-w-[120px] h-9"
-                  onClick={() =>
-                    window.open(
-                      `https://github.com/${pkg.github_repo_full_name}`,
-                      "_blank",
-                    )
-                  }
-                >
-                  <GitHubLogoIcon className="w-4 h-4" />
-                  <span className="hidden sm:inline">Repository</span>
-                  <span className="sm:hidden">Repository</span>
-                </Button>
-                {latestBuild && (
+                {pkg.github_repo_full_name && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="flex items-center gap-2 justify-center min-w-[120px] h-9"
+                    onClick={() =>
+                      window.open(
+                        `https://github.com/${pkg.github_repo_full_name}`,
+                        "_blank",
+                      )
+                    }
+                  >
+                    <GitHubLogoIcon className="w-4 h-4" />
+                    <span className="hidden sm:inline">Repository</span>
+                    <span className="sm:hidden">Repository</span>
+                  </Button>
+                )}
+                {latestBuild && status !== "error" && (
                   <Button
                     variant="outline"
                     size="sm"
@@ -164,19 +181,19 @@ export const PackageReleasesDashboard = ({
                     </Button>
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end">
-                    <DropdownMenuItem asChild>
-                      <a
-                        href={`https://github.com/${pkg.github_repo_full_name}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        View Source
-                      </a>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem asChild>
-                      <a href="#" download>
-                        Download Build
-                      </a>
+                    {pkg.github_repo_full_name && (
+                      <DropdownMenuItem asChild>
+                        <a
+                          href={`https://github.com/${pkg.github_repo_full_name}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          View Source
+                        </a>
+                      </DropdownMenuItem>
+                    )}
+                    <DropdownMenuItem asChild onClick={handleDownloadZip}>
+                      <span>Download Zip</span>
                     </DropdownMenuItem>
                     <DropdownMenuItem
                       onClick={() => {

package/src/components/ui/tree-view.tsx

@@ -317,9 +317,12 @@ const TreeNode = ({
             default={defaultNodeIcon}
           />
           <span className="text-sm truncate">{item.name}</span>
-          <TreeActions isSelected={selectedItemId === item.id}>
-            {item.actions}
-          </TreeActions>
+          <div
+            className="flex items-center"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <TreeActions isSelected={true}>{item.actions}</TreeActions>
+          </div>
         </AccordionTrigger>
         <AccordionContent className="ml-4 pl-1 border-l">
           <TreeItem

package/src/hooks/use-add-org-member-mutation.ts

@@ -0,0 +1,51 @@
+import { useMutation, useQueryClient } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import { useGlobalStore } from "@/hooks/use-global-store"
+
+export const useAddOrgMemberMutation = ({
+  onSuccess,
+  onError,
+}: { onSuccess?: () => void; onError?: (error: any) => void } = {}) => {
+  const axios = useAxios()
+  const session = useGlobalStore((s) => s.session)
+  const queryClient = useQueryClient()
+
+  return useMutation(
+    ["addOrgMember"],
+    async ({
+      orgId,
+      accountId,
+      githubUsername,
+    }: {
+      orgId: string
+      accountId?: string
+      githubUsername?: string
+    }) => {
+      if (!session) throw new Error("No session")
+
+      const payload: any = {
+        org_id: orgId,
+      }
+
+      if (accountId) {
+        payload.account_id = accountId
+      }
+
+      if (githubUsername) {
+        payload.github_username = githubUsername
+      }
+
+      await axios.post("/orgs/add_member", payload)
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(["orgs", "members"])
+        onSuccess?.()
+      },
+      onError: (error: any) => {
+        console.error("Error adding organization member:", error)
+        onError?.(error)
+      },
+    },
+  )
+}

package/src/hooks/use-create-org-mutation.ts

@@ -0,0 +1,38 @@
+import { useMutation } from "react-query"
+import { useAxios } from "./use-axios"
+import { useGlobalStore } from "./use-global-store"
+import type { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
+
+export const useCreateOrgMutation = ({
+  onSuccess,
+}: { onSuccess?: (org: PublicOrgSchema) => void } = {}) => {
+  const axios = useAxios()
+  const session = useGlobalStore((s) => s.session)
+
+  return useMutation(
+    ["createOrg"],
+    async ({ name }: { name: string }) => {
+      if (!session) throw new Error("No session")
+
+      const {
+        data: { org: newOrg },
+      } = await axios.post("/orgs/create", {
+        name,
+      })
+
+      if (!newOrg) {
+        throw new Error("Failed to create organization")
+      }
+
+      return newOrg
+    },
+    {
+      onSuccess: (org: PublicOrgSchema) => {
+        onSuccess?.(org)
+      },
+      onError: (error: any) => {
+        console.error("Error creating organization:", error)
+      },
+    },
+  )
+}

package/src/hooks/use-create-package-mutation.ts

@@ -16,11 +16,13 @@ export const useCreatePackageMutation = ({
       description,
       is_private,
       is_unlisted,
+      org_id,
     }: {
       name?: string
       description?: string
       is_private?: boolean
       is_unlisted?: boolean
+      org_id?: string
     }) => {
       if (!session) throw new Error("No session")
 
@@ -31,6 +33,7 @@ export const useCreatePackageMutation = ({
         description,
         is_private,
         is_unlisted,
+        org_id,
       })
 
       if (!newPackage) {

package/src/hooks/use-current-package-id.ts

@@ -1,41 +1,16 @@
-import { useEffect, useState } from "react"
-import { useParams } from "wouter"
-import { usePackageById } from "./use-package-by-package-id"
-import { usePackageByName } from "./use-package-by-package-name"
-import { useUrlParams } from "./use-url-params"
+import { useCurrentPackageInfo } from "./use-current-package-info"
 
 export const useCurrentPackageId = (): {
   packageId: string | null
   isLoading: boolean
   error: (Error & { status: number }) | null
 } => {
-  const urlParams = useUrlParams()
-  const urlPackageId = urlParams.package_id
-  const wouter = useParams()
-  const [packageIdFromUrl, setPackageId] = useState<string | null>(urlPackageId)
-
-  useEffect(() => {
-    if (urlPackageId) {
-      setPackageId(urlPackageId)
-    }
-  }, [urlPackageId])
-
-  const packageName =
-    wouter.author && wouter.packageName
-      ? `${wouter.author}/${wouter.packageName}`
-      : null
-
-  const {
-    data: packageByName,
-    isLoading: isLoadingPackageByName,
-    error: errorPackageByName,
-  } = usePackageByName(packageName)
-
-  const packageId = packageIdFromUrl ?? packageByName?.package_id ?? null
+  const { packageInfo, isLoading, error } = useCurrentPackageInfo()
+  const packageId = packageInfo?.package_id ?? null
 
   return {
     packageId,
-    isLoading: isLoadingPackageByName,
-    error: errorPackageByName,
+    isLoading,
+    error,
   }
 }

package/src/hooks/use-current-package-info.ts

@@ -1,8 +1,32 @@
-import { useCurrentPackageId } from "./use-current-package-id"
+import { useParams } from "wouter"
 import { usePackageById } from "./use-package-by-package-id"
+import { usePackageByName } from "./use-package-by-package-name"
+import { useUrlParams } from "./use-url-params"
+import type { Package } from "fake-snippets-api/lib/db/schema"
 
-export const useCurrentPackageInfo = () => {
-  const { packageId } = useCurrentPackageId()
-  const { data: packageInfo, ...rest } = usePackageById(packageId)
-  return { packageInfo, ...rest }
+export const useCurrentPackageInfo = (): {
+  packageInfo: Package | undefined
+  isLoading: boolean
+  error: (Error & { status: number }) | null
+  refetch: () => Promise<unknown>
+} => {
+  const urlParams = useUrlParams()
+  const packageIdFromQuery = urlParams.package_id ?? null
+
+  const { author, packageName } = useParams()
+  const packageSlug = author && packageName ? `${author}/${packageName}` : null
+
+  const queryById = usePackageById(packageIdFromQuery)
+  const queryByName = usePackageByName(packageSlug)
+
+  const data = queryById.data ?? queryByName.data
+  const isLoading = queryById.isLoading || queryByName.isLoading
+  const error =
+    (queryById.error as (Error & { status: number }) | null) ??
+    (queryByName.error as (Error & { status: number }) | null) ??
+    null
+
+  const refetch = packageIdFromQuery ? queryById.refetch : queryByName.refetch
+
+  return { packageInfo: data, isLoading, error, refetch }
 }

package/src/hooks/use-current-package-release.ts

@@ -21,12 +21,13 @@ export const useCurrentPackageRelease = (options?: {
 
   let query: Parameters<typeof usePackageRelease>[0] | null = null
 
-  if (releaseId) {
+  // Prioritize package_name + is_latest for better caching consistency
+  if (author && packageName && !version && !releaseId) {
+    query = { package_name: `${author}/${packageName}`, is_latest: true }
+  } else if (releaseId) {
     query = { package_release_id: releaseId }
   } else if (version && author && packageName) {
     query = { package_name_with_version: `${author}/${packageName}@${version}` }
-  } else if (author && packageName) {
-    query = { package_name: `${author}/${packageName}`, is_latest: true }
   } else if (packageId) {
     query = { package_id: packageId, is_latest: true }
   }

package/src/hooks/use-download-zip.ts

@@ -20,8 +20,8 @@ export const useDownloadZip = () => {
 
       for (const file of visibleFiles) {
         try {
-          const response = await axios.post("/package_files/get", {
-            package_file_id: file.package_file_id,
+          const response = await axios.get("/package_files/get", {
+            params: { package_file_id: file.package_file_id },
           })
 
           const content = response.data.package_file?.content_text || ""

package/src/hooks/use-global-store.ts

@@ -28,7 +28,9 @@ export const useGlobalStore = create<Store>()(
   ),
 )
 
-useGlobalStore.subscribe((state, prevState) => {
-  ;(window as any).globalStore = state
-  window.TSCIRCUIT_REGISTRY_TOKEN = state.session?.token ?? null
-})
+if (typeof window !== "undefined") {
+  useGlobalStore.subscribe((state) => {
+    ;(window as any).globalStore = state
+    window.TSCIRCUIT_REGISTRY_TOKEN = state.session?.token ?? null
+  })
+}

package/src/hooks/use-jlcpcb-component-import.tsx

@@ -0,0 +1,164 @@
+import React, { useCallback } from "react"
+import { useToast } from "@/hooks/use-toast"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { useLocation } from "wouter"
+import { useCreatePackageMutation } from "@/hooks/use-create-package-mutation"
+import { useCreatePackageReleaseMutation } from "@/hooks/use-create-package-release-mutation"
+import { useCreatePackageFilesMutation } from "@/hooks/use-create-package-files-mutation"
+import { useAxios } from "@/hooks/use-axios"
+import { JlcpcbComponentTsxLoadedPayload } from "@tscircuit/runframe/runner"
+
+export const useJlcpcbComponentImport = () => {
+  const { toastLibrary } = useToast()
+  const session = useGlobalStore((s) => s.session)
+  const [, navigate] = useLocation()
+  const axios = useAxios()
+  const createPackageMutation = useCreatePackageMutation()
+  const createReleaseMutation = useCreatePackageReleaseMutation()
+  const createFilesMutation = useCreatePackageFilesMutation()
+
+  const runImport = useCallback(
+    async ({ result, tsx }: JlcpcbComponentTsxLoadedPayload) => {
+      if (!session) {
+        throw new Error("You must be logged in to import from JLCPCB")
+      }
+
+      const partNumber = result.component.partNumber || "component"
+
+      const normalizePartNumber = (input: string) =>
+        input
+          .replace(/^@/, "")
+          .trim()
+          .replace(/\s+/g, "-")
+          .replace(/[^a-zA-Z0-9-_/]/g, "-")
+          .replace(/--+/g, "-")
+          .replace(/-+$/g, "")
+          .replace(/^-+/g, "") || "component"
+
+      const componentSlug = normalizePartNumber(partNumber)
+      const packageName = `${session.github_username}/${componentSlug}`
+
+      const fetchExistingPackage = async () => {
+        try {
+          const { data } = await axios.post("/packages/get", {
+            name: packageName,
+          })
+          return data.package
+        } catch (error: any) {
+          const status = error?.response?.status || error?.status
+          if (status === 404) return null
+          throw error
+        }
+      }
+
+      const existingPackage = await fetchExistingPackage()
+      if (existingPackage) {
+        navigate(`/editor?package_id=${existingPackage.package_id}`)
+        return {
+          partNumber,
+          packageId: existingPackage.package_id,
+          existing: true,
+        }
+      }
+
+      const description =
+        result.component.description ||
+        `Generated from JLCPCB part number ${partNumber}`
+
+      let newPackage
+      try {
+        newPackage = await createPackageMutation.mutateAsync({
+          name: packageName,
+          description,
+        })
+      } catch (error) {
+        const fallbackPackage = await fetchExistingPackage()
+        if (fallbackPackage) {
+          navigate(`/editor?package_id=${fallbackPackage.package_id}`)
+          return {
+            partNumber,
+            packageId: fallbackPackage.package_id,
+            existing: true,
+          }
+        }
+        throw error
+      }
+
+      const release = await createReleaseMutation.mutateAsync({
+        package_id: newPackage.package_id,
+        version: "0.1.0",
+        is_latest: true,
+      })
+
+      await createFilesMutation.mutateAsync({
+        file_path: "index.tsx",
+        content_text: tsx,
+        package_release_id: release.package_release_id,
+      })
+
+      navigate(`/editor?package_id=${newPackage.package_id}`)
+      return {
+        partNumber,
+        packageId: newPackage.package_id,
+        existing: false,
+      }
+    },
+    [
+      createFilesMutation,
+      createPackageMutation,
+      createReleaseMutation,
+      axios,
+      navigate,
+      session,
+    ],
+  )
+
+  const importComponent = useCallback(
+    async (payload: JlcpcbComponentTsxLoadedPayload) => {
+      const importPromise = runImport(payload)
+
+      toastLibrary.promise(importPromise, {
+        loading: "Importing component...",
+        success: ({ partNumber, existing }) => (
+          <p>
+            {existing
+              ? `Component ${partNumber} already exists. Opening package in the editor.`
+              : `Component ${partNumber} imported successfully. Opening package in the editor.`}
+          </p>
+        ),
+        error: (error) => (
+          <p>
+            {error instanceof Error
+              ? error.message
+              : "Failed to import component"}
+          </p>
+        ),
+      })
+
+      await importPromise
+    },
+    [runImport, toastLibrary],
+  )
+
+  return {
+    importComponent,
+  }
+}
+
+export const openJlcpcbImportIssue = (
+  partNumber: string,
+  errorMessage: string,
+) => {
+  const url = getJlcpcbImportIssueUrl(partNumber, errorMessage)
+  window.open(url, "_blank")
+}
+
+const getJlcpcbImportIssueUrl = (partNumber: string, errorMessage: string) => {
+  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${errorMessage}\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)}`
+  return url
+}

package/src/hooks/use-list-org-members.ts

@@ -0,0 +1,27 @@
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import type { Account } from "fake-snippets-api/lib/db/schema"
+
+export const useListOrgMembers = ({
+  orgId,
+  orgName,
+}: { orgId?: string; orgName?: string }) => {
+  const axios = useAxios()
+  return useQuery<Account[], Error & { status: number }>(
+    ["orgs", "members", orgId || orgName],
+    async () => {
+      if (!orgId && !orgName) {
+        throw new Error("Organization ID or name is required")
+      }
+      const params = orgId ? { org_id: orgId } : { name: orgName }
+      const { data } = await axios.get("/orgs/list_members", { params })
+      return data.members
+    },
+    {
+      enabled: Boolean(orgId || orgName),
+      retry: false,
+      refetchOnWindowFocus: false,
+      keepPreviousData: true,
+    },
+  )
+}

package/src/hooks/use-list-user-orgs.ts

@@ -0,0 +1,25 @@
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import type { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
+import { useGlobalStore } from "./use-global-store"
+
+export const useListUserOrgs = (githubHandle?: string) => {
+  const axios = useAxios()
+  const session = useGlobalStore((s) => s.session)
+  const github_handle = githubHandle || session?.github_username
+
+  return useQuery<PublicOrgSchema[], Error & { status: number }>(
+    ["orgs", "list", github_handle],
+    async () => {
+      const { data } = await axios.get("/orgs/list", {
+        ...(github_handle && { params: { github_handle } }),
+      })
+      return data.orgs
+    },
+    {
+      retry: false,
+      refetchOnWindowFocus: false,
+      enabled: Boolean(github_handle),
+    },
+  )
+}

package/src/hooks/use-org-by-github-handle.ts

@@ -0,0 +1,26 @@
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import type { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
+import { useGlobalStore } from "./use-global-store"
+
+export const useOrgByGithubHandle = (githubHandle: string | null) => {
+  const axios = useAxios()
+  const session = useGlobalStore((s) => s.session)
+  return useQuery<PublicOrgSchema, Error & { status: number }>(
+    ["orgs", "by-github-handle", githubHandle],
+    async () => {
+      if (!githubHandle) {
+        throw new Error("GitHub handle is required")
+      }
+      const { data } = await axios.get("/orgs/get", {
+        params: { github_handle: githubHandle },
+      })
+      return data.org
+    },
+    {
+      enabled: Boolean(githubHandle && session),
+      retry: false,
+      refetchOnWindowFocus: false,
+    },
+  )
+}

package/src/hooks/use-org.ts

@@ -0,0 +1,24 @@
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import type { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
+
+export const useOrg = ({ orgName }: { orgName: string | null }) => {
+  const axios = useAxios()
+  return useQuery<PublicOrgSchema, Error & { status: number }>(
+    ["orgs", orgName],
+    async () => {
+      if (!orgName) {
+        throw new Error("Organization name is required")
+      }
+      const { data } = await axios.get("/orgs/get", {
+        params: { org_name: orgName },
+      })
+      return data.org
+    },
+    {
+      enabled: Boolean(orgName),
+      retry: false,
+      refetchOnWindowFocus: false,
+    },
+  )
+}