@tanstack/cta-ui-base 0.15.4

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

@@ -0,0 +1,497 @@
+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={() => {
+            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

@@ -0,0 +1,54 @@
+import type { FileClass } from './types'
+
+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-mounted.ts

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,70 @@
+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 }
+}

package/src/index.ts

@@ -0,0 +1,44 @@
+import RootComponent from './app'
+
+import { AppSidebar } from './components/cta-sidebar'
+import { AppHeader } from './components/header'
+import { BackgroundAnimation } from './components/background-animation'
+import { Toaster } from './components/toaster'
+import FileNavigator from './components/file-navigator'
+import StartupDialog from './components/startup-dialog'
+import { QueryProvider } from './components/query-provider'
+import { CTAProvider } from './components/cta-provider'
+import SelectedAddOns from './components/sidebar-items/add-ons'
+import RunAddOns from './components/sidebar-items/run-add-ons'
+import RunCreateApp from './components/sidebar-items/run-create-app'
+import ProjectName from './components/sidebar-items/project-name'
+import ModeSelector from './components/sidebar-items/mode-selector'
+import TypescriptSwitch from './components/sidebar-items/typescript-switch'
+import StarterDialog from './components/sidebar-items/starter'
+import SidebarGroup from './components/sidebar-items/sidebar-group'
+
+import { useApplicationMode, useManager, useReady } from './store/project'
+
+export {
+  FileNavigator,
+  AppSidebar,
+  AppHeader,
+  BackgroundAnimation,
+  Toaster,
+  StartupDialog,
+  QueryProvider,
+  CTAProvider,
+  SelectedAddOns,
+  RunAddOns,
+  RunCreateApp,
+  ProjectName,
+  ModeSelector,
+  TypescriptSwitch,
+  StarterDialog,
+  SidebarGroup,
+  useApplicationMode,
+  useManager,
+  useReady,
+}
+
+export default RootComponent