@tscircuit/fake-snippets 0.0.66 → 0.0.68

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>
                     </>
                   )}
@@ -207,6 +212,7 @@ export const UserProfilePage = () => {
         <DeleteDialog
           packageId={packageToDelete.package_id}
           packageName={packageToDelete.unscoped_name}
+          packageOwner={packageToDelete.owner_github_username ?? ""}
           refetchUserPackages={refetchUserPackages}
         />
       )}

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

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

@@ -1,90 +0,0 @@
-import { getTestServer } from "bun-tests/fake-snippets-api/fixtures/get-test-server"
-import { test, expect } from "bun:test"
-
-test("download snippet files and directory listing", async () => {
-  const { axios, db } = await getTestServer()
-
-  // Add a test snippet
-  const snippet = {
-    unscoped_name: "test-package",
-    owner_name: "testuser",
-    code: "export const TestComponent = () => <div>Test</div>",
-    dts: "export declare const TestComponent: () => JSX.Element",
-    created_at: "2023-01-01T00:00:00Z",
-    updated_at: "2023-01-01T00:00:00Z",
-    name: "testuser/test-package",
-    snippet_type: "package",
-    description: "Test package",
-  }
-  db.addSnippet(snippet as any)
-
-  // Test downloading index.ts
-  const indexResponse = await axios.get("/api/snippets/download", {
-    params: { jsdelivr_path: "testuser/test-package@1.0.0/index.ts" },
-  })
-  expect(indexResponse.status).toBe(200)
-  expect(indexResponse.data).toBe(snippet.code)
-
-  // Test downloading index.d.ts
-  const dtsResponse = await axios.get("/api/snippets/download", {
-    params: { jsdelivr_path: "testuser/test-package@1.0.0/index.d.ts" },
-  })
-  expect(dtsResponse.status).toBe(200)
-  expect(dtsResponse.data).toBe(snippet.dts)
-
-  // Test downloading package.json
-  const packageJsonResponse = await axios.get("/api/snippets/download", {
-    params: { jsdelivr_path: "testuser/test-package@1.0.0/package.json" },
-  })
-  expect(packageJsonResponse.status).toBe(200)
-  const packageJson = packageJsonResponse.data
-  expect(packageJson).toEqual({
-    name: "@tsci/testuser.test-package",
-    version: "1.0.0",
-    main: "index.ts",
-    types: "index.d.ts",
-  })
-
-  // Test downloading root (directory listing)
-  const rootResponse = await axios.get("/api/snippets/download", {
-    params: { jsdelivr_path: "testuser/test-package@1.0.0" },
-  })
-  expect(rootResponse.status).toBe(200)
-  const rootData = rootResponse.data
-  expect(rootData.tags).toBeDefined()
-  expect(rootData.versions).toBeDefined()
-
-  // Test downloading flat directory listing
-  const flatResponse = await axios.get("/api/snippets/download", {
-    params: { jsdelivr_path: "testuser/test-package@1.0.0/flat" },
-  })
-  expect(flatResponse.status).toBe(200)
-  const flatData = flatResponse.data
-  expect(flatData.default).toBe("/index.ts")
-  expect(flatData.files).toHaveLength(3)
-  expect(flatData.files[0].name).toMatch(/^\//)
-
-  // Test downloading non-existent file
-  try {
-    await axios.get("/api/snippets/download", {
-      params: { jsdelivr_path: "testuser/test-package@1.0.0/non-existent.ts" },
-    })
-    // 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("Requested file not found")
-  }
-
-  // Test downloading non-existent package
-  try {
-    await axios.get("/api/snippets/download", {
-      params: { jsdelivr_path: "testuser/non-existent-package@1.0.0/index.ts" },
-    })
-    // 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")
-  }
-})

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

@@ -1,16 +0,0 @@
-import { getTestServer } from "bun-tests/fake-snippets-api/fixtures/get-test-server"
-import { test, expect } from "bun:test"
-
-test.skip("generate snippet from JLCPCB part number", async () => {
-  const { axios } = await getTestServer()
-
-  const response = await axios.post("/api/snippets/generate_from_jlcpcb", {
-    jlcpcb_part_number: "C46749",
-  })
-  expect(response.status).toBe(200)
-  expect(response.data.snippet).toBeDefined()
-  expect(response.data.snippet.unscoped_name).toBe("C46749")
-  expect(response.data.snippet.owner_name).toBe("testuser")
-  expect(response.data.snippet.snippet_type).toBe("package")
-  expect(response.data.snippet.code).toContain("export const NE555P")
-})

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

@@ -1,163 +0,0 @@
-import { getTestServer } from "bun-tests/fake-snippets-api/fixtures/get-test-server"
-import { expect, test } from "bun:test"
-import { snippetSchema } from "fake-snippets-api/lib/db/schema"
-
-test("GET /api/snippets/get - should return snippet by snippet_id", async () => {
-  const { axios } = await getTestServer()
-
-  // First create a snippet
-  const newSnippetData = {
-    code: "console.log('Hello World')",
-    snippet_type: "package",
-    description: "A test snippet",
-    compiled_js: "console.log('Hello World')",
-    dts: "export function hello(): void;",
-  }
-
-  const createResponse = await axios.post(
-    "/api/snippets/create",
-    newSnippetData,
-  )
-  expect(createResponse.status).toBe(200)
-  const createdSnippet = createResponse.data.snippet
-
-  // Get the created snippet using the /get endpoint
-  const getResponse = await axios.get("/api/snippets/get", {
-    params: { snippet_id: createdSnippet.snippet_id },
-  })
-
-  expect(getResponse.status).toBe(200)
-  const responseBody = getResponse.data
-  expect(responseBody.ok).toBe(true)
-  expect(responseBody.snippet).toEqual(snippetSchema.parse(createdSnippet))
-})
-
-test("GET /api/snippets/get - should return 404 if snippet not found", async () => {
-  const { axios } = await getTestServer()
-
-  try {
-    await axios.get("/api/snippets/get", {
-      params: { snippet_id: "non_existent_snippet_id" },
-    })
-    throw new Error("Expected request to fail")
-  } catch (error: any) {
-    expect(error.status).toBe(404)
-    expect(error.data.error.error_code).toBe("snippet_not_found")
-    expect(error.data.error.message).toBe(
-      'Snippet not found (searched using {"snippet_id":"non_existent_snippet_id"})',
-    )
-  }
-})
-
-test("GET /api/snippets/get - should return snippet by name and owner", async () => {
-  const { axios } = await getTestServer()
-
-  // First create a snippet
-  const newSnippetData = {
-    code: "console.log('Hello World')",
-    snippet_type: "package",
-    description: "A test snippet",
-    compiled_js: "console.log('Hello World')",
-    dts: "export function hello(): void;",
-  }
-
-  const createResponse = await axios.post(
-    "/api/snippets/create",
-    newSnippetData,
-  )
-  expect(createResponse.status).toBe(200)
-  const createdSnippet = createResponse.data.snippet
-
-  // Get the snippet using name and owner
-  const getResponse = await axios.get("/api/snippets/get", {
-    params: {
-      name: createdSnippet.name,
-      owner_name: createdSnippet.owner_name,
-    },
-  })
-
-  expect(getResponse.status).toBe(200)
-  const responseBody = getResponse.data
-  expect(responseBody.ok).toBe(true)
-  expect(responseBody.snippet).toEqual(snippetSchema.parse(createdSnippet))
-})
-
-test("GET /api/snippets/get - should return snippet by unscoped_name and owner", async () => {
-  const { axios, db } = await getTestServer()
-
-  // First create a snippet
-  const snippet = {
-    unscoped_name: "test-package",
-    owner_name: "testuser",
-    code: "export const TestComponent = () => <div>Test</div>",
-    dts: "export declare const TestComponent: () => JSX.Element",
-    created_at: "2023-01-01T00:00:00Z",
-    updated_at: "2023-01-01T00:00:00Z",
-    name: "testuser/test-package",
-    snippet_type: "package",
-    description: "Test package",
-  }
-
-  db.addSnippet(snippet as any)
-
-  // Get the snippet using name and owner
-  const getResponse = await axios.get("/api/snippets/get", {
-    params: {
-      unscoped_name: snippet.unscoped_name,
-      owner_name: snippet.owner_name,
-    },
-  })
-
-  expect(getResponse.status).toBe(200)
-  const responseBody = getResponse.data
-  expect(responseBody.ok).toBe(true)
-})
-
-test("GET /api/snippets/get - should not return snippet if snippet is private and user is unauthenticated", async () => {
-  const { axios, db, unauthenticatedAxios } = await getTestServer()
-
-  // First create a snippet
-  const snippet = {
-    unscoped_name: "test-package",
-    owner_name: "testuser",
-    code: "export const TestComponent = () => <div>Test</div>",
-    dts: "export declare const TestComponent: () => JSX.Element",
-    created_at: "2023-01-01T00:00:00Z",
-    updated_at: "2023-01-01T00:00:00Z",
-    name: "testuser/test-package",
-    snippet_type: "package",
-    description: "Test package",
-  }
-
-  db.addSnippet(snippet as any)
-
-  const createdSnippet = db.packages[0]
-
-  const updatedSnippet = await axios.post("/api/snippets/update", {
-    snippet_id: createdSnippet.package_id,
-    is_private: true,
-  })
-
-  expect(updatedSnippet.status).toBe(200)
-  expect(updatedSnippet.data.snippet.is_private).toBe(true)
-  expect(updatedSnippet.data.snippet.is_public).toBe(false)
-
-  // Get the snippet using name and owner
-  const getResponse = await axios.post("/api/snippets/get", {
-    snippet_id: createdSnippet.package_id,
-  })
-
-  expect(getResponse.status).toBe(200)
-  const responseBody = getResponse.data
-  expect(responseBody.ok).toBe(true)
-
-  try {
-    await unauthenticatedAxios.post("/api/snippets/get", {
-      snippet_id: createdSnippet.package_id,
-    })
-    throw new Error("Expected request to fail")
-  } catch (error: any) {
-    expect(error.status).toBe(404)
-    expect(error.data.error.error_code).toBe("snippet_not_found")
-  }
-})