@tscircuit/fake-snippets 0.0.66 → 0.0.67

package/src/pages/latest.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 import { useQuery } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
-import { Snippet } from "fake-snippets-api/lib/db/schema"
+import { Package } from "fake-snippets-api/lib/db/schema"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
 import {
@@ -23,8 +23,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { SnippetCard } from "@/components/SnippetCard"
 import { PackageCardSkeleton } from "@/components/PackageCardSkeleton"
+import { PackageCard } from "@/components/PackageCard"
 
 const LatestPage: React.FC = () => {
   const axios = useAxios()
@@ -33,30 +33,30 @@ const LatestPage: React.FC = () => {
   const [category, setCategory] = useState("all")
 
   const {
-    data: snippets,
+    data: packages,
     isLoading,
     error,
-  } = useQuery<Snippet[]>(
-    ["latestSnippets", category],
+  } = useQuery<Package[]>(
+    ["latestPackages", category],
     async () => {
       const params = category !== "all" ? { tag: category } : {}
-      const response = await axios.get("/snippets/list_latest", { params })
-      return response.data.snippets
+      const response = await axios.get("/packages/list_latest", { params })
+      return response.data.packages
     },
     {
       keepPreviousData: true,
     },
   )
 
-  const filteredSnippets = snippets?.filter((snippet) => {
+  const filteredPackages = packages?.filter((pkg) => {
     if (!searchQuery) return true
 
     const query = searchQuery.toLowerCase().trim()
 
     const searchableFields = [
-      snippet.unscoped_name.toLowerCase(),
-      snippet.owner_name.toLowerCase(),
-      (snippet.description || "").toLowerCase(),
+      pkg.unscoped_name.toLowerCase(),
+      pkg.owner_github_username?.toLowerCase() ?? "",
+      (pkg.description || "").toLowerCase(),
     ]
 
     return searchableFields.some((field) => {
@@ -73,7 +73,7 @@ const LatestPage: React.FC = () => {
           <div className="flex items-center gap-2 mb-3">
             <Calendar className="w-6 h-6 text-blue-500" />
             <h1 className="text-4xl font-bold text-gray-900">
-              Latest Snippets
+              Latest Packages
             </h1>
           </div>
           <p className="text-lg text-gray-600 mb-4">
@@ -99,7 +99,7 @@ const LatestPage: React.FC = () => {
               <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
               <Input
                 type="text"
-                placeholder="Search latest snippets..."
+                placeholder="Search latest packages..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 className="pl-10"
@@ -154,40 +154,39 @@ const LatestPage: React.FC = () => {
               </div>
               <div>
                 <h3 className="text-lg font-semibold mb-2">
-                  Error Loading Snippets
+                  Error Loading Packages
                 </h3>
                 <p className="text-red-600">
-                  We couldn't load the latest snippets. Please try again later.
+                  We couldn't load the latest packages. Please try again later.
                 </p>
               </div>
             </div>
           </div>
-        ) : filteredSnippets?.length === 0 ? (
+        ) : filteredPackages?.length === 0 ? (
           <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 Snippets
+              No Matching Packages
             </h3>
             <p className="text-slate-500 max-w-md mx-auto mb-6">
               {searchQuery
-                ? `No snippets match your search for "${searchQuery}".`
+                ? `No packages match your search for "${searchQuery}".`
                 : category !== "all"
-                  ? `No ${category} snippets found in the latest list.`
-                  : "There are no new snippets at the moment."}
+                  ? `No ${category} packages found in the latest list.`
+                  : "There are no new packages at the moment."}
             </p>
           </div>
         ) : (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-            {filteredSnippets
+            {filteredPackages
               ?.sort((a, b) => b.created_at.localeCompare(a.created_at))
-              ?.map((snippet) => (
-                <SnippetCard
-                  key={snippet.snippet_id}
-                  snippet={snippet}
+              ?.map((pkg) => (
+                <PackageCard
+                  key={pkg.package_id}
+                  pkg={pkg}
                   baseUrl={apiBaseUrl}
-                  showOwner={true}
                 />
               ))}
           </div>

package/src/pages/search.tsx

@@ -1,13 +1,92 @@
+import React, { useState, useEffect } from "react"
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import { useSearchParams } from "wouter"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
-import PageSearchComponent from "@/components/PageSearchComponent"
-import { useState } from "react"
-import { Search, Tag, Filter } from "lucide-react"
-import { Badge } from "@/components/ui/badge"
-import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+import { Input } from "@/components/ui/input"
+import { Search } from "lucide-react"
+import PackageSearchResults from "@/components/PackageSearchResults"
+import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Package } from "fake-snippets-api/lib/db/schema"
 
 export const SearchPage = () => {
-  const [searchResults, setSearchResults] = useState<any[]>([])
+  const axios = useAxios()
+  const apiBaseUrl = useSnippetsBaseApiUrl()
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  const [searchQuery, setSearchQuery] = useState(searchParams.get("q") || "")
+  const [category, setCategory] = useState(
+    searchParams.get("category") || "all",
+  )
+  const [sortBy, setSortBy] = useState(searchParams.get("sort") || "stars")
+
+  useEffect(() => {
+    const params = new URLSearchParams()
+    if (searchQuery) params.set("q", searchQuery)
+    if (category !== "all") params.set("category", category)
+    if (sortBy !== "stars") params.set("sort", sortBy)
+    setSearchParams(params)
+  }, [searchQuery, category, sortBy, setSearchParams])
+
+  const {
+    data: packages,
+    isLoading,
+    error,
+  } = useQuery(
+    ["packageSearch", searchQuery, category],
+    async () => {
+      const params = new URLSearchParams()
+      if (searchQuery) params.append("q", searchQuery)
+      if (category !== "all") params.append("category", category)
+
+      const response = await axios.post(`/packages/search`, {
+        query: searchQuery,
+      })
+      return response.data.packages
+    },
+    { enabled: Boolean(searchQuery), keepPreviousData: true },
+  )
+
+  const filteredPackages = packages
+    ?.filter((pkg: Package) => {
+      if (!searchQuery) return true
+
+      const query = searchQuery.toLowerCase().trim()
+      const searchableFields = [
+        pkg.unscoped_name.toLowerCase(),
+        (pkg.owner_github_username || "").toLowerCase(),
+        (pkg.description || "").toLowerCase(),
+        pkg.description?.toLowerCase(),
+      ]
+
+      return searchableFields.some((field) => {
+        const queryWords = query.split(/\s+/).filter((word) => word.length > 0)
+        if (!field) return false
+        return queryWords.every((word) => field.includes(word))
+      })
+    })
+    ?.sort((a: Package, b: Package) => {
+      if (sortBy === "stars") {
+        return (b.star_count || 0) - (a.star_count || 0)
+      } else if (sortBy === "newest") {
+        return (
+          new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
+        )
+      } else if (sortBy === "oldest") {
+        return (
+          new Date(a.updated_at).getTime() - new Date(b.updated_at).getTime()
+        )
+      }
+      return 0
+    })
 
   return (
     <div className="min-h-screen flex flex-col">
@@ -17,26 +96,46 @@ export const SearchPage = () => {
           <div className="max-w-8xl mx-auto">
             <div className="mb-6">
               <div className="flex items-center gap-2 mb-3">
-                <Search className="w-6 h-6 text-blue-500" />
                 <h1 className="text-3xl font-bold text-gray-900">
                   Search tscircuit Packages
                 </h1>
               </div>
-              <div className="flex flex-wrap gap-3">
-                <PrefetchPageLink href="/trending">
-                  <Badge
-                    variant="secondary"
-                    className="px-3 py-1 cursor-pointer hover:bg-gray-200"
-                  >
-                    <Tag className="w-3.5 h-3.5 mr-1" />
-                    <span>Browse Packages</span>
-                  </Badge>
-                </PrefetchPageLink>
+              <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 packages..."
+                    className="pl-10"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    aria-label="Search packages"
+                    role="searchbox"
+                  />
+                </div>
+                <Select value={sortBy} onValueChange={setSortBy}>
+                  <SelectTrigger className="w-[140px]">
+                    <SelectValue placeholder="Sort By" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="stars">Most Starred</SelectItem>
+                    <SelectItem value="newest">Newest</SelectItem>
+                    <SelectItem value="oldest">Oldest</SelectItem>
+                  </SelectContent>
+                </Select>
               </div>
             </div>
 
-            <PageSearchComponent
-              onResultsFetched={(results) => setSearchResults(results)}
+            <PackageSearchResults
+              isLoading={isLoading}
+              error={error}
+              filteredPackages={filteredPackages}
+              apiBaseUrl={apiBaseUrl}
+              emptyStateMessage={
+                searchQuery
+                  ? `No packages match your search for "${searchQuery}".`
+                  : "Please enter a search query to find packages."
+              }
             />
           </div>
         </div>
@@ -45,3 +144,5 @@ export const SearchPage = () => {
     </div>
   )
 }
+
+export default SearchPage

package/src/pages/trending.tsx

@@ -14,16 +14,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { PackageCardSkeleton } from "@/components/PackageCardSkeleton"
 import { Package } from "fake-snippets-api/lib/db/schema"
-import { PackageCard } from "@/components/PackageCard"
+import PackageSearchResults from "@/components/PackageSearchResults"
 
 const TrendingPage: React.FC = () => {
   const axios = useAxios()
   const apiBaseUrl = useSnippetsBaseApiUrl()
   const [searchParams, setSearchParams] = useSearchParams()
 
-  // Initialize state from URL params or defaults
   const [searchQuery, setSearchQuery] = useState(searchParams.get("q") || "")
   const [category, setCategory] = useState(
     searchParams.get("category") || "all",
@@ -33,7 +31,6 @@ const TrendingPage: React.FC = () => {
   )
   const [sortBy, setSortBy] = useState(searchParams.get("sort") || "stars")
 
-  // Update URL params when filters change
   useEffect(() => {
     const params = new URLSearchParams()
     if (searchQuery) params.set("q", searchQuery)
@@ -47,7 +44,6 @@ const TrendingPage: React.FC = () => {
     data: packages,
     isLoading,
     error,
-    refetch,
   } = useQuery<Package[]>(
     ["trendingPackages", category, time_period],
     async () => {
@@ -70,7 +66,6 @@ const TrendingPage: React.FC = () => {
       if (!searchQuery) return true
 
       const query = searchQuery.toLowerCase().trim()
-
       const searchableFields = [
         pkg.unscoped_name.toLowerCase(),
         (pkg.owner_github_username || "").toLowerCase(),
@@ -175,58 +170,19 @@ const TrendingPage: React.FC = () => {
             </Select>
           </div>
         </div>
-
-        {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>
-        ) : 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 packages
-                </h3>
-                <p className="text-red-600">
-                  We couldn't load the trending packages. Please try again
-                  later.
-                </p>
-              </div>
-            </div>
-          </div>
-        ) : filteredPackages?.length === 0 ? (
-          <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 Packages
-            </h3>
-            <p className="text-slate-500 max-w-md mx-auto mb-6">
-              {searchQuery
-                ? `No packages match your search for "${searchQuery}".`
-                : category !== "all"
-                  ? `No ${category} packages found in the trending list.`
-                  : "There are no trending packages at the moment."}
-            </p>
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-            {filteredPackages?.map((pkg) => (
-              <PackageCard
-                key={pkg.package_id}
-                pkg={pkg}
-                baseUrl={apiBaseUrl}
-                showOwner={true}
-              />
-            ))}
-          </div>
-        )}
+        <PackageSearchResults
+          isLoading={isLoading}
+          error={error}
+          filteredPackages={filteredPackages}
+          apiBaseUrl={apiBaseUrl}
+          emptyStateMessage={
+            searchQuery
+              ? `No packages match your search for "${searchQuery}".`
+              : category !== "all"
+                ? `No ${category} packages found in the trending list.`
+                : "There are no trending packages at the moment."
+          }
+        />
       </main>
       <Footer />
     </div>

package/src/pages/user-profile.tsx

@@ -23,6 +23,7 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { Box, Star } from "lucide-react"
+import { PackageCardSkeleton } from "@/components/PackageCardSkeleton"
 
 export const UserProfilePage = () => {
   const { username } = useParams()
@@ -159,10 +160,10 @@ export const UserProfilePage = () => {
           </Select>
         </div>
         {isLoading ? (
-          <div>
-            {activeTab === "starred"
-              ? "Loading Starred Packages..."
-              : "Loading User Packages..."}
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {[...Array(6)].map((_, i) => (
+              <PackageCardSkeleton key={i} />
+            ))}
           </div>
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -184,16 +185,20 @@ export const UserProfilePage = () => {
                 <div className="flex flex-col items-center py-12 text-gray-500">
                   {activeTab === "starred" ? (
                     <>
-                      <Star />
+                      <Star className="mb-2" size={24} />
                       <span className="text-lg font-medium">
-                        No starred packages
+                        {searchQuery.trim()
+                          ? `No starred packages matching '${searchQuery.trim()}'`
+                          : "No starred packages"}
                       </span>
                     </>
                   ) : (
                     <>
-                      <Box />
+                      <Box className="mb-2" size={24} />
                       <span className="text-lg font-medium">
-                        No packages available
+                        {searchQuery.trim()
+                          ? `No packages matching '${searchQuery.trim()}'`
+                          : "No packages available"}
                       </span>
                     </>
                   )}

package/bun-tests/fake-snippets-api/routes/snippets/add_star.test.ts

@@ -1,84 +0,0 @@
-import { getTestServer } from "bun-tests/fake-snippets-api/fixtures/get-test-server"
-import { expect, test } from "bun:test"
-
-test("add star to snippet", async () => {
-  const { axios } = await getTestServer()
-
-  // Create a test snippet using the create endpoint
-  const newSnippetData = {
-    code: "Test Content",
-    snippet_type: "package",
-    description: "Test Description",
-  }
-  const createResponse = await axios.post(
-    "/api/snippets/create",
-    newSnippetData,
-  )
-  expect(createResponse.status).toBe(200)
-  const createdSnippet = createResponse.data.snippet
-
-  // Star the snippet
-  const response = await axios.post("/api/snippets/add_star", {
-    snippet_id: createdSnippet.snippet_id,
-  })
-
-  expect(response.status).toBe(200)
-  expect(response.data.ok).toBe(true)
-
-  // Verify star was added by checking the snippet again
-  const getResponse = await axios.get("/api/snippets/get", {
-    params: { snippet_id: createdSnippet.snippet_id },
-  })
-
-  expect(getResponse.status).toBe(200)
-  expect(getResponse.data.snippet.is_starred).toBe(true)
-})
-
-test("add star to non-existent snippet", async () => {
-  const { axios } = await getTestServer()
-
-  try {
-    await axios.post("/api/snippets/add_star", {
-      snippet_id: "non-existent-id",
-    })
-    expect(true).toBe(false) // Should not reach here
-  } catch (error: any) {
-    expect(error.status).toBe(404)
-    expect(error.data.error.message).toBe("Snippet not found")
-  }
-})
-
-test("add star to already starred snippet", async () => {
-  const { axios } = await getTestServer()
-
-  // Create a test snippet using the create endpoint
-  const newSnippetData = {
-    code: "Test Content",
-    snippet_type: "package",
-    description: "Test Description",
-  }
-  const createResponse = await axios.post(
-    "/api/snippets/create",
-    newSnippetData,
-  )
-  expect(createResponse.status).toBe(200)
-  const createdSnippet = createResponse.data.snippet
-
-  // Star the snippet first time
-  await axios.post("/api/snippets/add_star", {
-    snippet_id: createdSnippet.snippet_id,
-  })
-
-  // Try to star again
-  try {
-    await axios.post("/api/snippets/add_star", {
-      snippet_id: createdSnippet.snippet_id,
-    })
-    expect(true).toBe(false) // Should not reach here
-  } catch (error: any) {
-    expect(error.status).toBe(400)
-    expect(error.data.error.message).toBe(
-      "You have already starred this snippet",
-    )
-  }
-})

package/bun-tests/fake-snippets-api/routes/snippets/create.test.ts

@@ -1,53 +0,0 @@
-import { getTestServer } from "bun-tests/fake-snippets-api/fixtures/get-test-server"
-import { expect, test } from "bun:test"
-
-test("create snippet", async () => {
-  const { axios } = await getTestServer()
-
-  const response = await axios.post("/api/snippets/create", {
-    unscoped_name: "TestSnippet",
-    code: "Test Content",
-    snippet_type: "package",
-    description: "Test Description",
-  })
-
-  expect(response.status).toBe(200)
-  expect(response.data.snippet.unscoped_name).toBe("TestSnippet")
-  expect(response.data.snippet.owner_name).toBe("testuser")
-  expect(response.data.snippet.code).toBe("Test Content")
-  expect(response.data.snippet.snippet_type).toBe("package")
-  expect(response.data.snippet.description).toBe("Test Description")
-})
-
-test("create snippet and call package get to verify it exists", async () => {
-  const { axios, db } = await getTestServer()
-
-  const response = await axios.post("/api/snippets/create", {
-    unscoped_name: "example-package",
-    code: "console.log('Hello, world!');",
-    snippet_type: "package",
-    description: "Test Description",
-  })
-  const packageResponse = await axios.get(`/api/packages/get`, {
-    params: {
-      package_id: response.data.snippet.snippet_id,
-    },
-  })
-  expect(packageResponse.status).toBe(200)
-  expect(packageResponse.data.package.unscoped_name).toBe("example-package")
-  expect(packageResponse.data.package.owner_github_username).toBe("testuser")
-  expect(packageResponse.data.package.description).toBe("Test Description")
-
-  // Add package file verification
-  const packageFileResponse = await axios.post(`/api/package_files/get`, {
-    package_release_id: packageResponse.data.package.latest_package_release_id,
-    file_path: "index.tsx",
-  })
-
-  expect(packageFileResponse.status).toBe(200)
-  expect(packageFileResponse.data.ok).toBe(true)
-  expect(packageFileResponse.data.package_file).toBeDefined()
-  expect(packageFileResponse.data.package_file.content_text).toBe(
-    "console.log('Hello, world!');",
-  )
-})

package/bun-tests/fake-snippets-api/routes/snippets/delete.test.ts

@@ -1,82 +0,0 @@
-import { getTestServer } from "bun-tests/fake-snippets-api/fixtures/get-test-server"
-import { test, expect } from "bun:test"
-
-test("delete snippet", async () => {
-  const { axios, db } = await getTestServer()
-
-  // Add a test snippet
-  const snippet = {
-    unscoped_name: "TestSnippet",
-    owner_name: "testuser",
-    code: "Test Content",
-    created_at: "2023-01-01T00:00:00Z",
-    updated_at: "2023-01-01T00:00:00Z",
-    name: "testuser/TestSnippet",
-    snippet_type: "package",
-    description: "Test Description",
-  }
-  const addedSnippet: any = db.addSnippet(snippet as any)
-
-  // Delete the snippet
-  const response = await axios.post("/api/snippets/delete", {
-    snippet_id: addedSnippet.snippet_id,
-  })
-
-  expect(response.status).toBe(200)
-  expect(response.data.ok).toBe(true)
-
-  // Verify the snippet was deleted from the database
-  const deletedSnippet = db.getSnippetById(addedSnippet.snippet_id)
-  expect(deletedSnippet).toBeUndefined()
-
-  // List all the snippets and verify the deleted snippet is not in the list
-  const listResponse = await axios.get("/api/snippets/list")
-
-  expect(listResponse.status).toBe(200)
-  expect(listResponse.data.snippets).toHaveLength(0)
-})
-
-test("delete non-existent snippet", async () => {
-  const { axios } = await getTestServer()
-
-  try {
-    await axios.post("/api/snippets/delete", {
-      snippet_id: "non-existent-id",
-    })
-    // If the request doesn't throw an error, fail the test
-    expect(true).toBe(false)
-  } catch (error: any) {
-    expect(error.status).toBe(404)
-    expect(error.data.error.message).toBe("Snippet not found")
-  }
-})
-
-test("delete snippet without permission", async () => {
-  const { axios, db } = await getTestServer()
-
-  // Add a test snippet with a different owner
-  const snippet = {
-    unscoped_name: "TestSnippet",
-    owner_name: "otheruser",
-    code: "Test Content",
-    created_at: "2023-01-01T00:00:00Z",
-    updated_at: "2023-01-01T00:00:00Z",
-    name: "otheruser/TestSnippet",
-    snippet_type: "package",
-    description: "Test Description",
-  }
-  const addedSnippet: any = db.addSnippet(snippet as any)
-
-  try {
-    await axios.post("/api/snippets/delete", {
-      snippet_id: addedSnippet.snippet_id,
-    })
-    // If the request doesn't throw an error, fail the test
-    expect(true).toBe(false)
-  } catch (error: any) {
-    expect(error.status).toBe(403)
-    expect(error.data.error.message).toBe(
-      "You don't have permission to delete this snippet",
-    )
-  }
-})