@tscircuit/fake-snippets 0.0.78 → 0.0.80

package/fake-snippets-api/lib/db/autoload-packages.json

@@ -1,36 +1,8 @@
 {
   "packages": [
-    {
-      "owner": "Abse2001",
-      "name": "Arduino-Nano-Servo-Breakout"
-    },
-    {
-      "owner": "ShiboSoftwareDev",
-      "name": "Wifi-Camera-Module"
-    },
-    {
-      "owner": "imrishabh18",
-      "name": "Arduino-nano"
-    },
     {
       "owner": "seveibar",
       "name": "usb-c-flashlight"
-    },
-    {
-      "owner": "seveibar",
-      "name": "nine-key-keyboard"
-    },
-    {
-      "owner": "AnasSarkiz",
-      "name": "grid-of-LEDs-with-an-ESP32"
-    },
-    {
-      "owner": "seveibar",
-      "name": "keyboard-default60"
-    },
-    {
-      "owner": "imrishabh18",
-      "name": "motor-driver-breakout"
     }
   ]
 }

package/fake-snippets-api/routes/api/accounts/get.ts

@@ -17,7 +17,8 @@ export default withRouteSpec({
   if (req.method === "POST") {
     const { github_username } = req.jsonBody
     account = ctx.db.accounts.find(
-      (acc: Account) => acc.github_username === github_username,
+      (acc: Account) =>
+        acc.github_username.toLowerCase() === github_username.toLowerCase(),
     )
   } else {
     account = ctx.db.getAccount(ctx.auth.account_id)

package/fake-snippets-api/routes/api/package_releases/create.ts

@@ -8,6 +8,7 @@ export default withRouteSpec({
   auth: "none",
   jsonBody: z.object({
     package_id: z.string().optional(),
+    package_name: z.string().optional(),
     version: z.string().optional(),
     is_latest: z.boolean().optional(),
     commit_sha: z.string().optional(),
@@ -20,6 +21,7 @@ export default withRouteSpec({
 })(async (req, ctx) => {
   let {
     package_id,
+    package_name,
     is_latest = true,
     version,
     commit_sha,
@@ -41,10 +43,21 @@ export default withRouteSpec({
     version = parsedVersion
   }
 
+  if (!package_id && package_name) {
+    const pkg = ctx.db.packages.find((p) => p.name === package_name)
+    if (!pkg) {
+      return ctx.error(404, {
+        error_code: "package_not_found",
+        message: `Package not found: ${package_name}`,
+      })
+    }
+    package_id = pkg.package_id
+  }
+
   if (!package_id || !version) {
     return ctx.error(400, {
       error_code: "missing_options",
-      message: "package_id and version are required",
+      message: "package_id or package_name and version are required",
     })
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/PackageBuildsPage/package-build-header.tsx

@@ -1,18 +1,10 @@
-import { ChevronDown, Download, Github, Link, RefreshCw } from "lucide-react"
+import { Github, RefreshCw } from "lucide-react"
 import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
 import { useParams } from "wouter"
-import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
 import { DownloadButtonAndMenu } from "../DownloadButtonAndMenu"
 
 export function PackageBuildHeader() {
   const { author, packageName } = useParams()
-  const { packageRelease } = useCurrentPackageRelease()
 
   return (
     <div className="border-b border-gray-200 bg-white px-6 py-4">

package/src/components/ViewPackagePage/components/mobile-sidebar.tsx

@@ -211,6 +211,7 @@ const MobileSidebar = ({
           packageAuthor={packageInfo.owner_github_username}
           onUpdate={handlePackageUpdate}
           packageName={packageInfo.name}
+          unscopedPackageName={packageInfo.unscoped_name}
           currentDefaultView={packageInfo.default_view}
         />
       )}

package/src/components/ViewPackagePage/components/sidebar-about-section.tsx

@@ -161,6 +161,7 @@ export default function SidebarAboutSection() {
 
       {packageInfo && (
         <EditPackageDetailsDialog
+          unscopedPackageName={packageInfo.unscoped_name}
           packageReleaseId={packageInfo.latest_package_release_id}
           packageId={packageInfo.package_id}
           currentDescription={

package/src/components/dialogs/edit-package-details-dialog.tsx

@@ -38,6 +38,7 @@ interface EditPackageDetailsDialogProps {
   currentDefaultView?: string
   isPrivate?: boolean
   packageName: string
+  unscopedPackageName: string
   packageReleaseId: string | null
   packageAuthor?: string | null
   onUpdate?: (
@@ -57,7 +58,7 @@ export const EditPackageDetailsDialog = ({
   currentLicense,
   currentDefaultView = "files",
   isPrivate = false,
-  packageName,
+  unscopedPackageName,
   packageReleaseId,
   packageAuthor,
   onUpdate,
@@ -65,13 +66,11 @@ export const EditPackageDetailsDialog = ({
   const axios = useAxios()
   const { toast } = useToast()
   const qc = useQueryClient()
-
   const {
     formData,
     setFormData,
     websiteError,
     hasLicenseChanged,
-    hasDefaultViewChanged,
     hasChanges,
     isFormValid,
   } = usePackageDetailsForm({
@@ -79,6 +78,7 @@ export const EditPackageDetailsDialog = ({
     initialWebsite: currentWebsite,
     initialLicense: currentLicense || null,
     initialDefaultView: currentDefaultView,
+    initialUnscopedPackageName: unscopedPackageName,
     isDialogOpen: open,
     initialVisibility: isPrivate ? "private" : "public",
   })
@@ -114,16 +114,15 @@ export const EditPackageDetailsDialog = ({
         website: formData.website,
         is_private: formData.visibility == "private",
         default_view: formData.defaultView,
-      })
-      const privacyUpdateResponse = await axios.post("/snippets/update", {
-        snippet_id: packageId,
-        is_private: formData.visibility === "private",
+        ...(formData.unscopedPackageName !== unscopedPackageName && {
+          name: formData.unscopedPackageName,
+        }),
       })
       if (response.status !== 200)
         throw new Error("Failed to update package details")
 
       const filesRes = await axios.post("/package_files/list", {
-        package_name_with_version: packageName,
+        package_name_with_version: `${packageAuthor}/${formData.unscopedPackageName}`,
       })
       const packageFiles: string[] =
         filesRes.status === 200
@@ -137,18 +136,32 @@ export const EditPackageDetailsDialog = ({
       if (hasLicenseChanged) {
         if (packageFiles.includes("LICENSE") && !licenseContent) {
           await axios.post("/package_files/delete", {
-            package_name_with_version: packageName,
+            package_name_with_version: `${packageAuthor}/${formData.unscopedPackageName}`,
             file_path: "LICENSE",
           })
         }
         if (licenseContent) {
           await axios.post("/package_files/create_or_update", {
-            package_name_with_version: packageName,
+            package_name_with_version: `${packageAuthor}/${formData.unscopedPackageName}`,
             file_path: "LICENSE",
             content_text: licenseContent,
           })
         }
       }
+      console.log(
+        "formData.unscopedPackageName",
+        formData.unscopedPackageName,
+        "unscopedPackageName",
+        unscopedPackageName,
+      )
+      if (formData.unscopedPackageName !== unscopedPackageName) {
+        // Use router for client-side navigation
+        window.history.replaceState(
+          {},
+          "",
+          `/${packageAuthor}/${formData.unscopedPackageName}`,
+        )
+      }
 
       return {
         description: formData.description,
@@ -187,7 +200,9 @@ export const EditPackageDetailsDialog = ({
       qc.setQueryData(["packages", packageId], context?.previous)
       toast({
         title: "Error",
-        description: "Failed to update package details. Please try again.",
+        description:
+          (error as any)?.data?.error?.message ||
+          "Failed to update package details. Please try again.",
         variant: "destructive",
       })
     },
@@ -237,11 +252,29 @@ export const EditPackageDetailsDialog = ({
             </DialogHeader>
             <div className="">
               <div className="grid gap-2">
+                <div className="space-y-1">
+                  <Label htmlFor="packageName">Package Name</Label>
+                  <Input
+                    id="packageName"
+                    value={formData.unscopedPackageName}
+                    onChange={(e) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        unscopedPackageName: e.target.value,
+                      }))
+                    }
+                    placeholder="Enter package name"
+                    disabled={updatePackageDetailsMutation.isLoading}
+                    className="w-full"
+                    autoComplete="off"
+                  />
+                </div>
                 <div className="space-y-1">
                   <Label htmlFor="website">Website</Label>
                   <Input
                     id="website"
                     value={formData.website}
+                    autoComplete="off"
                     onChange={(e) =>
                       setFormData((prev) => ({
                         ...prev,
@@ -282,6 +315,7 @@ export const EditPackageDetailsDialog = ({
                   <Label htmlFor="description">Description</Label>
                   <Textarea
                     id="description"
+                    spellCheck={false}
                     value={formData.description}
                     onChange={(e) =>
                       setFormData((prev) => ({

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

@@ -29,21 +29,71 @@ export const useCreatePackageReleaseMutation = ({
         )
       }
 
-      const {
-        data: { package_release: newPackageRelease },
-      } = await axios.post("/package_releases/create", {
-        package_id,
-        version,
-        is_latest,
-        commit_sha,
-        package_name_with_version,
-      })
-
-      if (!newPackageRelease) {
-        throw new Error("Failed to create package release")
+      let resolvedVersion = version
+      let resolvedPkgName = package_name_with_version
+
+      // Parse version from package_name_with_version if needed
+      if (package_name_with_version && !version) {
+        const [pkgName, parsedVersion] = package_name_with_version.split("@")
+        resolvedVersion = parsedVersion
+        resolvedPkgName = pkgName
+      } else if (package_name_with_version) {
+        const [pkgName] = package_name_with_version.split("@")
+        resolvedPkgName = pkgName
+      }
+
+      // Default version to 1.0.0 when it contains no digits
+      if (!resolvedVersion || !/[0-9]/.test(resolvedVersion)) {
+        resolvedVersion = "1.0.0"
       }
 
-      return newPackageRelease
+      const normalizedPackageNameWithVersion =
+        resolvedPkgName && `${resolvedPkgName}@${resolvedVersion}`
+
+      try {
+        const {
+          data: { package_release: newPackageRelease },
+        } = await axios.post("/package_releases/create", {
+          package_id,
+          version: resolvedVersion,
+          is_latest,
+          commit_sha,
+          package_name_with_version: normalizedPackageNameWithVersion,
+        })
+
+        if (!newPackageRelease) {
+          throw new Error("Failed to create package release")
+        }
+
+        return newPackageRelease
+      } catch (error: any) {
+        if (
+          error.status === 400 &&
+          error.data?.error?.error_code === "version_already_exists" &&
+          normalizedPackageNameWithVersion
+        ) {
+          // Update the existing release with the provided data
+          await axios.post("/package_releases/update", {
+            package_name_with_version: normalizedPackageNameWithVersion,
+            is_latest,
+            commit_sha,
+          })
+
+          const {
+            data: { package_release },
+          } = await axios.post("/package_releases/get", {
+            package_name_with_version: normalizedPackageNameWithVersion,
+          })
+
+          if (!package_release) {
+            throw new Error("Failed to update package release")
+          }
+
+          return package_release as PackageRelease
+        }
+
+        throw error
+      }
     },
     {
       onSuccess: (packageRelease: PackageRelease) => {

package/src/hooks/use-package-details-form.ts

@@ -16,6 +16,7 @@ interface PackageDetailsForm {
   license: string | null
   visibility: string
   defaultView: string
+  unscopedPackageName: string
 }
 
 interface UsePackageDetailsFormProps {
@@ -24,6 +25,7 @@ interface UsePackageDetailsFormProps {
   initialLicense: string | null
   initialVisibility: string
   initialDefaultView: string
+  initialUnscopedPackageName: string
   isDialogOpen: boolean
 }
 
@@ -33,6 +35,7 @@ export const usePackageDetailsForm = ({
   initialLicense,
   initialVisibility,
   initialDefaultView,
+  initialUnscopedPackageName,
   isDialogOpen,
 }: UsePackageDetailsFormProps) => {
   const [formData, setFormData] = useState<PackageDetailsForm>({
@@ -41,6 +44,7 @@ export const usePackageDetailsForm = ({
     license: initialLicense || null,
     visibility: initialVisibility,
     defaultView: initialDefaultView,
+    unscopedPackageName: initialUnscopedPackageName,
   })
   const [websiteError, setWebsiteError] = useState<string | null>(null)
 
@@ -52,6 +56,7 @@ export const usePackageDetailsForm = ({
         license: initialLicense || null,
         visibility: initialVisibility,
         defaultView: initialDefaultView,
+        unscopedPackageName: initialUnscopedPackageName,
       })
       setWebsiteError(null)
     }
@@ -62,6 +67,7 @@ export const usePackageDetailsForm = ({
     initialLicense,
     initialVisibility,
     initialDefaultView,
+    initialUnscopedPackageName,
   ])
 
   useEffect(() => {
@@ -93,7 +99,8 @@ export const usePackageDetailsForm = ({
       formData.website !== initialWebsite ||
       formData.license !== initialLicense ||
       formData.visibility !== initialVisibility ||
-      formData.defaultView !== initialDefaultView,
+      formData.defaultView !== initialDefaultView ||
+      formData.unscopedPackageName !== initialUnscopedPackageName,
     [
       formData,
       initialDescription,
@@ -101,6 +108,7 @@ export const usePackageDetailsForm = ({
       initialLicense,
       initialVisibility,
       initialDefaultView,
+      initialUnscopedPackageName,
     ],
   )
 

package/src/lib/templates/blank-package-template.ts

@@ -1,11 +1,8 @@
 export const blankPackageTemplate = {
   type: "package",
   code: `
-import { createUseComponent } from "@tscircuit/core"
+import type { ChipProps } from "@tscircuit/props"
 
-export const MyChip = (props: { name: string }) => (
-  <chip {...props} pinLabels={pinLabels} footprint="soic8" />
-)
 const pinLabels = {
   pin1: [],
   pin2: [],
@@ -17,6 +14,8 @@ const pinLabels = {
   pin8: [],
 } as const
 
-export const useMyChip = createUseComponent(MyChip, pinLabels)
+export const MyChip = (props: ChipProps<typeof pinLabels>) => (
+  <chip footprint="soic8" pinLabels={pinLabels} {...props} />
+)
 `.trim(),
 }

package/src/pages/quickstart.tsx

@@ -119,7 +119,7 @@ export const QuickstartPage = () => {
         <div className="mt-12">
           <h2 className="text-xl font-semibold mb-4">Import as Package</h2>
           <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
-            {[
+            {/* {[
               { name: "KiCad Footprint", type: "footprint" },
               { name: "KiCad Project", type: "board" },
               { name: "KiCad Module", type: "package" },
@@ -145,7 +145,7 @@ export const QuickstartPage = () => {
                   </Button>
                 </CardContent>
               </Card>
-            ))}
+            ))} */}
             <Card className="hover:shadow-md transition-shadow rounded-md flex flex-col">
               <CardHeader className="p-4 pb-0">
                 <CardTitle className="text-lg flex items-center justify-between">

package/src/pages/user-profile.tsx

@@ -14,6 +14,7 @@ import type { Package } from "fake-snippets-api/lib/db/schema"
 import type React from "react"
 import { useState } from "react"
 import { useQuery } from "react-query"
+import NotFoundPage from "./404"
 import { useParams } from "wouter"
 import {
   Select,
@@ -32,7 +33,28 @@ export const UserProfilePage = () => {
   const [activeTab, setActiveTab] = useState("all")
   const [filter, setFilter] = useState("most-recent") // Changed default from "newest" to "most-recent"
   const session = useGlobalStore((s) => s.session)
-  const isCurrentUserProfile = username === session?.github_username
+  const {
+    data: account,
+    error: accountError,
+    isLoading: isLoadingAccount,
+  } = useQuery<
+    { account: { github_username: string } },
+    Error & { status: number }
+  >(
+    ["account", username],
+    async () => {
+      const response = await axios.post("/accounts/get", {
+        github_username: username,
+      })
+      return response.data
+    },
+    { retry: false },
+  )
+
+  // use the username stored in the database so the correct case is displayed
+  const githubUsername = account?.account.github_username || username
+  const isCurrentUserProfile = githubUsername === session?.github_username
+
   const { Dialog: DeleteDialog, openDialog: openDeleteDialog } =
     useConfirmDeletePackageDialog()
   const [packageToDelete, setPackageToDelete] = useState<Package | null>(null)
@@ -41,33 +63,42 @@ export const UserProfilePage = () => {
     data: userPackages,
     isLoading: isLoadingUserPackages,
     refetch: refetchUserPackages,
-  } = useQuery<Package[]>(["userPackages", username], async () => {
-    const response = await axios.post(`/packages/list`, {
-      owner_github_username: username,
-    })
-    return response.data.packages
-  })
+  } = useQuery<Package[]>(
+    ["userPackages", githubUsername],
+    async () => {
+      const response = await axios.post(`/packages/list`, {
+        owner_github_username: githubUsername,
+      })
+      return response.data.packages
+    },
+    { enabled: Boolean(githubUsername) },
+  )
 
   const { data: starredPackages, isLoading: isLoadingStarredPackages } =
     useQuery<Package[]>(
-      ["starredPackages", username],
+      ["starredPackages", githubUsername],
       async () => {
         const response = await axios.post(`/packages/list`, {
-          starred_by: username,
+          starred_by: githubUsername,
         })
         return response.data.packages
       },
       {
-        enabled: activeTab === "starred",
+        enabled: activeTab === "starred" && Boolean(githubUsername),
       },
     )
 
   const baseUrl = useSnippetsBaseApiUrl()
 
+  if (accountError) {
+    return <NotFoundPage heading="User Not Found" />
+  }
+
   const packagesToShow =
     activeTab === "starred" ? starredPackages : userPackages
   const isLoading =
-    activeTab === "starred" ? isLoadingStarredPackages : isLoadingUserPackages
+    isLoadingAccount ||
+    (activeTab === "starred" ? isLoadingStarredPackages : isLoadingUserPackages)
 
   const filteredPackages = packagesToShow
     ?.filter((pkg) => {
@@ -107,12 +138,16 @@ export const UserProfilePage = () => {
       <div className="container mx-auto px-4 py-8">
         <div className="flex items-center gap-4 mb-6">
           <Avatar className="h-16 w-16">
-            <AvatarImage src={`https://github.com/${username}.png`} />
-            <AvatarFallback>{username?.[0]?.toUpperCase()}</AvatarFallback>
+            <AvatarImage src={`https://github.com/${githubUsername}.png`} />
+            <AvatarFallback>
+              {githubUsername?.[0]?.toUpperCase()}
+            </AvatarFallback>
           </Avatar>
           <div>
             <h1 className="text-3xl font-bold">
-              {isCurrentUserProfile ? "My Profile" : `${username}'s Profile`}
+              {isCurrentUserProfile
+                ? "My Profile"
+                : `${githubUsername}'s Profile`}
             </h1>
             <div className="text-gray-600 mt-1">
               {userPackages?.length || 0} packages
@@ -121,7 +156,7 @@ export const UserProfilePage = () => {
         </div>
         <div className="mb-6">
           <a
-            href={`https://github.com/${username}`}
+            href={`https://github.com/${githubUsername}`}
             target="_blank"
             rel="noopener noreferrer"
             className="inline-flex items-center"