@tscircuit/fake-snippets 0.0.26 → 0.0.28

package/src/components/ViewPackagePage/utils/is-package-file-important.ts

@@ -0,0 +1,21 @@
+const importanceMap = {
+  "readme.md": 200,
+  license: 100,
+  "license.md": 100,
+  "index.ts": 90,
+  "index.tsx": 90,
+  "circuit.tsx": 90,
+}
+
+export const scorePackageFileImportance = (filePath: string) => {
+  for (const [key, value] of Object.entries(importanceMap)) {
+    if (filePath.endsWith(key)) {
+      return value
+    }
+  }
+  return 0
+}
+
+export const isPackageFileImportant = (filePath: string) => {
+  return scorePackageFileImportance(filePath) > 0
+}

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

@@ -82,3 +82,32 @@ export const usePackageFileByRelease = (
       : null,
   )
 }
+
+// Hook to list all files for a package release
+export const usePackageFiles = (packageReleaseId?: string | null) => {
+  const axios = useAxios()
+
+  return useQuery<PackageFile[], Error & { status: number }>(
+    ["packageFiles", packageReleaseId],
+    async () => {
+      if (!packageReleaseId) return []
+
+      try {
+        const { data } = await axios.post("/package_files/list", {
+          package_release_id: packageReleaseId,
+        })
+
+        if (!data.package_files) {
+          return []
+        }
+
+        return data.package_files
+      } catch (error) {
+        throw error
+      }
+    },
+    {
+      enabled: Boolean(packageReleaseId),
+    },
+  )
+}

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

@@ -9,6 +9,14 @@ type PackageReleaseQuery =
   | {
       package_name_with_version: string
     }
+  | {
+      package_name: string
+      is_latest: boolean
+    }
+  | {
+      package_id: string
+      is_latest: boolean
+    }
 
 export const usePackageRelease = (query: PackageReleaseQuery | null) => {
   const axios = useAxios()
@@ -49,3 +57,17 @@ export const usePackageReleaseByNameAndVersion = (
       : null,
   )
 }
+
+export const useLatestPackageRelease = (
+  packageId?: string | null,
+  packageName?: string | null,
+) => {
+  // Prioritize packageName if both are provided
+  const query = packageName
+    ? { package_name: packageName, is_latest: true }
+    : packageId
+      ? { package_id: packageId, is_latest: true }
+      : null
+
+  return usePackageRelease(query)
+}

package/src/index.css

@@ -19,3 +19,18 @@
 .animate-fadeIn {
   animation: fadeIn 0.3s ease-in-out;
 }
+
+.shiki code {
+  counter-reset: step;
+  counter-increment: step 0;
+}
+
+.shiki code .line::before {
+  content: counter(step);
+  counter-increment: step;
+  width: 1rem;
+  margin-right: 1.5rem;
+  display: inline-block;
+  text-align: right;
+  color: rgba(115, 138, 148, 0.4);
+}

package/src/pages/beta.tsx

@@ -3,16 +3,81 @@ import { useCreatePackageMutation } from "@/hooks/use-create-package-mutation"
 import { useCreatePackageReleaseMutation } from "@/hooks/use-create-package-release-mutation"
 import { useForkPackageMutation } from "@/hooks/use-fork-package-mutation"
 import { usePackageById } from "@/hooks/use-package-by-package-id"
