@tscircuit/fake-snippets 0.0.109 → 0.0.111

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),
+      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,
+    },
+  )
+}

package/src/hooks/use-organization.ts

@@ -0,0 +1,42 @@
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import type { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
+
+export const useOrganization = ({
+  orgId,
+  orgName,
+  github_handle,
+}: { orgId?: string; orgName?: string; github_handle?: string }) => {
+  const axios = useAxios()
+
+  const orgQuery = useQuery<PublicOrgSchema, Error & { status: number }>(
+    ["orgs", "get", orgId || orgName || github_handle],
+    async () => {
+      if (!orgId && !orgName && !github_handle) {
+        throw new Error("Organization ID, name, or GitHub handle is required")
+      }
+      const params = orgId
+        ? { org_id: orgId }
+        : orgName
+          ? { org_name: orgName }
+          : { github_handle }
+      const { data } = await axios.get("/orgs/get", { params })
+      return data.org
+    },
+    {
+      enabled: Boolean(orgId || orgName),
+      retry: false,
+      refetchOnWindowFocus: false,
+      keepPreviousData: true,
+    },
+  )
+
+  return {
+    organization: orgQuery.data,
+    membersCount: orgQuery.data?.member_count || 0,
+    packagesCount: orgQuery.data?.package_count || 0,
+    isLoading: orgQuery.isLoading,
+    isError: orgQuery.isError,
+    error: orgQuery.error,
+  }
+}

package/src/hooks/use-package-as-snippet.ts

@@ -32,8 +32,10 @@ export const usePackageAsSnippet = (packageId: string | null) => {
       if (!packageQuery.data?.latest_package_release_id) {
         throw new Error("No latest release ID available")
       }
-      const { data } = await axios.post("/package_files/list", {
-        package_release_id: packageQuery.data.latest_package_release_id,
+      const { data } = await axios.get("/package_files/list", {
+        params: {
+          package_release_id: packageQuery.data.latest_package_release_id,
+        },
       })
       return data.package_files
     },

package/src/hooks/use-package-builds.ts

@@ -56,11 +56,14 @@ export const usePackageBuildsByReleaseId = (releaseId?: string | null) => {
   return usePackageBuilds(releaseId ? { package_release_id: releaseId } : null)
 }
 
-export const usePackageBuild = (packageBuildId: string | null) => {
+export const usePackageBuild = (
+  packageBuildId: string | null,
+  options?: { include_logs?: boolean },
+) => {
   const axios = useAxios()
 
   return useQuery<PackageBuild, Error & { status: number }>(
-    ["packageBuild", packageBuildId],
+    ["packageBuild", packageBuildId, options?.include_logs],
     async () => {
       if (!packageBuildId) {
         throw new Error("package_build_id is required")
@@ -69,6 +72,7 @@ export const usePackageBuild = (packageBuildId: string | null) => {
       const { data } = await axios.get("/package_builds/get", {
         params: {
           package_build_id: packageBuildId,
+          include_logs: options?.include_logs,
         },
       })
 

package/src/hooks/use-package-files.ts

@@ -36,7 +36,9 @@ export const usePackageFile = (
     async () => {
       if (!query) return
 
-      const { data } = await axios.post("/package_files/get", query)
+      const { data } = await axios.get("/package_files/get", {
+        params: query,
+      })
 
       if (!data.package_file) {
         throw new Error("Package file not found")
@@ -98,8 +100,8 @@ export const usePackageFiles = (packageReleaseId?: string | null) => {
       if (!packageReleaseId) return []
 
       try {
-        const { data } = await axios.post("/package_files/list", {
-          package_release_id: packageReleaseId,
+        const { data } = await axios.get("/package_files/list", {
+          params: { package_release_id: packageReleaseId },
         })
 
         if (!data.package_files) {

package/src/hooks/use-package-release-by-id-or-version.ts

@@ -1,36 +1,45 @@
-import {
-  usePackageReleaseById,
-  usePackageReleaseByNameAndVersion,
-} from "./use-package-release"
+import { usePackageRelease } from "./use-package-release"
 import { isUuid } from "@/lib/utils/isUuid"
 
 export const usePackageReleaseByIdOrVersion = (
   releaseIdOrVersion: string | null,
   packageName?: string | null,
+  options?: {
+    include_logs?: boolean
+    include_ai_review?: boolean
+    refetchInterval?:
+      | number
+      | false
+      | ((
+          data:
+            | import("fake-snippets-api/lib/db/schema").PackageRelease
+            | undefined,
+        ) => number | false)
+  },
 ) => {
   const isReleaseIdUuid = releaseIdOrVersion
     ? isUuid(releaseIdOrVersion)
     : false
 
-  // If it's a UUID, use the ID-based hook
-  const releaseByIdQuery = usePackageReleaseById(
-    isReleaseIdUuid ? releaseIdOrVersion : null,
-  )
+  let query: Parameters<typeof usePackageRelease>[0] = null
 
-  // If it's not a UUID and we have a package name, construct the version-based query
-  const packageNameWithVersion =
-    !isReleaseIdUuid && packageName && releaseIdOrVersion
-      ? `${packageName}@${releaseIdOrVersion}`
+  if (isReleaseIdUuid) {
+    query = releaseIdOrVersion
+      ? { package_release_id: releaseIdOrVersion }
       : null
+  } else if (packageName && releaseIdOrVersion) {
+    query = {
+      package_name_with_version: `${packageName}@${releaseIdOrVersion}`,
+    }
+  }
 
-  const releaseByVersionQuery = usePackageReleaseByNameAndVersion(
-    packageNameWithVersion,
-  )
+  if (query && options?.include_logs !== undefined) {
+    query.include_logs = options.include_logs
+  }
 
-  // Return the appropriate query result
-  if (isReleaseIdUuid) {
-    return releaseByIdQuery
-  } else {
-    return releaseByVersionQuery
+  if (query && options?.include_ai_review !== undefined) {
+    query.include_ai_review = options.include_ai_review
   }
+
+  return usePackageRelease(query, { refetchInterval: options?.refetchInterval })
 }

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

@@ -0,0 +1,105 @@
+import { useMemo, useCallback } from "react"
+import { useQueries } from "react-query"
+import { useAxios } from "./use-axios"
+import { useParams } from "wouter"
+import { useApiBaseUrl } from "./use-packages-base-api-url"
+
+interface UsePackageReleaseImagesProps {
+  packageReleaseId?: string | null
+  availableFilePaths?: string[] | undefined
+}
+
+interface ViewConfig {
+  id: string
+  label: string
+  backgroundClass: string
+}
+
+const VIEWS: ViewConfig[] = [
+  {
+    id: "3d",
+    label: "3D",
+    backgroundClass: "bg-gray-100",
+  },
+  {
+    id: "pcb",
+    label: "PCB",
+    backgroundClass: "bg-black",
+  },
+  {
+    id: "schematic",
+    label: "Schematic",
+    backgroundClass: "bg-[#F5F1ED]",
+  },
+]
+
+export function usePackageReleaseImages({
+  packageReleaseId,
+}: UsePackageReleaseImagesProps) {
+  const apiurl = useApiBaseUrl()
+  const axios = useAxios()
+  const { author, packageName } = useParams()
+
+  const createQueryFn = useCallback(
+    (viewId: string) => async () => {
+      if (!packageReleaseId || !author || !packageName) return null
+
+      const imageUrl = `${apiurl}/packages/images/${author}/${packageName}/${viewId}.png?package_release_id=${packageReleaseId}`
+
+      try {
+        const response = await axios.head(imageUrl)
+        return response.status === 200 ? imageUrl : null
+      } catch {
+        return null
+      }
+    },
+    [packageReleaseId, author, packageName, apiurl, axios],
+  )
+
+  const queryConfigs = useMemo(
+    () =>
+      VIEWS.map((view) => ({
+        queryKey: [
+          "packageReleaseImage",
+          packageReleaseId,
+          view.id,
+          author,
+          packageName,
+        ],
+        queryFn: createQueryFn(view.id),
+        enabled: Boolean(packageReleaseId && author && packageName),
+        retry: false,
+        refetchOnWindowFocus: false,
+        refetchOnMount: false,
+        refetchOnReconnect: false,
+        staleTime: Infinity,
+        cacheTime: Infinity,
+      })),
+    [packageReleaseId, author, packageName, createQueryFn],
+  )
+
+  const queries = useQueries(queryConfigs)
+
+  const availableViews = useMemo(() => {
+    const result = []
+
+    for (let i = 0; i < VIEWS.length; i++) {
+      const view = VIEWS[i]
+      const query = queries[i]
+
+      if (query.isLoading || query.data) {
+        result.push({
+          id: view.id,
+          label: view.label,
+          imageUrl: query.data || "",
+          isLoading: query.isLoading,
+          backgroundClass: view.backgroundClass,
+        })
+      }
+    }
+
+    return result
+  }, [queries])
+
+  return { availableViews }
+}

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

@@ -40,8 +40,8 @@ export const usePackageRelease = (
 
       const { data } = await axios.post("/package_releases/get", query, {
         params: {
-          include_logs: query.include_logs,
-          include_ai_review: query.include_ai_review,
+          include_logs: Boolean(query.include_logs),
+          include_ai_review: Boolean(query.include_ai_review),
         },
       })
 

package/src/hooks/use-package-stars.ts

@@ -38,25 +38,77 @@ export const usePackageStarMutation = (query: PackageStarQuery) => {
   const axios = useAxios()
   const queryClient = useQueryClient()
 
-  const addStar = useMutation(
+  const addStar = useMutation<
+    any,
+    Error,
+    void,
+    { previousStars?: PackageStarResponse }
+  >(
     async () => {
       const { data } = await axios.post("/packages/add_star", query)
       return data
     },
     {
-      onSuccess: () => {
+      onMutate: async () => {
+        await queryClient.cancelQueries(["packageStars", query])
+        const previousStars = queryClient.getQueryData<PackageStarResponse>([
+          "packageStars",
+          query,
+        ])
+        const optimistic: PackageStarResponse = {
+          is_starred: true,
+          star_count: (previousStars?.star_count ?? 0) + 1,
+        }
+        queryClient.setQueryData(["packageStars", query], optimistic)
+        return { previousStars }
+      },
+      onError: (_error, _vars, context) => {
+        if (context?.previousStars) {
+          queryClient.setQueryData(
+            ["packageStars", query],
+            context.previousStars,
+          )
+        }
+      },
+      onSettled: () => {
         queryClient.invalidateQueries(["packageStars", query])
       },
     },
   )
 
-  const removeStar = useMutation(
+  const removeStar = useMutation<
+    any,
+    Error,
+    void,
+    { previousStars?: PackageStarResponse }
+  >(
     async () => {
       const { data } = await axios.post("/packages/remove_star", query)
       return data
     },
     {
-      onSuccess: () => {
+      onMutate: async () => {
+        await queryClient.cancelQueries(["packageStars", query])
+        const previousStars = queryClient.getQueryData<PackageStarResponse>([
+          "packageStars",
+          query,
+        ])
+        const optimistic: PackageStarResponse = {
+          is_starred: false,
+          star_count: Math.max(0, (previousStars?.star_count ?? 1) - 1),
+        }
+        queryClient.setQueryData(["packageStars", query], optimistic)
+        return { previousStars }
+      },
+      onError: (_error, _vars, context) => {
+        if (context?.previousStars) {
+          queryClient.setQueryData(
+            ["packageStars", query],
+            context.previousStars,
+          )
+        }
+      },
+      onSettled: () => {
         queryClient.invalidateQueries(["packageStars", query])
       },
     },
@@ -84,3 +136,27 @@ export const usePackageStarMutationById = (packageId: string) => {
 export const usePackageStarMutationByName = (packageName: string) => {
   return usePackageStarMutation({ name: packageName })
 }
+
+// High-level hook that exposes current star state and a single toggle action
+export const usePackageStarring = (query: PackageStarQuery | null) => {
+  const starsQuery = usePackageStars(query)
+  const mutations = usePackageStarMutation(query ?? { name: "" })
+
+  const toggleStar = async () => {
+    if (!query) return
+    const currentlyStarred = starsQuery.data?.is_starred ?? false
+    if (currentlyStarred) await mutations.removeStar.mutateAsync()
+    else await mutations.addStar.mutateAsync()
+  }
+
+  return {
+    isStarred: starsQuery.data?.is_starred ?? false,
+    starCount: starsQuery.data?.star_count ?? 0,
+    isPending: mutations.addStar.isLoading || mutations.removeStar.isLoading,
+    toggleStar,
+  }
+}
+
+export const usePackageStarringByName = (packageName: string | null) => {
+  return usePackageStarring(packageName ? { name: packageName } : null)
+}