@tscircuit/fake-snippets 0.0.101 → 0.0.103

package/src/components/ui/tree-view.tsx

@@ -40,6 +40,8 @@ type TreeProps = React.HTMLAttributes<HTMLDivElement> & {
   expandAll?: boolean
   defaultNodeIcon?: any
   defaultLeafIcon?: any
+  selectedItemId: string
+  setSelectedItemId: (id: string | undefined) => void
   onDocumentDrag?: (sourceItem: TreeDataItem, targetItem: TreeDataItem) => void
 }
 
@@ -54,14 +56,12 @@ const TreeView = React.forwardRef<HTMLDivElement, TreeProps>(
       defaultNodeIcon,
       className,
       onDocumentDrag,
+      selectedItemId,
+      setSelectedItemId,
       ...props
     },
     ref,
   ) => {
-    const [selectedItemId, setSelectedItemId] = React.useState<
-      string | undefined
-    >(initialSelectedItemId)
-
     React.useEffect(() => {
       setSelectedItemId(initialSelectedItemId)
     }, [initialSelectedItemId])
@@ -129,6 +129,7 @@ const TreeView = React.forwardRef<HTMLDivElement, TreeProps>(
         <TreeItem
           data={data}
           ref={ref}
+          setSelectedItemId={setSelectedItemId}
           selectedItemId={selectedItemId}
           handleSelectChange={handleSelectChange}
           expandedItemIds={expandedItemIds}
@@ -159,6 +160,7 @@ type TreeItemProps = TreeProps & {
   defaultLeafIcon?: any
   handleDragStart?: (item: TreeDataItem) => void
   handleDrop?: (item: TreeDataItem) => void
+  setSelectedItemId: (id: string | undefined) => void
   draggedItem: TreeDataItem | null
 }
 
@@ -169,6 +171,7 @@ const TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>(
       data,
       selectedItemId,
       handleSelectChange,
+      setSelectedItemId,
       expandedItemIds,
       defaultNodeIcon,
       defaultLeafIcon,
@@ -182,14 +185,25 @@ const TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>(
     if (!(data instanceof Array)) {
       data = [data]
     }
+
+    const sortedData = [...data].sort((a, b) => {
+      const aIsFolder = !!a.children
+      const bIsFolder = !!b.children
+
+      if (aIsFolder && !bIsFolder) return -1
+      if (!aIsFolder && bIsFolder) return 1
+      return 0
+    })
+
     return (
       <div ref={ref} role="tree" className={className} {...props}>
         <ul>
-          {data.map((item) => (
+          {sortedData.map((item) => (
             <li key={item.id}>
               {item.children ? (
                 <TreeNode
                   item={item}
+                  setSelectedItemId={setSelectedItemId}
                   selectedItemId={selectedItemId}
                   expandedItemIds={expandedItemIds}
                   handleSelectChange={handleSelectChange}
@@ -227,13 +241,15 @@ const TreeNode = ({
   defaultNodeIcon,
   defaultLeafIcon,
   handleDragStart,
+  setSelectedItemId,
   handleDrop,
   draggedItem,
 }: {
   item: TreeDataItem
   handleSelectChange: (item: TreeDataItem | undefined) => void
   expandedItemIds: string[]
-  selectedItemId?: string
+  selectedItemId: string
+  setSelectedItemId: (id: string | undefined) => void
   defaultNodeIcon?: any
   defaultLeafIcon?: any
   handleDragStart?: (item: TreeDataItem) => void
@@ -309,6 +325,7 @@ const TreeNode = ({
           <TreeItem
             data={item.children ? item.children : item}
             selectedItemId={selectedItemId}
+            setSelectedItemId={setSelectedItemId}
             handleSelectChange={handleSelectChange}
             expandedItemIds={expandedItemIds}
             defaultLeafIcon={defaultLeafIcon}

package/src/hooks/use-axios.ts

@@ -1,10 +1,10 @@
 import axios from "redaxios"
 import { useMemo } from "react"
 import { useGlobalStore } from "./use-global-store"
-import { usePackagesBaseApiUrl } from "./use-packages-base-api-url"
+import { useApiBaseUrl } from "./use-packages-base-api-url"
 
 export const useAxios = () => {
-  const snippetsBaseApiUrl = usePackagesBaseApiUrl()
+  const snippetsBaseApiUrl = useApiBaseUrl()
   const session = useGlobalStore((s) => s.session)
   return useMemo(() => {
     const instance = axios.create({

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

@@ -0,0 +1,160 @@
+import { useState } from "react"
+import { useCreatePackageReleaseMutation } from "./use-create-package-release-mutation"
+import { useGlobalStore } from "./use-global-store"
+import { useUpdatePackageFilesMutation } from "./useUpdatePackageFilesMutation"
+import type { PackageFile } from "@/types/package"
+import type { Package } from "fake-snippets-api/lib/db/schema"
+import { useToast } from "./use-toast"
+
+interface UseCreateReleaseDialogProps {
+  packageId?: string
+  packageName?: string
+  currentVersion?: string
+  onSuccess?: (release: any) => void
+  files?: PackageFile[]
+  currentPackage?: Package
+  packageFilesMeta?: {
+    created_at: string
+    file_path: string
+    package_file_id: string
+    package_release_id: string
+  }[]
+}
+
+export const useCreateReleaseDialog = ({
+  packageId,
+  packageName,
+  currentVersion,
+  onSuccess,
+  files = [],
+  currentPackage,
+  packageFilesMeta = [],
+}: UseCreateReleaseDialogProps) => {
+  const { toast } = useToast()
+  const [isOpen, setIsOpen] = useState(false)
+  const [version, setVersion] = useState("")
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const suggestedNextVersion = currentVersion
+    ? (() => {
+        const parts = currentVersion.split(".")
+        if (parts.length === 3) {
+          const [major, minor, patch] = parts.map(Number)
+          if (!isNaN(major) && !isNaN(minor) && !isNaN(patch)) {
+            return `${major}.${minor}.${patch + 1}`
+          }
+        }
+        return undefined
+      })()
+    : undefined
+
+  const { mutateAsync: createRelease } = useCreatePackageReleaseMutation({
+    onSuccess: () => {
+      toast({
+        title: "Package release created",
+        description: "Your package release has been created successfully.",
+      })
+    },
+  })
+  const session = useGlobalStore((s) => s.session)
+
+  const updatePackageFilesMutation = useUpdatePackageFilesMutation({
+    currentPackage,
+    localFiles: files,
+    initialFiles: [],
+    packageFilesMeta,
+  })
+
+  const open = () => {
+    setIsOpen(true)
+    setError(null)
+    // Auto-fill with suggested next version
+    const nextVersion = suggestedNextVersion || "0.0.1"
+    setVersion(nextVersion)
+  }
+
+  const close = () => {
+    setIsOpen(false)
+    setError(null)
+    setVersion("")
+  }
+
+  const handleCreateRelease = async () => {
+    if (!version.trim()) {
+      setError("Version is required")
+      return
+    }
+
+    if (!packageId && !packageName) {
+      setError("Package information is missing")
+      return
+    }
+
+    if (!session) {
+      setError("You must be logged in to create a release")
+      return
+    }
+
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      const releaseData: any = {
+        version: version.trim(),
+        is_latest: true,
+      }
+
+      if (packageId) {
+        releaseData.package_id = packageId
+      } else if (packageName) {
+        releaseData.package_name = packageName
+      }
+
+      const result = await createRelease(releaseData)
+
+      if (files.length > 0 && currentPackage) {
+        try {
+          await updatePackageFilesMutation.mutateAsync({
+            package_name_with_version: `${currentPackage.name}@${version.trim()}`,
+            ...currentPackage,
+          })
+        } catch (fileError: any) {
+          console.error("Error uploading files:", fileError)
+          toast({
+            title: "Error",
+            description: "Failed to upload some files to the release",
+          })
+        }
+      }
+
+      onSuccess?.(result)
+      close()
+    } catch (err: any) {
+      const errorMessage =
+        err?.response?.data?.error?.message ||
+        err?.message ||
+        "Failed to create release"
+      setError(errorMessage)
+      toast({
+        title: "Error",
+        description: errorMessage,
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return {
+    isOpen,
+    openDialog: open,
+    closeDialog: close,
+    version,
+    setVersion,
+    currentVersion,
+    suggestedNextVersion,
+    isLoading: isLoading || updatePackageFilesMutation.isLoading,
+    error,
+    handleCreateRelease,
+  }
+}

package/src/hooks/use-package-details-form.ts

@@ -16,6 +16,7 @@ interface PackageDetailsForm {
   license: string | null
   visibility: string
   defaultView: string
+  githubRepoFullName: string | null
   unscopedPackageName: string
 }
 
@@ -26,6 +27,7 @@ interface UsePackageDetailsFormProps {
   initialVisibility: string
   initialDefaultView: string
   initialUnscopedPackageName: string
+  initialGithubRepoFullName: string | null
   isDialogOpen: boolean
 }
 
@@ -36,6 +38,7 @@ export const usePackageDetailsForm = ({
   initialVisibility,
   initialDefaultView,
   initialUnscopedPackageName,
+  initialGithubRepoFullName,
   isDialogOpen,
 }: UsePackageDetailsFormProps) => {
   const [formData, setFormData] = useState<PackageDetailsForm>({
@@ -44,6 +47,7 @@ export const usePackageDetailsForm = ({
     license: initialLicense || null,
     visibility: initialVisibility,
     defaultView: initialDefaultView,
+    githubRepoFullName: initialGithubRepoFullName,
     unscopedPackageName: initialUnscopedPackageName,
   })
   const [websiteError, setWebsiteError] = useState<string | null>(null)
@@ -55,6 +59,7 @@ export const usePackageDetailsForm = ({
         website: initialWebsite,
         license: initialLicense || null,
         visibility: initialVisibility,
+        githubRepoFullName: initialGithubRepoFullName,
         defaultView: initialDefaultView,
         unscopedPackageName: initialUnscopedPackageName,
       })
@@ -100,6 +105,7 @@ export const usePackageDetailsForm = ({
       formData.license !== initialLicense ||
       formData.visibility !== initialVisibility ||
       formData.defaultView !== initialDefaultView ||
+      formData.githubRepoFullName !== initialGithubRepoFullName ||
       formData.unscopedPackageName !== initialUnscopedPackageName,
     [
       formData,
@@ -108,6 +114,7 @@ export const usePackageDetailsForm = ({
       initialLicense,
       initialVisibility,
       initialDefaultView,
+      initialGithubRepoFullName,
       initialUnscopedPackageName,
     ],
   )

package/src/hooks/use-packages-base-api-url.ts

@@ -1,3 +1,3 @@
-export const usePackagesBaseApiUrl = () => {
+export const useApiBaseUrl = () => {
   return import.meta.env.VITE_SNIPPETS_API_URL ?? "/api"
 }

package/src/hooks/use-sign-in.ts

@@ -1,9 +1,9 @@
 import { useGlobalStore } from "./use-global-store"
 import { useIsUsingFakeApi } from "./use-is-using-fake-api"
-import { usePackagesBaseApiUrl } from "./use-packages-base-api-url"
+import { useApiBaseUrl } from "./use-packages-base-api-url"
 
 export const useSignIn = () => {
-  const snippetsBaseApiUrl = usePackagesBaseApiUrl()
+  const snippetsBaseApiUrl = useApiBaseUrl()
   const isUsingFakeApi = useIsUsingFakeApi()
   const setSession = useGlobalStore((s) => s.setSession)
   return () => {

package/src/hooks/useFileManagement.ts

@@ -196,34 +196,53 @@ export function useFileManagement({
     openFile = true,
   }: ICreateFileProps): ICreateFileResult => {
     newFileName = newFileName.trim()
+
     if (!newFileName) {
       onError(new Error("File name cannot be empty"))
       return {
         newFileCreated: false,
       }
     }
+
     if (!isValidFileName(newFileName)) {
-      onError(new Error("Invalid file name"))
+      onError(
+        new Error(
+          "Invalid file name. Avoid special characters and relative paths (. or ..)",
+        ),
+      )
       return {
         newFileCreated: false,
       }
     }
 
+    // Check if file already exists
     const fileExists = localFiles?.some((file) => file.path === newFileName)
     if (fileExists) {
-      onError(new Error("File already exists"))
+      onError(new Error(`File '${newFileName}' already exists`))
       return {
         newFileCreated: false,
       }
     }
+
+    // Ensure file name is not empty after path construction
+    const fileName = newFileName.split("/").pop() || ""
+    if (!fileName.trim()) {
+      onError(new Error("File name cannot be empty"))
+      return {
+        newFileCreated: false,
+      }
+    }
+
     const updatedFiles = [
       ...(localFiles || []),
       { path: newFileName, content: content || "" },
     ]
     setLocalFiles(updatedFiles)
+
     if (openFile) {
       setCurrentFile(newFileName)
     }
+
     return {
       newFileCreated: true,
     }
@@ -428,5 +447,6 @@ export function useFileManagement({
     isLoading,
     isSaving,
     savePackage,
+    packageFilesMeta,
   }
 }

package/src/index.css

@@ -78,3 +78,7 @@
   max-width: none !important;
   width: 100% !important;
 }
+
+body {
+  overflow-x: hidden;
+}

package/src/lib/utils/formatTimeAgo.ts

@@ -0,0 +1,10 @@
+export const formatTimeAgo = (dateString: string) => {
+  const date = new Date(dateString)
+  const now = new Date()
+  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)
+
+  if (diffInSeconds < 60) return "just now"
+  if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`
+  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`
+  return `${Math.floor(diffInSeconds / 86400)}d ago`
+}

package/src/lib/utils/isValidFileName.ts

@@ -1,5 +1,17 @@
 export const isValidFileName = (name: string) => {
-  // Basic checks for file naming conventions
-  const invalidChars = /[<>:"/\\|?*]/
-  return name.length > 0 && !invalidChars.test(name)
+  const invalidChars = /[<>:"\\|?*]/
+
+  if (name.length === 0) return false
+  if (invalidChars.test(name)) return false
+
+  const pathParts = name.split("/")
+
+  for (const part of pathParts) {
+    if (part === "") continue
+    if (part === "." || part === "..") return false
+    if (part.startsWith(" ") || part.endsWith(" ")) return false
+    if (part.includes("\\")) return false
+  }
+
+  return true
 }

package/src/pages/dashboard.tsx

@@ -12,7 +12,7 @@ import { PrefetchPageLink } from "@/components/PrefetchPageLink"
 import { PackagesList } from "@/components/PackagesList"
 import { Helmet } from "react-helmet-async"
 import { useSignIn } from "@/hooks/use-sign-in"
-import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
+import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 import { useConfirmDeletePackageDialog } from "@/components/dialogs/confirm-delete-package-dialog"
 import { PackageCardSkeleton } from "@/components/PackageCardSkeleton"
 import { PackageCard } from "@/components/PackageCard"
@@ -85,7 +85,7 @@ export const DashboardPage = () => {
     },
   )
 
-  const baseUrl = usePackagesBaseApiUrl()
+  const baseUrl = useApiBaseUrl()
 
   const handleDeleteClick = (e: React.MouseEvent, pkg: Package) => {
     e.preventDefault() // Prevent navigation

package/src/pages/dev-login.tsx

@@ -1,10 +1,10 @@
 import { useGlobalStore } from "@/hooks/use-global-store"
-import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
+import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 import { useState } from "react"
 import { useLocation } from "wouter"
 
 export const DevLoginPage = () => {
-  const snippetsBaseApiUrl = usePackagesBaseApiUrl()
+  const snippetsBaseApiUrl = useApiBaseUrl()
   const [username, setUsername] = useState("")
   const setSession = useGlobalStore((s) => s.setSession)
   const [, setLocation] = useLocation()

package/src/pages/latest.tsx

@@ -6,7 +6,7 @@ import Header from "@/components/Header"
 import Footer from "@/components/Footer"
 import { Search, Keyboard, Cpu, Layers, LucideBellElectric } from "lucide-react"
 import { Input } from "@/components/ui/input"
-import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
+import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 import {
   Select,
   SelectContent,
@@ -18,7 +18,7 @@ import PackageSearchResults from "@/components/PackageSearchResults"
 
 const LatestPage: React.FC = () => {
   const axios = useAxios()
-  const apiBaseUrl = usePackagesBaseApiUrl()
+  const apiBaseUrl = useApiBaseUrl()
   const [searchQuery, setSearchQuery] = useState("")
   const [category, setCategory] = useState("all")