-import { usePackageFile } from "@/hooks/use-package-files"
-import { usePackageRelease } from "@/hooks/use-package-release"
-import { useState } from "react"
+import { usePackageByName } from "@/hooks/use-package-by-package-name"
+import { usePackageFile, usePackageFiles } from "@/hooks/use-package-files"
+import {
+  useLatestPackageRelease,
+  usePackageRelease,
+  usePackageReleaseByNameAndVersion,
+} from "@/hooks/use-package-release"
+import { useEffect, useState } from "react"
+import { useLocation } from "wouter"
 
 export const BetaPage = () => {
+  // Get the current path and extract author/packageName
+  const [location] = useLocation()
+  const pathParts = location.split("/")
+  const author = pathParts[2]
+  const urlPackageName = pathParts[3]
+  const packageNameWithVersion =
+    author && urlPackageName ? `${author}/${urlPackageName}` : null
+
+  // States for package creation flow
   const [createdPackageId, setCreatedPackageId] = useState<string | null>(null)
   const [createdReleaseId, setCreatedReleaseId] = useState<string | null>(null)
   const [createdFileId, setCreatedFileId] = useState<string | null>(null)
   const [forkedPackageId, setForkedPackageId] = useState<string | null>(null)
   const [packageName, setPackageName] = useState("")
+  const [selectedFileId, setSelectedFileId] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(!!packageNameWithVersion)
+
+  // Load existing package if URL params are provided
+  const { data: existingPackage, isSuccess: packageLoaded } = usePackageByName(
+    packageNameWithVersion,
+  )
+  // Use the new hook instead of usePackageReleaseByNameAndVersion
+  const { data: existingRelease, isSuccess: releaseLoaded } =
+    useLatestPackageRelease(existingPackage?.package_id)
+
+  // Log for debugging
+  console.log("Location path:", location)
+  console.log("Author:", author, "Package:", urlPackageName)
+  console.log("Package name with version:", packageNameWithVersion)
+  console.log("Existing package:", existingPackage)
+  console.log("Existing release:", existingRelease)
+
+  // Set IDs from existing package when they're loaded
+  useEffect(() => {
+    if (existingPackage) {
+      console.log("Setting package ID:", existingPackage.package_id)
+      setCreatedPackageId(existingPackage.package_id)
+      setPackageName(existingPackage.name)
+    }
+  }, [existingPackage])
+
+  useEffect(() => {
+    if (existingRelease) {
+      console.log("Setting release ID:", existingRelease.package_release_id)
+      setCreatedReleaseId(existingRelease.package_release_id)
+
+      // Force refetch package files by setting a dummy state to trigger useEffect
+      setTimeout(() => {
+        console.log("Triggering files refetch...")
+        setIsLoading(false)
+      }, 500)
+    }
+  }, [existingRelease])
+
+  // Update loading state
+  useEffect(() => {
+    if (packageNameWithVersion) {
+      if (packageLoaded && releaseLoaded) {
+        setIsLoading(false)
+      }
+    } else {
+      setIsLoading(false)
+    }
+  }, [packageNameWithVersion, packageLoaded, releaseLoaded])
 
   // Demo data
   const demoData = {
@@ -58,122 +123,240 @@ export const BetaPage = () => {
     onSuccess: (forkedPackage) => setForkedPackageId(forkedPackage.package_id),
   })
 
+  // Package data
   const { data: packageData } = usePackageById(createdPackageId)
-  const { data: releaseData } = usePackageRelease(
-    createdReleaseId ? { package_release_id: createdReleaseId } : null,
+
+  // Package release data
+  const { data: releaseData } = useLatestPackageRelease(createdPackageId, null)
+
+  // All package files for the release
+  const { data: packageFiles, isLoading: filesLoading } =
+    usePackageFiles(createdReleaseId)
+
+  // Log the files data for debugging
+  console.log(
+    "Package files:",
+    packageFiles,
+    "createdReleaseId:",
+    createdReleaseId,
   )
-  const { data: fileData } = usePackageFile(
-    createdFileId ? { package_file_id: createdFileId } : null,
+
+  // Individual file data when selected
+  const { data: selectedFileData } = usePackageFile(
+    selectedFileId ? { package_file_id: selectedFileId } : null,
   )
+
   const { data: forkedPackageData } = usePackageById(forkedPackageId)
 
+  if (isLoading) {
+    return (
+      <div className="p-4">
+        <h2 className="text-lg font-semibold mb-4">Loading package data...</h2>
+      </div>
+    )
+  }
+
   return (
     <div className="p-4">
-      <h1 className="text-xl font-bold mb-4">Package Management Demo</h1>
-      <div className="mb-4">
-        <div className="flex items-center gap-2">
-          <input
-            type="text"
-            value={packageName}
-            onChange={(e) => setPackageName(e.target.value)}
-            placeholder="test-package"
-            className="flex-1 px-3 py-2 border rounded text-sm"
-            disabled={Boolean(createdPackageId)}
-          />
+      <h1 className="text-xl font-bold mb-4">
+        {packageNameWithVersion
+          ? `Package: ${packageNameWithVersion}`
+          : "Package Management Demo"}
+      </h1>
+      {!packageNameWithVersion && (
+        <div className="mb-4">
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={packageName}
+              onChange={(e) => setPackageName(e.target.value)}
+              placeholder="test-package"
+              className="flex-1 px-3 py-2 border rounded text-sm"
+              disabled={Boolean(createdPackageId)}
+            />
+          </div>
         </div>
-      </div>
-      <div className="grid grid-cols-4 gap-4">
-        {/* Package Creation */}
-        <div className="bg-white p-4 rounded-lg shadow">
-          <div className="flex items-center justify-between mb-2">
-            <h2 className="font-semibold">1. Create Package</h2>
-            <button
-              onClick={() => createPackage(demoData.package)}
-              disabled={
-                isCreatingPackage || Boolean(createdPackageId) || !packageName
-              }
-              className="bg-blue-500 text-white px-3 py-1 text-sm rounded hover:bg-blue-600 disabled:bg-blue-300"
-            >
-              {createdPackageId ? "✓" : "Create"}
-            </button>
+      )}
+
+      {/* Package creation UI only shown when not viewing an existing package */}
+      {!packageNameWithVersion && (
+        <div className="grid grid-cols-4 gap-4 mb-4">
+          {/* Package Creation */}
+          <div className="bg-white p-4 rounded-lg shadow">
+            <div className="flex items-center justify-between mb-2">
+              <h2 className="font-semibold">1. Create Package</h2>
+              <button
+                onClick={() => createPackage(demoData.package)}
+                disabled={
+                  isCreatingPackage || Boolean(createdPackageId) || !packageName
+                }
+                className="bg-blue-500 text-white px-3 py-1 text-sm rounded hover:bg-blue-600 disabled:bg-blue-300"
+              >
+                {createdPackageId ? "✓" : "Create"}
+              </button>
+            </div>
+            {packageData && (
+              <pre className="text-xs bg-gray-50 p-2 rounded overflow-auto max-h-32">
+                {JSON.stringify(packageData, null, 2)}
+              </pre>
+            )}
+          </div>
+
+          {/* Release Creation */}
+          <div className="bg-white p-4 rounded-lg shadow">
+            <div className="flex items-center justify-between mb-2">
+              <h2 className="font-semibold">2. Create Release</h2>
+              <button
+                onClick={() =>
+                  createdPackageId &&
+                  createRelease({
+                    package_id: createdPackageId,
+                    ...demoData.release,
+                  })
+                }
+                disabled={!createdPackageId || Boolean(createdReleaseId)}
+                className="bg-blue-500 text-white px-3 py-1 text-sm rounded hover:bg-blue-600 disabled:bg-blue-300"
+              >
+                {createdReleaseId ? "✓" : "Create"}
+              </button>
+            </div>
+            {releaseData && (
+              <pre className="text-xs bg-gray-50 p-2 rounded overflow-auto max-h-32">
+                {JSON.stringify(releaseData, null, 2)}
+              </pre>
+            )}
+          </div>
+
+          {/* File Creation */}
+          <div className="bg-white p-4 rounded-lg shadow">
+            <div className="flex items-center justify-between mb-2">
+              <h2 className="font-semibold">3. Create Files</h2>
+              <button
+                onClick={() =>
+                  createdReleaseId &&
+                  Promise.all(
+                    demoData.files.map((file) =>
+                      createFile({
+                        package_release_id: createdReleaseId,
+                        ...file,
+                      }),
+                    ),
+                  )
+                }
+                disabled={!createdReleaseId || Boolean(createdFileId)}
+                className="bg-blue-500 text-white px-3 py-1 text-sm rounded hover:bg-blue-600 disabled:bg-blue-300"
+              >
+                {createdFileId ? "✓" : "Create"}
+              </button>
+            </div>
+          </div>
+
+          {/* Fork Package */}
+          <div className="bg-white p-4 rounded-lg shadow">
+            <div className="flex items-center justify-between mb-2">
+              <h2 className="font-semibold">4. Fork Package</h2>
+              <button
+                onClick={() =>
+                  createdPackageId && forkPackage(createdPackageId)
+                }
+                disabled={!createdPackageId || isForking}
+                className="bg-green-500 text-white px-3 py-1 text-sm rounded hover:bg-green-600 disabled:bg-green-300"
+              >
+                {forkedPackageId ? "✓" : "Fork"}
+              </button>
+            </div>
+            {forkedPackageData && (
+              <pre className="text-xs bg-gray-50 p-2 rounded overflow-auto max-h-32">
+                {JSON.stringify(forkedPackageData, null, 2)}
+              </pre>
+            )}
           </div>
-          {packageData && (
-            <pre className="text-xs bg-gray-50 p-2 rounded overflow-auto max-h-40">
-              {JSON.stringify(packageData, null, 2)}
-            </pre>
-          )}
         </div>
+      )}
 
-        {/* Release Creation */}
-        <div className="bg-white p-4 rounded-lg shadow">
-          <div className="flex items-center justify-between mb-2">
-            <h2 className="font-semibold">2. Create Release</h2>
-            <button
-              onClick={() =>
-                createdPackageId &&
-                createRelease({
-                  package_id: createdPackageId,
-                  ...demoData.release,
-                })
-              }
-              disabled={!createdPackageId || Boolean(createdReleaseId)}
-              className="bg-blue-500 text-white px-3 py-1 text-sm rounded hover:bg-blue-600 disabled:bg-blue-300"
-            >
-              {createdReleaseId ? "✓" : "Create"}
-            </button>
+      {/* Package info section shown when viewing an existing package */}
+      {packageNameWithVersion && packageData && (
+        <div className="bg-white p-4 rounded-lg shadow mb-4">
+          <h2 className="font-semibold mb-3">Package Information</h2>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <div className="text-sm font-medium mb-1">ID:</div>
+              <div className="text-sm text-gray-700">
+                {packageData.package_id}
+              </div>
+            </div>
+            <div>
+              <div className="text-sm font-medium mb-1">Name:</div>
+              <div className="text-sm text-gray-700">{packageData.name}</div>
+            </div>
+            <div>
+              <div className="text-sm font-medium mb-1">Description:</div>
+              <div className="text-sm text-gray-700">
+                {packageData.description || "No description"}
+              </div>
+            </div>
+            <div>
+              <div className="text-sm font-medium mb-1">Visibility:</div>
+              <div className="text-sm text-gray-700">
+                {packageData.is_private ? "Private" : "Public"}
+              </div>
+            </div>
           </div>
-          {releaseData && (
-            <pre className="text-xs bg-gray-50 p-2 rounded overflow-auto max-h-40">
-              {JSON.stringify(releaseData, null, 2)}
-            </pre>
-          )}
         </div>
+      )}
 
-        {/* File Creation */}
+      {/* Second row: package data exploration */}
+      <div className="grid grid-cols-2 gap-6">
+        {/* Package Files List */}
         <div className="bg-white p-4 rounded-lg shadow">
-          <div className="flex items-center justify-between mb-2">
-            <h2 className="font-semibold">3. Create Files</h2>
-            <button
-              onClick={() =>
-                createdReleaseId &&
-                Promise.all(
-                  demoData.files.map((file) =>
-                    createFile({
-                      package_release_id: createdReleaseId,
-                      ...file,
-                    }),
-                  ),
-                )
-              }
-              disabled={!createdReleaseId || Boolean(createdFileId)}
-              className="bg-blue-500 text-white px-3 py-1 text-sm rounded hover:bg-blue-600 disabled:bg-blue-300"
-            >
-              {createdFileId ? "✓" : "Create"}
-            </button>
+          <h2 className="font-semibold mb-3">Package Files</h2>
+          <div className="text-xs text-gray-600 mb-2">
+            Release ID: {createdReleaseId || "None"}
           </div>
-          {fileData && (
-            <pre className="text-xs bg-gray-50 p-2 rounded overflow-auto max-h-40">
-              {JSON.stringify(fileData, null, 2)}
-            </pre>
+          {filesLoading ? (
+            <div className="text-sm text-gray-500">Loading files...</div>
+          ) : packageFiles && packageFiles.length > 0 ? (
+            <div className="divide-y">
+              {packageFiles.map((file) => (
+                <button
+                  key={file.package_file_id}
+                  onClick={() => setSelectedFileId(file.package_file_id)}
+                  className={`text-left w-full py-2 px-1 text-sm hover:bg-gray-50 ${
+                    selectedFileId === file.package_file_id ? "bg-blue-50" : ""
+                  }`}
+                >
+                  {file.file_path}
+                </button>
+              ))}
+            </div>
+          ) : (
+            <div className="text-sm text-gray-500">
+              {createdReleaseId
+                ? "No files found. Files array length: " +
+                  (packageFiles ? packageFiles.length : "undefined")
+                : "Create a release and files first"}
+            </div>
           )}
         </div>
 
-        {/* Fork Package */}
+        {/* Selected File Content */}
         <div className="bg-white p-4 rounded-lg shadow">
-          <div className="flex items-center justify-between mb-2">
-            <h2 className="font-semibold">4. Fork Package</h2>
-            <button
-              onClick={() => createdPackageId && forkPackage(createdPackageId)}
-              disabled={!createdPackageId || isForking}
-              className="bg-green-500 text-white px-3 py-1 text-sm rounded hover:bg-green-600 disabled:bg-green-300"
-            >
-              {forkedPackageId ? "✓" : "Fork"}
-            </button>
-          </div>
-          {forkedPackageData && (
-            <pre className="text-xs bg-gray-50 p-2 rounded overflow-auto max-h-40">
-              {JSON.stringify(forkedPackageData, null, 2)}
-            </pre>
+          <h2 className="font-semibold mb-3">File Content</h2>
+          {selectedFileData ? (
+            <div>
+              <div className="text-xs text-gray-500 mb-2">
+                {selectedFileData.file_path}
+              </div>
+              <pre className="text-xs bg-gray-50 p-3 rounded overflow-auto border max-h-80">
+                {selectedFileData.content_text}
+              </pre>
+            </div>
+          ) : (
+            <div className="text-sm text-gray-500">
+              {packageFiles && packageFiles.length > 0
+                ? "Select a file to view its content"
+                : "Create files first"}
+            </div>
           )}
         </div>
       </div>

package/src/pages/view-package.tsx

@@ -0,0 +1,38 @@
+import RepoPageContent from "@/components/ViewPackagePage/components/repo-page-content"
+import SimulatePage from "@/components/ViewPackagePage/simulate-page"
+import { usePackageByName } from "@/hooks/use-package-by-package-name"
+import { usePackageFiles } from "@/hooks/use-package-files"
+import { usePackageRelease } from "@/hooks/use-package-release"
+import { useLocation } from "wouter"
+
+export const ViewPackagePage = () => {
+  // Get the current path and extract author/packageName
+  const [location] = useLocation()
+  const pathParts = location.split("/")
+  const author = pathParts[2]
+  const urlPackageName = pathParts[3]
+  const fullPackageName = `${author}/${urlPackageName}`
+
+  const { data: packageInfo } = usePackageByName(fullPackageName)
+
+  const { data: packageRelease } = usePackageRelease({
+    is_latest: true,
+    package_name: fullPackageName,
+  })
+
+  const { data: packageFiles } = usePackageFiles(
+    packageRelease?.package_release_id,
+  )
+
+  return (
+    <RepoPageContent
+      packageFiles={packageFiles as any}
+      packageInfo={packageInfo as any}
+      importantFilePaths={["README.md", "LICENSE", "package.json"]}
+      onFileClicked={() => {}}
+      onDirectoryClicked={() => {}}
+      onExportClicked={() => {}}
+      onEditClicked={() => {}}
+    />
+  )
+}