@tanstack/cta-ui 0.15.3 → 0.15.4

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

@@ -1,497 +0,0 @@
-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 px-2 before:w-full before:opacity-0 before:bg-accent/70 before:h-[2rem] before:-z-10',
-)
-
-const selectedTreeVariants = cva(
-  'before:opacity-100 before:bg-accent/70 text-accent-foreground',
-)
-
-const dragOverVariants = cva(
-  'before:opacity-100 before:bg-primary/20 text-primary-foreground',
-)
-
-interface TreeDataItem {
-  id: string
-  name: string
-  icon?: any
-  selectedIcon?: any
-  openIcon?: any
-  children?: Array<TreeDataItem>
-  actions?: React.ReactNode
-  onClick?: () => void
-  draggable?: boolean
-  droppable?: boolean
-  className?: string
-}
-
-type TreeProps = React.HTMLAttributes<HTMLDivElement> & {
-  data: Array<TreeDataItem> | TreeDataItem
-  initialSelectedItemId?: string
-  onSelectChange?: (item: TreeDataItem | undefined) => void
-  expandAll?: boolean
-  initialExpandedItemIds?: Array<string>
-  defaultNodeIcon?: any
-  defaultLeafIcon?: any
-  onDocumentDrag?: (sourceItem: TreeDataItem, targetItem: TreeDataItem) => void
-}
-
-const TreeView = React.forwardRef<HTMLDivElement, TreeProps>(
-  (
-    {
-      data,
-      initialSelectedItemId,
-      onSelectChange,
-      expandAll,
-      initialExpandedItemIds,
-      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 (initialExpandedItemIds) {
-        return initialExpandedItemIds
-      }
-      if (!initialSelectedItemId && !expandAll) {
-        return [] as Array<string>
-      }
-
-      const ids: Array<string> = []
-
-      function walkTreeItems(
-        items: Array<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, initialExpandedItemIds])
-
-    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: Array<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}
-                  className={item.className}
-                />
-              )}
-            </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: Array<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-md 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-5 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-md 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-accent-foreground/50 mr-1" />
-      {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-md 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/file-classes.ts

@@ -1,54 +0,0 @@
-import type { FileClass } from '@/types.js'
-
-export const twClasses: Record<FileClass, string> = {
-  unchanged: 'text-gray-500',
-  added: 'text-green-500 font-bold',
-  modified: 'text-blue-500 italic',
-  deleted: 'text-red-500 line-through',
-  overwritten: 'text-red-700 underline',
-}
-
-export type FileClassAndInfo = {
-  fileClass: FileClass
-  originalFile?: string
-  modifiedFile?: string
-}
-
-export const getFileClass = (
-  file: string,
-  tree: Record<string, string>,
-  originalTree: Record<string, string>,
-  localTree: Record<string, string>,
-  deletedFiles: Array<string>,
-): FileClassAndInfo => {
-  if (localTree[file]) {
-    if (deletedFiles.includes(file)) {
-      return { fileClass: 'deleted', originalFile: localTree[file] }
-    }
-    // We have a local file and it's in the new tree
-    if (tree[file]) {
-      // Our new tree has changed this file
-      if (localTree[file] !== tree[file]) {
-        // Was the local tree different from the original?
-        if (originalTree[file] && localTree[file] !== originalTree[file]) {
-          // Yes, it was overwritten
-          return {
-            fileClass: 'overwritten',
-            originalFile: localTree[file],
-            modifiedFile: tree[file],
-          }
-        } else {
-          // No, it just being modified
-          return {
-            fileClass: 'modified',
-            originalFile: localTree[file],
-            modifiedFile: tree[file],
-          }
-        }
-      }
-    }
-    return { fileClass: 'unchanged', modifiedFile: localTree[file] }
-  } else {
-    return { fileClass: 'added', modifiedFile: tree[file] }
-  }
-}

package/src/hooks/use-mobile.ts

@@ -1,19 +0,0 @@
-import * as React from "react"
-
-const MOBILE_BREAKPOINT = 768
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
-
-  return !!isMobile
-}

package/src/hooks/use-mounted.ts

@@ -1,9 +0,0 @@
-import * as React from 'react'
-
-export function useMounted() {
-  const [mounted, setMounted] = React.useState(false)
-  React.useEffect(() => {
-    setMounted(true)
-  }, [])
-  return mounted
-}

package/src/hooks/use-preferred-reduced-motion.ts

@@ -1,27 +0,0 @@
-import * as React from 'react'
-
-/**
- * Hook that returns the user's preference for reduced motion.
- * @returns null if the value is not yet determined or the user's preference for reduced motion.
- */
-export const usePrefersReducedMotion = () => {
-  const [prefersReducedMotion, setPrefersReducedMotion] = React.useState<
-    boolean | null
-  >(null)
-
-  React.useEffect(() => {
-    const mediaQueryList = window.matchMedia('(prefers-reduced-motion: reduce)')
-    setPrefersReducedMotion(mediaQueryList.matches)
-
-    const listener = (event: MediaQueryListEvent) => {
-      setPrefersReducedMotion(event.matches)
-    }
-
-    mediaQueryList.addEventListener('change', listener)
-    return () => {
-      mediaQueryList.removeEventListener('change', listener)
-    }
-  }, [])
-
-  return prefersReducedMotion
-}

package/src/hooks/use-streaming-status.ts

@@ -1,70 +0,0 @@
-import { useCallback, useState } from 'react'
-
-import {
-  InfoIcon,
-  MessageCircleCodeIcon,
-  PackageIcon,
-  SquarePenIcon,
-  TerminalIcon,
-} from 'lucide-react'
-
-import type { StatusStepType } from '@tanstack/cta-engine'
-
-import type { StreamEvent, StreamItem } from '@/types'
-
-const iconMap: Record<StatusStepType, typeof InfoIcon> = {
-  file: SquarePenIcon,
-  command: TerminalIcon,
-  'package-manager': PackageIcon,
-  info: InfoIcon,
-  other: MessageCircleCodeIcon,
-}
-
-export default function useStreamingStatus() {
-  const [streamItems, setStreamItems] = useState<Array<StreamItem>>([])
-  const [finished, setFinished] = useState(false)
-
-  const monitorStream = useCallback(async (res: Response) => {
-    setFinished(false)
-    const reader = res.body?.getReader()
-    const decoder = new TextDecoder()
-
-    let rawStream = ''
-    while (true) {
-      const result = await reader?.read()
-      if (result?.done) break
-
-      rawStream += decoder.decode(result?.value)
-
-      let currentId: string | undefined
-      const newStreamItems: Array<StreamItem> = []
-      for (const line of rawStream.split('\n')) {
-        if (line.startsWith('{') && line.endsWith('}')) {
-          const item = JSON.parse(line) as StreamEvent
-          if (item.msgType === 'start') {
-            if (currentId === item.id) {
-              newStreamItems[newStreamItems.length - 1].message = item.message
-            } else {
-              currentId = item.id
-              newStreamItems.push({
-                id: currentId,
-                icon: iconMap[item.type],
-                message: item.message,
-              })
-            }
-          } else {
-            if (newStreamItems.length > 0) {
-              newStreamItems[newStreamItems.length - 1].message = item.message
-            }
-            currentId = undefined
-          }
-        }
-      }
-      setStreamItems(newStreamItems)
-    }
-    setFinished(true)
-    return rawStream
-  }, [])
-
-  return { finished, streamItems, monitorStream }
-}