@tscircuit/fake-snippets 0.0.68 → 0.0.70

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

@@ -35,6 +35,7 @@ interface EditPackageDetailsDialogProps {
   currentDescription: string
   currentWebsite: string
   currentLicense?: string | null
+  currentDefaultView?: string
   isPrivate?: boolean
   packageName: string
   packageReleaseId: string | null
@@ -43,6 +44,7 @@ interface EditPackageDetailsDialogProps {
     newDescription: string,
     newWebsite: string,
     newLicense: string | null,
+    newDefaultView: string,
   ) => void
 }
 
@@ -53,6 +55,7 @@ export const EditPackageDetailsDialog = ({
   currentDescription,
   currentWebsite,
   currentLicense,
+  currentDefaultView = "files",
   isPrivate = false,
   packageName,
   packageReleaseId,
@@ -68,12 +71,14 @@ export const EditPackageDetailsDialog = ({
     setFormData,
     websiteError,
     hasLicenseChanged,
+    hasDefaultViewChanged,
     hasChanges,
     isFormValid,
   } = usePackageDetailsForm({
     initialDescription: currentDescription,
     initialWebsite: currentWebsite,
     initialLicense: currentLicense || null,
+    initialDefaultView: currentDefaultView,
     isDialogOpen: open,
     initialVisibility: isPrivate ? "private" : "public",
   })
@@ -108,6 +113,7 @@ export const EditPackageDetailsDialog = ({
         description: formData.description,
         website: formData.website,
         is_private: formData.visibility == "private",
+        default_view: formData.defaultView,
       })
       const privacyUpdateResponse = await axios.post("/snippets/update", {
         snippet_id: packageId,
@@ -149,6 +155,7 @@ export const EditPackageDetailsDialog = ({
         website: formData.website,
         license: formData.license,
         visibility: formData.visibility,
+        defaultView: formData.defaultView,
       }
     },
     onMutate: async () => {
@@ -160,11 +167,12 @@ export const EditPackageDetailsDialog = ({
         website: formData.website,
         license: formData.license,
         is_private: formData.visibility == "private",
+        default_view: formData.defaultView,
       }))
       return { previous }
     },
     onSuccess: (data) => {
-      onUpdate?.(data.description, data.website, data.license)
+      onUpdate?.(data.description, data.website, data.license, data.defaultView)
       onOpenChange(false)
       qc.invalidateQueries([
         "packageFile",
@@ -218,7 +226,7 @@ export const EditPackageDetailsDialog = ({
         </DialogContent>
       </Dialog>
       <Dialog open={open !== showConfirmDelete} onOpenChange={onOpenChange}>
-        <DialogContent className="sm:max-w-[500px] lg:h-[70vh] sm:h-[90vh] overflow-y-auto w-[95vw] h-[80vh] p-6 gap-6 rounded-2xl shadow-lg">
+        <DialogContent className="sm:max-w-[500px] lg:h-[85vh] sm:h-[90vh] overflow-y-auto no-scrollbar w-[95vw] h-[80vh] p-6 gap-6 rounded-2xl shadow-lg">
           <div className="flex flex-col gap-10">
             <DialogHeader>
               <DialogTitle>Edit Package Details</DialogTitle>
@@ -310,6 +318,29 @@ export const EditPackageDetailsDialog = ({
                     </SelectContent>
                   </Select>
                 </div>
+                <div className="space-y-1">
+                  <Label htmlFor="defaultView">Default View</Label>
+                  <Select
+                    value={formData.defaultView}
+                    onValueChange={(value) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        defaultView: value,
+                      }))
+                    }
+                    disabled={updatePackageDetailsMutation.isLoading}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Select default view" />
+                    </SelectTrigger>
+                    <SelectContent className="!z-[999]">
+                      <SelectItem value="files">Files</SelectItem>
+                      <SelectItem value="3d">3D</SelectItem>
+                      <SelectItem value="pcb">PCB</SelectItem>
+                      <SelectItem value="schematic">Schematic</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
               </div>
 
               <details

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/hooks/use-package-details-form.ts

@@ -15,6 +15,7 @@ interface PackageDetailsForm {
   website: string
   license: string | null
   visibility: string
+  defaultView: string
 }
 
 interface UsePackageDetailsFormProps {
@@ -22,6 +23,7 @@ interface UsePackageDetailsFormProps {
   initialWebsite: string
   initialLicense: string | null
   initialVisibility: string
+  initialDefaultView: string
   isDialogOpen: boolean
 }
 
@@ -30,6 +32,7 @@ export const usePackageDetailsForm = ({
   initialWebsite,
   initialLicense,
   initialVisibility,
+  initialDefaultView,
   isDialogOpen,
 }: UsePackageDetailsFormProps) => {
   const [formData, setFormData] = useState<PackageDetailsForm>({
@@ -37,6 +40,7 @@ export const usePackageDetailsForm = ({
     website: initialWebsite,
     license: initialLicense || null,
     visibility: initialVisibility,
+    defaultView: initialDefaultView,
   })
   const [websiteError, setWebsiteError] = useState<string | null>(null)
 
@@ -47,6 +51,7 @@ export const usePackageDetailsForm = ({
         website: initialWebsite,
         license: initialLicense || null,
         visibility: initialVisibility,
+        defaultView: initialDefaultView,
       })
       setWebsiteError(null)
     }
@@ -56,6 +61,7 @@ export const usePackageDetailsForm = ({
     initialWebsite,
     initialLicense,
     initialVisibility,
+    initialDefaultView,
   ])
 
   useEffect(() => {
@@ -76,18 +82,25 @@ export const usePackageDetailsForm = ({
     [formData.visibility, initialVisibility],
   )
 
+  const hasDefaultViewChanged = useMemo(
+    () => formData.defaultView !== initialDefaultView,
+    [formData.defaultView, initialDefaultView],
+  )
+
   const hasChanges = useMemo(
     () =>
       formData.description !== initialDescription ||
       formData.website !== initialWebsite ||
       formData.license !== initialLicense ||
-      formData.visibility !== initialVisibility,
+      formData.visibility !== initialVisibility ||
+      formData.defaultView !== initialDefaultView,
     [
       formData,
       initialDescription,
       initialWebsite,
       initialLicense,
       initialVisibility,
+      initialDefaultView,
     ],
   )
 
@@ -99,6 +112,7 @@ export const usePackageDetailsForm = ({
     websiteError,
     hasLicenseChanged,
     hasVisibilityChanged,
+    hasDefaultViewChanged,
     hasChanges,
     isFormValid,
   }

package/src/index.css

@@ -7,6 +7,19 @@
   }
 }
 
+/* add the code bellow */
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
+
 .shiki {
   font-family: "Fira Code", monospace;
   font-size: 14px;

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" />
   }