@tscircuit/fake-snippets 0.0.69 → 0.0.70

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

@@ -34,6 +34,18 @@ export default withRouteSpec({
     })
   }
 
+  if (
+    foundPackage.is_private &&
+    auth?.github_username !== foundPackage.owner_github_username
+  ) {
+    return ctx.error(404, {
+      error_code: "package_not_found",
+      message: `Package not found (searched using ${JSON.stringify(
+        req.commonParams,
+      )})`,
+    })
+  }
+
   return ctx.json({
     ok: true,
     package: {

package/package.json

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

package/src/components/CircuitJsonImportDialog.tsx

@@ -5,6 +5,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogFooter,
+  DialogDescription,
 } from "@/components/ui/dialog"
 import { Button } from "@/components/ui/button"
 import { Textarea } from "@/components/ui/textarea"
@@ -13,6 +14,10 @@ import { useToast } from "@/hooks/use-toast"
 import { useLocation } from "wouter"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { convertCircuitJsonToTscircuit } from "circuit-json-to-tscircuit"
+import { useCreatePackageMutation } from "@/hooks/use-create-package-mutation"
+import { generateRandomPackageName } from "./package-port/CodeAndPreview"
+import { useCreatePackageReleaseMutation } from "@/hooks/use-create-package-release-mutation"
+import { useCreatePackageFilesMutation } from "@/hooks/use-create-package-files-mutation"
 
 interface CircuitJsonImportDialogProps {
   open: boolean
@@ -36,11 +41,29 @@ export function CircuitJsonImportDialog({
   const [file, setFile] = useState<File | null>(null)
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
-  const axios = useAxios()
+  const loggedInUser = useGlobalStore((s) => s.session)
   const { toast } = useToast()
+  const axios = useAxios()
   const [, navigate] = useLocation()
   const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
-  const session = useGlobalStore((s) => s.session)
+  const createPackageMutation = useCreatePackageMutation()
+  const { mutate: createRelease } = useCreatePackageReleaseMutation({
+    onSuccess: () => {
+      toast({
+        title: "Package released",
+        description: "Your package has been released successfully.",
+      })
+    },
+  })
+
+  const createPackageFilesMutation = useCreatePackageFilesMutation({
+    onSuccess: () => {
+      toast({
+        title: "Package files created",
+        description: "Your package files have been created successfully.",
+      })
+    },
+  })
 
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const selectedFile = e.target.files?.[0]
@@ -54,80 +77,117 @@ export function CircuitJsonImportDialog({
   const handleImport = async () => {
     let importedCircuitJson
 
-    if (file) {
+    const parseJson = async (jsonString: string) => {
       try {
-        const fileText = await file.text()
-        importedCircuitJson = JSON.parse(fileText)
-      } catch (err) {
-        setError("Error reading JSON file. Please ensure it is valid.")
-        return
+        return JSON.parse(jsonString)
+      } catch {
+        throw new Error("Invalid JSON format.")
       }
-    } else if (isValidJSON(circuitJson)) {
-      setIsLoading(true)
-      setError(null)
-      importedCircuitJson = JSON.parse(circuitJson)
-    } else {
-      toast({
-        title: "Invalid Input",
-        description: "Please provide a valid JSON content or file.",
-        variant: "destructive",
-      })
-      return
     }
-    let tscircuit
-    try {
-      tscircuit = convertCircuitJsonToTscircuit(importedCircuitJson as any, {
-        componentName: "circuit",
-      })
-      console.info(tscircuit)
-    } catch {
+
+    const handleError = (message: string) => {
       toast({
         title: "Import Failed",
-        description: "Invalid Circuit JSON was provided.",
+        description: message,
         variant: "destructive",
       })
       setIsLoading(false)
-      return
+    }
+
+    const handleSuccess = (message: string) => {
+      toast({
+        title: "Success",
+        description: message,
+      })
     }
 
     try {
-      const newSnippetData = {
-        snippet_type: importedCircuitJson.type ?? "board",
-        circuit_json: importedCircuitJson,
-        code: tscircuit,
-      }
-      const response = await axios
-        .post("/snippets/create", newSnippetData)
-        .catch((e) => e)
-      const { snippet, message } = response.data
-      if (message) {
-        setError(message)
-        setIsLoading(false)
+      if (file) {
+        const fileText = await file.text()
+        importedCircuitJson = await parseJson(fileText)
+      } else if (isValidJSON(circuitJson)) {
+        setIsLoading(true)
+        setError(null)
+        importedCircuitJson = await parseJson(circuitJson)
+      } else {
+        handleError("Please provide a valid JSON content or file.")
         return
       }
-      toast({
-        title: "Import Successful",
-        description: "Circuit Json has been imported successfully.",
-      })
-      onOpenChange(false)
-      navigate(`/editor?snippet_id=${snippet.snippet_id}`)
+
+      const tscircuitComponentContent = convertCircuitJsonToTscircuit(
+        importedCircuitJson as any,
+        {
+          componentName: "circuit",
+        },
+      )
+      console.info(tscircuitComponentContent)
+
+      await createPackageMutation.mutateAsync(
+        {
+          name: `${loggedInUser?.github_username}/${generateRandomPackageName()}`,
+          description: "Imported from Circuit JSON",
+        },
+        {
+          onSuccess: (newPackage) => {
+            handleSuccess("Package has been created successfully.")
+            createRelease(
+              {
+                package_name_with_version: `${newPackage.name}@latest`,
+              },
+              {
+                onSuccess: (release) => {
+                  createPackageFilesMutation
+                    .mutateAsync({
+                      file_path: "index.tsx",
+                      content_text: tscircuitComponentContent,
+                      package_release_id: release.package_release_id,
+                    })
+                    .then(() => {
+                      navigate(`/editor?package_id=${newPackage.package_id}`)
+                    })
+                },
+                onError: (error) => {
+                  setError(error)
+                  handleError("Failed to create package release.")
+                },
+              },
+            )
+          },
+          onError: (error) => {
+            setError(error)
+            handleError("Failed to create package.")
+          },
+          onSettled: () => {
+            setIsLoading(false)
+            onOpenChange(false)
+          },
+        },
+      )
     } catch (error) {
       console.error("Error importing Circuit Json:", error)
-      toast({
-        title: "Import Failed",
-        description: "Failed to import the Circuit Json. Please try again.",
-        variant: "destructive",
-      })
+      handleError(
+        "The Circuit JSON appears to be invalid or malformed. Please check the format and try again.",
+      )
     } finally {
       setIsLoading(false)
     }
   }
 
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.ctrlKey && event.key === "Enter") {
+      handleImport()
+    }
+  }
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Import Circuit JSON</DialogTitle>
+          <DialogDescription>
+            Use this dialog to import a Circuit JSON file or paste the JSON
+            content directly.
+          </DialogDescription>
         </DialogHeader>
         <div className="pb-4">
           <Textarea
@@ -135,6 +195,7 @@ export function CircuitJsonImportDialog({
             placeholder="Paste the Circuit JSON."
             value={circuitJson}
             onChange={(e) => setcircuitJson(e.target.value)}
+            onKeyDown={handleKeyDown}
             disabled={!!file}
           />
           <div className="mt-4 flex flex-col gap-2">
@@ -150,7 +211,7 @@ export function CircuitJsonImportDialog({
                 type="file"
                 accept="application/json"
                 onChange={handleFileChange}
-                className="hidden" // Hide the default file input
+                className="hidden"
               />
               <label
                 htmlFor="file-input"

package/src/components/DownloadButtonAndMenu.tsx

@@ -34,7 +34,7 @@ export function DownloadButtonAndMenu({
 
   if (!circuitJson) {
     return (
-      <div>
+      <div className={className}>
         <Button
           disabled
           variant="ghost"

package/src/components/HeaderLogin.tsx

@@ -67,7 +67,7 @@ export const HeaderLogin = () => {
           </a>
         </DropdownMenuItem>
         <DropdownMenuItem asChild onClick={() => setSession(null)}>
-          <a href="/sign-out" className="cursor-pointer">
+          <a href="/" className="cursor-pointer">
             Sign out
           </a>
         </DropdownMenuItem>

package/src/components/ViewPackagePage/components/important-files-view.tsx

@@ -168,7 +168,7 @@ export default function ImportantFilesView({
   return (
     <div className="mt-4 border border-gray-200 dark:border-[#30363d] rounded-md overflow-hidden">
       <div className="flex items-center pl-2 pr-4 py-2 bg-gray-100 dark:bg-[#161b22] border-b border-gray-200 dark:border-[#30363d]">
-        <div className="flex items-center space-x-2">
+        <div className="flex items-center space-x-2 overflow-x-auto no-scrollbar">
           {/* AI Description Tab */}
           {hasAiContent && (
             <button

package/src/components/ViewPackagePage/components/repo-page-content.tsx

@@ -154,6 +154,7 @@ export default function RepoPageContent({
       <Header />
       <PackageHeader
         packageInfo={packageInfo}
+        isPrivate={packageInfo?.is_private ?? false}
         isCurrentUserAuthor={
           packageInfo?.creator_account_id === session?.github_username
         }

package/src/components/package-port/CodeAndPreview.tsx

@@ -64,7 +64,7 @@ export default () => (
 )
 `.trim()
 
-const generateRandomPackageName = () =>
+export const generateRandomPackageName = () =>
   `untitled-package-${Math.floor(Math.random() * 90) + 10}`
 
 export function CodeAndPreview({ pkg }: Props) {

package/src/components/package-port/CodeEditorHeader.tsx

@@ -136,16 +136,24 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
     <>
       <div className="flex items-center gap-2 px-2 border-b border-gray-200">
         <button
-          className={`text-gray-400 scale-90 transition-opacity duration-200 ${
-            sidebarOpen ? "opacity-0 pointer-events-none" : "opacity-100"
+          className={`text-gray-400 scale-90 p-0 transition-[width,opacity] duration-300 ease-in-out overflow-hidden ${
+            sidebarOpen
+              ? "w-0 pointer-events-none opacity-0"
+              : "w-6 opacity-100"
           }`}
           onClick={() => setSidebarOpen(true)}
         >
-          <PanelRightClose />
+          <div className="w-6 h-6 flex items-center justify-center">
+            <PanelRightClose />
+          </div>
         </button>
         <div>
           <Select value={currentFile} onValueChange={handleFileChange}>
-            <SelectTrigger className="h-7 px-3 bg-white select-none">
+            <SelectTrigger
+              className={`h-7 px-3 bg-white select-none transition-[margin] duration-300 ease-in-out ${
+                sidebarOpen ? "-ml-2" : "-ml-1"
+              }`}
+            >
               <SelectValue placeholder="Select file" />
             </SelectTrigger>
             <SelectContent>

package/src/components/package-port/EditorNav.tsx

@@ -324,7 +324,7 @@ export default function EditorNav({
           <DownloadButtonAndMenu
             snippetUnscopedName={pkg?.unscoped_name}
             circuitJson={circuitJson}
-            className="hidden md:flex"
+            className="flex"
           />
           <Button
             variant="ghost"
@@ -464,17 +464,42 @@ export default function EditorNav({
               </div>
             </DropdownMenuTrigger>
             <DropdownMenuContent>
-              <DropdownMenuItem className="text-xs">
-                <Download className="mr-1 h-3 w-3" />
-                Download
-              </DropdownMenuItem>
-              <DropdownMenuItem className="text-xs">
+              <DropdownMenuItem
+                className="text-xs"
+                onClick={() => {
+                  if (window) {
+                    navigator.clipboard.writeText(
+                      new URL(window.location.href).origin + "/" + pkg?.name,
+                    )
+                    toast({
+                      title: "URL copied!",
+                      description: "The URL has been copied to your clipboard.",
+                    })
+                  }
+                }}
+              >
                 <Share className="mr-1 h-3 w-3" />
                 Copy URL
               </DropdownMenuItem>
-              <DropdownMenuItem className="text-xs">
+              <DropdownMenuItem
+                className="text-xs"
+                onClick={() => {
+                  if (
+                    pkg &&
+                    session?.github_username === pkg.owner_github_username
+                  ) {
+                    updatePackageVisibilityToPrivate(!isPrivate)
+                  }
+                }}
+              >
                 <Eye className="mr-1 h-3 w-3" />
-                Public
+                {session?.github_username === pkg?.owner_github_username
+                  ? isPrivate
+                    ? "Make Public"
+                    : "Make Private"
+                  : isPrivate
+                    ? "Private Package"
+                    : "Public Package"}
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>

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

@@ -7,8 +7,6 @@ import { useUrlParams } from "./use-url-params"
 export const useCreatePackageMutation = ({
   onSuccess,
 }: { onSuccess?: (pkg: Package) => void } = {}) => {
-  const urlParams = useUrlParams()
-  const templateName = urlParams.template
   const axios = useAxios()
   const session = useGlobalStore((s) => s.session)
 

package/src/pages/package-editor.tsx

@@ -10,13 +10,14 @@ import { useGetFsMapHashForPackage } from "@/hooks/use-get-fsmap-hash-for-packag
 
 export const EditorPage = () => {
   const { packageId } = useCurrentPackageId()
-  const { data: pkg, isLoading, error } = usePackage(packageId)
+  const { data: pkg, error } = usePackage(packageId)
   const fsMapHash = useGetFsMapHashForPackage(
     pkg?.latest_package_release_id ?? "",
   )
   const uuid4RegExp = new RegExp(
     /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-4[0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$/,
   )
+
   return (
     <div className="overflow-x-hidden">
       <Helmet>

package/src/pages/quickstart.tsx

@@ -166,7 +166,7 @@ export const QuickstartPage = () => {
               <CardHeader className="p-4 pb-0">
                 <CardTitle className="text-lg flex items-center justify-between">
                   Circuit Json
-                  <TypeBadge type="module" className="ml-2" />
+                  <TypeBadge type="package" className="ml-2" />
                 </CardTitle>
               </CardHeader>
               <CardContent className="p-4 mt-auto">

package/src/pages/view-package.tsx

@@ -1,18 +1,22 @@
 import RepoPageContent from "@/components/ViewPackagePage/components/repo-page-content"
-import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
 import { usePackageFiles } from "@/hooks/use-package-files"
 import { usePackageRelease } from "@/hooks/use-package-release"
 import { useLocation, useParams } from "wouter"
 import { Helmet } from "react-helmet-async"
 import { useEffect, useState } from "react"
 import NotFoundPage from "./404"
+import { useCurrentPackageId } from "@/hooks/use-current-package-id"
+import { usePackage } from "@/hooks/use-package"
 
 export const ViewPackagePage = () => {
-  const { packageInfo } = useCurrentPackageInfo()
+  const {
+    packageId,
+    error: packageIdError,
+    isLoading: isLoadingPackageId,
+  } = useCurrentPackageId()
+  const { data: packageInfo } = usePackage(packageId)
   const { author, packageName } = useParams()
   const [, setLocation] = useLocation()
-  const [isNotFound, setIsNotFound] = useState(false)
-
   const {
     data: packageRelease,
     error: packageReleaseError,
@@ -25,14 +29,12 @@ export const ViewPackagePage = () => {
   const { data: packageFiles } = usePackageFiles(
     packageRelease?.package_release_id,
   )
-  useEffect(() => {
-    if (isLoadingPackageRelease) return
-    if (packageReleaseError?.status == 404) {
-      setIsNotFound(true)
-    }
-  }, [isLoadingPackageRelease, packageReleaseError])
 
-  if (isNotFound) {
+  if (!isLoadingPackageId && packageIdError) {
+    return <NotFoundPage heading="Package Not Found" />
+  }
+
+  if (!isLoadingPackageRelease && packageReleaseError?.status == 404) {
     return <NotFoundPage heading="Package Not Found" />
   }