@tscircuit/fake-snippets 0.0.43 → 0.0.44

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

@@ -0,0 +1,490 @@
+import React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronRight } from "lucide-react"
+import { cva } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const treeVariants = cva(
+  "group hover:before:opacity-100 before:absolute before:rounded-lg before:left-0 before:w-full before:opacity-0 before:bg-slate-100/70 before:h-[2rem] before:-z-10' dark:before:bg-slate-800/70",
+)
+
+const selectedTreeVariants = cva(
+  "before:opacity-100 before:bg-slate-100/70 text-accent-foreground' dark:before:bg-slate-800/70",
+)
+
+const dragOverVariants = cva(
+  "before:opacity-100 before:bg-slate-900/20 text-primary-foreground' dark:before:bg-slate-50/20",
+)
+
+interface TreeDataItem {
+  id: string
+  name: string
+  icon?: any
+  selectedIcon?: any
+  openIcon?: any
+  children?: TreeDataItem[]
+  actions?: React.ReactNode
+  onClick?: () => void
+  draggable?: boolean
+  droppable?: boolean
+}
+
+type TreeProps = React.HTMLAttributes<HTMLDivElement> & {
+  data: TreeDataItem[] | TreeDataItem
+  initialSelectedItemId?: string
+  onSelectChange?: (item: TreeDataItem | undefined) => void
+  expandAll?: boolean
+  defaultNodeIcon?: any
+  defaultLeafIcon?: any
+  onDocumentDrag?: (sourceItem: TreeDataItem, targetItem: TreeDataItem) => void
+}
+
+const TreeView = React.forwardRef<HTMLDivElement, TreeProps>(
+  (
+    {
+      data,
+      initialSelectedItemId,
+      onSelectChange,
+      expandAll,
+      defaultLeafIcon,
+      defaultNodeIcon,
+      className,
+      onDocumentDrag,
+      ...props
+    },
+    ref,
+  ) => {
+    const [selectedItemId, setSelectedItemId] = React.useState<
+      string | undefined
+    >(initialSelectedItemId)
+
+    const [draggedItem, setDraggedItem] = React.useState<TreeDataItem | null>(
+      null,
+    )
+
+    const handleSelectChange = React.useCallback(
+      (item: TreeDataItem | undefined) => {
+        setSelectedItemId(item?.id)
+        if (onSelectChange) {
+          onSelectChange(item)
+        }
+      },
+      [onSelectChange],
+    )
+
+    const handleDragStart = React.useCallback((item: TreeDataItem) => {
+      setDraggedItem(item)
+    }, [])
+
+    const handleDrop = React.useCallback(
+      (targetItem: TreeDataItem) => {
+        if (draggedItem && onDocumentDrag && draggedItem.id !== targetItem.id) {
+          onDocumentDrag(draggedItem, targetItem)
+        }
+        setDraggedItem(null)
+      },
+      [draggedItem, onDocumentDrag],
+    )
+
+    const expandedItemIds = React.useMemo(() => {
+      if (!initialSelectedItemId) {
+        return [] as string[]
+      }
+
+      const ids: string[] = []
+
+      function walkTreeItems(
+        items: TreeDataItem[] | TreeDataItem,
+        targetId: string,
+      ) {
+        if (items instanceof Array) {
+          for (let i = 0; i < items.length; i++) {
+            ids.push(items[i]!.id)
+            if (walkTreeItems(items[i]!, targetId) && !expandAll) {
+              return true
+            }
+            if (!expandAll) ids.pop()
+          }
+        } else if (!expandAll && items.id === targetId) {
+          return true
+        } else if (items.children) {
+          return walkTreeItems(items.children, targetId)
+        }
+      }
+
+      walkTreeItems(data, initialSelectedItemId)
+      return ids
+    }, [data, expandAll, initialSelectedItemId])
+
+    return (
+      <div className={cn("overflow-hidden relative p-2", className)}>
+        <TreeItem
+          data={data}
+          ref={ref}
+          selectedItemId={selectedItemId}
+          handleSelectChange={handleSelectChange}
+          expandedItemIds={expandedItemIds}
+          defaultLeafIcon={defaultLeafIcon}
+          defaultNodeIcon={defaultNodeIcon}
+          handleDragStart={handleDragStart}
+          handleDrop={handleDrop}
+          draggedItem={draggedItem}
+          {...props}
+        />
+        <div
+          className="w-full h-[48px]"
+          onDrop={(e) => {
+            handleDrop({ id: "", name: "parent_div" })
+          }}
+        ></div>
+      </div>
+    )
+  },
+)
+TreeView.displayName = "TreeView"
+
+type TreeItemProps = TreeProps & {
+  selectedItemId?: string
+  handleSelectChange: (item: TreeDataItem | undefined) => void
+  expandedItemIds: string[]
+  defaultNodeIcon?: any
+  defaultLeafIcon?: any
+  handleDragStart?: (item: TreeDataItem) => void
+  handleDrop?: (item: TreeDataItem) => void
+  draggedItem: TreeDataItem | null
+}
+
+const TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>(
+  (
+    {
+      className,
+      data,
+      selectedItemId,
+      handleSelectChange,
+      expandedItemIds,
+      defaultNodeIcon,
+      defaultLeafIcon,
+      handleDragStart,
+      handleDrop,
+      draggedItem,
+      ...props
+    },
+    ref,
+  ) => {
+    if (!(data instanceof Array)) {
+      data = [data]
+    }
+    return (
+      <div ref={ref} role="tree" className={className} {...props}>
+        <ul>
+          {data.map((item) => (
+            <li key={item.id}>
+              {item.children ? (
+                <TreeNode
+                  item={item}
+                  selectedItemId={selectedItemId}
+                  expandedItemIds={expandedItemIds}
+                  handleSelectChange={handleSelectChange}
+                  defaultNodeIcon={defaultNodeIcon}
+                  defaultLeafIcon={defaultLeafIcon}
+                  handleDragStart={handleDragStart}
+                  handleDrop={handleDrop}
+                  draggedItem={draggedItem}
+                />
+              ) : (
+                <TreeLeaf
+                  item={item}
+                  selectedItemId={selectedItemId}
+                  handleSelectChange={handleSelectChange}
+                  defaultLeafIcon={defaultLeafIcon}
+                  handleDragStart={handleDragStart}
+                  handleDrop={handleDrop}
+                  draggedItem={draggedItem}
+                />
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    )
+  },
+)
+TreeItem.displayName = "TreeItem"
+
+const TreeNode = ({
+  item,
+  handleSelectChange,
+  expandedItemIds,
+  selectedItemId,
+  defaultNodeIcon,
+  defaultLeafIcon,
+  handleDragStart,
+  handleDrop,
+  draggedItem,
+}: {
+  item: TreeDataItem
+  handleSelectChange: (item: TreeDataItem | undefined) => void
+  expandedItemIds: string[]
+  selectedItemId?: string
+  defaultNodeIcon?: any
+  defaultLeafIcon?: any
+  handleDragStart?: (item: TreeDataItem) => void
+  handleDrop?: (item: TreeDataItem) => void
+  draggedItem: TreeDataItem | null
+}) => {
+  const [value, setValue] = React.useState(
+    expandedItemIds.includes(item.id) ? [item.id] : [],
+  )
+  const [isDragOver, setIsDragOver] = React.useState(false)
+
+  const onDragStart = (e: React.DragEvent) => {
+    if (!item.draggable) {
+      e.preventDefault()
+      return
+    }
+    e.dataTransfer.setData("text/plain", item.id)
+    handleDragStart?.(item)
+  }
+
+  const onDragOver = (e: React.DragEvent) => {
+    if (item.droppable !== false && draggedItem && draggedItem.id !== item.id) {
+      e.preventDefault()
+      setIsDragOver(true)
+    }
+  }
+
+  const onDragLeave = () => {
+    setIsDragOver(false)
+  }
+
+  const onDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragOver(false)
+    handleDrop?.(item)
+  }
+
+  return (
+    <AccordionPrimitive.Root
+      type="multiple"
+      value={value}
+      onValueChange={(s) => setValue(s)}
+    >
+      <AccordionPrimitive.Item value={item.id}>
+        <AccordionTrigger
+          className={cn(
+            treeVariants(),
+            selectedItemId === item.id && selectedTreeVariants(),
+            isDragOver && dragOverVariants(),
+          )}
+          onClick={() => {
+            handleSelectChange(item)
+            item.onClick?.()
+          }}
+          draggable={!!item.draggable}
+          onDragStart={onDragStart}
+          onDragOver={onDragOver}
+          onDragLeave={onDragLeave}
+          onDrop={onDrop}
+        >
+          <TreeIcon
+            item={item}
+            isSelected={selectedItemId === item.id}
+            isOpen={value.includes(item.id)}
+            default={defaultNodeIcon}
+          />
+          <span className="text-sm truncate">{item.name}</span>
+          <TreeActions isSelected={selectedItemId === item.id}>
+            {item.actions}
+          </TreeActions>
+        </AccordionTrigger>
+        <AccordionContent className="ml-4 pl-1 border-l">
+          <TreeItem
+            data={item.children ? item.children : item}
+            selectedItemId={selectedItemId}
+            handleSelectChange={handleSelectChange}
+            expandedItemIds={expandedItemIds}
+            defaultLeafIcon={defaultLeafIcon}
+            defaultNodeIcon={defaultNodeIcon}
+            handleDragStart={handleDragStart}
+            handleDrop={handleDrop}
+            draggedItem={draggedItem}
+          />
+        </AccordionContent>
+      </AccordionPrimitive.Item>
+    </AccordionPrimitive.Root>
+  )
+}
+
+const TreeLeaf = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    item: TreeDataItem
+    selectedItemId?: string
+    handleSelectChange: (item: TreeDataItem | undefined) => void
+    defaultLeafIcon?: any
+    handleDragStart?: (item: TreeDataItem) => void
+    handleDrop?: (item: TreeDataItem) => void
+    draggedItem: TreeDataItem | null
+  }
+>(
+  (
+    {
+      className,
+      item,
+      selectedItemId,
+      handleSelectChange,
+      defaultLeafIcon,
+      handleDragStart,
+      handleDrop,
+      draggedItem,
+      ...props
+    },
+    ref,
+  ) => {
+    const [isDragOver, setIsDragOver] = React.useState(false)
+
+    const onDragStart = (e: React.DragEvent) => {
+      if (!item.draggable) {
+        e.preventDefault()
+        return
+      }
+      e.dataTransfer.setData("text/plain", item.id)
+      handleDragStart?.(item)
+    }
+
+    const onDragOver = (e: React.DragEvent) => {
+      if (
+        item.droppable !== false &&
+        draggedItem &&
+        draggedItem.id !== item.id
+      ) {
+        e.preventDefault()
+        setIsDragOver(true)
+      }
+    }
+
+    const onDragLeave = () => {
+      setIsDragOver(false)
+    }
+
+    const onDrop = (e: React.DragEvent) => {
+      e.preventDefault()
+      setIsDragOver(false)
+      handleDrop?.(item)
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "ml-[2px] flex text-left items-center py-2 cursor-pointer before:right-1",
+          treeVariants(),
+          className,
+          selectedItemId === item.id && selectedTreeVariants(),
+          isDragOver && dragOverVariants(),
+        )}
+        onClick={() => {
+          handleSelectChange(item)
+          item.onClick?.()
+        }}
+        draggable={!!item.draggable}
+        onDragStart={onDragStart}
+        onDragOver={onDragOver}
+        onDragLeave={onDragLeave}
+        onDrop={onDrop}
+        {...props}
+      >
+        <TreeIcon
+          item={item}
+          isSelected={selectedItemId === item.id}
+          default={defaultLeafIcon}
+        />
+        <span className="flex-grow text-sm truncate">{item.name}</span>
+        <TreeActions isSelected={selectedItemId === item.id}>
+          {item.actions}
+        </TreeActions>
+      </div>
+    )
+  },
+)
+TreeLeaf.displayName = "TreeLeaf"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header>
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 w-full items-center py-2 transition-all first:[&[data-state=open]>svg]:rotate-90",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronRight className="h-4 w-4 shrink-0 transition-transform duration-200 text-slate-900/50 mr-1 dark:text-slate-50/50" />
+      {children}
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      className,
+    )}
+    {...props}
+  >
+    <div className="pb-1 pt-0">{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+const TreeIcon = ({
+  item,
+  isOpen,
+  isSelected,
+  default: defaultIcon,
+}: {
+  item: TreeDataItem
+  isOpen?: boolean
+  isSelected?: boolean
+  default?: any
+}) => {
+  let Icon = defaultIcon
+  if (isSelected && item.selectedIcon) {
+    Icon = item.selectedIcon
+  } else if (isOpen && item.openIcon) {
+    Icon = item.openIcon
+  } else if (item.icon) {
+    Icon = item.icon
+  }
+  return Icon ? <Icon className="h-4 w-4 shrink-0 mr-2" /> : <></>
+}
+
+const TreeActions = ({
+  children,
+  isSelected,
+}: {
+  children: React.ReactNode
+  isSelected: boolean
+}) => {
+  return (
+    <div
+      className={cn(
+        isSelected ? "block" : "hidden",
+        "absolute right-3 group-hover:block",
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export { TreeView, type TreeDataItem }

package/src/hooks/use-package.ts

@@ -0,0 +1,23 @@
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import type { Package, Snippet } from "fake-snippets-api/lib/db/schema"
+
+export const usePackage = (packageId: string | null) => {
+  const axios = useAxios()
+  return useQuery<Package, Error & { status: number }>(
+    ["packages", packageId],
+    async () => {
+      if (!packageId) {
+        throw new Error("Package ID is required")
+      }
+      const { data } = await axios.get("/packages/get", {
+        params: { package_id: packageId },
+      })
+      return data.package
+    },
+    {
+      enabled: Boolean(packageId),
+      retry: false,
+    },
+  )
+}

package/src/hooks/useForkPackageMutation.ts

@@ -0,0 +1,49 @@
+import { useMutation } from "react-query"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { useAxios } from "@/hooks/use-axios"
+import { useToast } from "@/hooks/use-toast"
+import { Package } from "fake-snippets-api/lib/db/schema"
+
+export const useForkPackageMutation = ({
+  pkg,
+  currentCode,
+  onSuccess,
+}: {
+  pkg: Package
+  currentCode?: string
+  onSuccess?: (forkedSnippet: Package) => void
+}) => {
+  const axios = useAxios()
+  const session = useGlobalStore((s) => s.session)
+  const { toast } = useToast()
+
+  return useMutation(
+    ["createForkSnippet"],
+    async () => {
+      if (!session) throw new Error("No session")
+      if (!pkg) throw new Error("No package to fork")
+
+      const { data } = await axios.post("/packages/fork", {
+        package_id: pkg?.package_id,
+      })
+      return data.package
+    },
+    {
+      onSuccess: (forkedPkg: Package) => {
+        toast({
+          title: `Forked Package`,
+          description: `You have successfully forked the package. Redirecting...`,
+        })
+        onSuccess?.(forkedPkg)
+      },
+      onError: (error: any) => {
+        console.error("Error forking package:", error)
+        toast({
+          title: "Error",
+          description: "Failed to fork package. Please try again.",
+          variant: "destructive",
+        })
+      },
+    },
+  )
+}

package/src/hooks/usePackageFilesLoader.ts

@@ -0,0 +1,56 @@
+import { useQueries } from "react-query"
+import { useAxios } from "./use-axios"
+import type { Package } from "fake-snippets-api/lib/db/schema"
+import { usePackageFileById, usePackageFiles } from "./use-package-files"
+
+export interface PackageFile {
+  path: string
+  content: string
+}
+
+export function usePackageFilesLoader(pkg?: Package) {
+  const axios = useAxios()
+  const pkgFiles = usePackageFiles(pkg?.latest_package_release_id)
+  const indexFileFromHook = usePackageFileById(
+    pkgFiles.data?.find((x) => x.file_path === "index.tsx")?.package_file_id ??
+      null,
+  )
+
+  const queries = useQueries(
+    pkgFiles.data?.map((file) => ({
+      queryKey: ["packageFile", file.package_file_id],
+      queryFn: async () => {
+        if (
+          file.file_path === "index.tsx" &&
+          indexFileFromHook.data?.content_text
+        ) {
+          return {
+            path: file.file_path,
+            content: indexFileFromHook.data.content_text,
+          }
+        }
+
+        const response = await axios.post(`/package_files/get`, {
+          package_file_id: file.package_file_id,
+        })
+        const content = response.data.package_file?.content_text ?? ""
+        return content ? { path: file.file_path, content } : null
+      },
+      staleTime: 2,
+    })) ?? [],
+  )
+
+  const isLoading = queries.some((query) => query.isLoading)
+  const error = queries.find((query) => query.error)?.error
+
+  const processedResults = queries
+    .map((query) => query.data)
+    .filter((x): x is PackageFile => x !== null)
+    .filter(Boolean)
+
+  return {
+    isLoading,
+    error,
+    data: processedResults,
+  }
+}

package/src/hooks/useUpdatePackageFilesMutation.ts

@@ -0,0 +1,86 @@
+import { useMutation } from "react-query"
+import type { Package } from "fake-snippets-api/lib/db/schema"
+
+interface PackageFile {
+  path: string
+  content: string
+}
+
+interface UseUpdatePackageFilesMutationProps {
+  pkg: Package | undefined
+  pkgFilesWithContent: PackageFile[]
+  initialFilesLoad: PackageFile[]
+  pkgFiles: any
+  axios: any
+  toast: any
+  loadPkgFiles: () => void
+}
+
+export function useUpdatePackageFilesMutation({
+  pkg,
+  pkgFilesWithContent,
+  initialFilesLoad,
+  pkgFiles,
+  axios,
+  toast,
+  loadPkgFiles,
+}: UseUpdatePackageFilesMutationProps) {
+  return useMutation({
+    mutationFn: async (
+      newpackage: Pick<Package, "package_id" | "name"> & {
+        package_name_with_version: string
+      },
+    ) => {
+      if (pkg) {
+        newpackage = { ...pkg, ...newpackage }
+      }
+      if (!newpackage) throw new Error("No package to update")
+
+      let updatedFilesCount = 0
+
+      for (const file of pkgFilesWithContent) {
+        const initialFile = initialFilesLoad.find((x) => x.path === file.path)
+        if (file.content && file.content !== initialFile?.content) {
+          const updatePkgFilePayload = {
+            package_file_id:
+              pkgFiles.data?.find((x: any) => x.file_path === file.path)
+                ?.package_file_id ?? null,
+            content_text: file.content,
+            file_path: file.path,
+            package_name_with_version: `${newpackage.name}`,
+          }
+
+          const response = await axios.post(
+            "/package_files/create_or_update",
+            updatePkgFilePayload,
+          )
+
+          if (response.status === 200) {
+            updatedFilesCount++
+          }
+        }
+      }
+      return updatedFilesCount
+    },
+    onSuccess: (updatedFilesCount) => {
+      if (updatedFilesCount) {
+        toast({
+          title: `Package's ${updatedFilesCount} files saved`,
+          description: "Your changes have been saved successfully.",
+        })
+        loadPkgFiles()
+      }
+    },
+    onError: (error: any) => {
+      console.error("Error updating pkg files:", error)
+      toast({
+        title: "Error",
+        description:
+          error instanceof Error
+            ? error.message
+            : "Failed to update package files. Please try again.",
+        variant: "destructive",
+      })
+    },
+  })
+}