@tanstack/cta-ui 0.10.0-alpha.19 → 0.10.0-alpha.21

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/components/ui/sonner.tsx

@@ -0,0 +1,23 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/src/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/components/ui/toggle-group.tsx

@@ -1,15 +1,15 @@
-import * as React from "react"
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
-import { type VariantProps } from "class-variance-authority"
+import * as React from 'react'
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
+import type { VariantProps } from 'class-variance-authority'
 
-import { cn } from "@/lib/utils"
-import { toggleVariants } from "@/components/ui/toggle"
+import { cn } from '@/lib/utils'
+import { toggleVariants } from '@/components/ui/toggle'
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants>
 >({
-  size: "default",
-  variant: "default",
+  size: 'default',
+  variant: 'default',
 })
 
 function ToggleGroup({
@@ -26,8 +26,8 @@ function ToggleGroup({
       data-variant={variant}
       data-size={size}
       className={cn(
-        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
-        className
+        'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs',
+        className,
       )}
       {...props}
     >
@@ -58,8 +58,8 @@ function ToggleGroupItem({
           variant: context.variant || variant,
           size: context.size || size,
         }),
-        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
-        className
+        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
+        className,
       )}
       {...props}
     >

package/src/components/ui/toggle.tsx

@@ -1,31 +1,33 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as TogglePrimitive from "@radix-ui/react-toggle"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react'
+import * as TogglePrimitive from '@radix-ui/react-toggle'
+import { cva } from 'class-variance-authority'
 
-import { cn } from "@/lib/utils"
+import type { VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
 
 const toggleVariants = cva(
   "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
   {
     variants: {
       variant: {
-        default: "bg-transparent",
+        default: 'bg-transparent',
         outline:
-          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
       },
       size: {
-        default: "h-9 px-2 min-w-9",
-        sm: "h-8 px-1.5 min-w-8",
-        lg: "h-10 px-2.5 min-w-10",
+        default: 'h-9 px-2 min-w-9',
+        sm: 'h-8 px-1.5 min-w-8',
+        lg: 'h-10 px-2.5 min-w-10',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
-  }
+  },
 )
 
 function Toggle({

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

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

@@ -22,7 +22,7 @@ interface TreeDataItem {
   icon?: any
   selectedIcon?: any
   openIcon?: any
-  children?: TreeDataItem[]
+  children?: Array<TreeDataItem>
   actions?: React.ReactNode
   onClick?: () => void
   draggable?: boolean
@@ -31,10 +31,11 @@ interface TreeDataItem {
 }
 
 type TreeProps = React.HTMLAttributes<HTMLDivElement> & {
-  data: TreeDataItem[] | TreeDataItem
+  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
@@ -47,6 +48,7 @@ const TreeView = React.forwardRef<HTMLDivElement, TreeProps>(
       initialSelectedItemId,
       onSelectChange,
       expandAll,
+      initialExpandedItemIds,
       defaultLeafIcon,
       defaultNodeIcon,
       className,
@@ -88,14 +90,17 @@ const TreeView = React.forwardRef<HTMLDivElement, TreeProps>(
     )
 
     const expandedItemIds = React.useMemo(() => {
-      if (!initialSelectedItemId) {
-        return [] as string[]
+      if (initialExpandedItemIds) {
+        return initialExpandedItemIds
+      }
+      if (!initialSelectedItemId && !expandAll) {
+        return [] as Array<string>
       }
 
-      const ids: string[] = []
+      const ids: Array<string> = []
 
       function walkTreeItems(
-        items: TreeDataItem[] | TreeDataItem,
+        items: Array<TreeDataItem> | TreeDataItem,
         targetId: string,
       ) {
         if (items instanceof Array) {
@@ -115,7 +120,7 @@ const TreeView = React.forwardRef<HTMLDivElement, TreeProps>(
 
       walkTreeItems(data, initialSelectedItemId)
       return ids
-    }, [data, expandAll, initialSelectedItemId])
+    }, [data, expandAll, initialSelectedItemId, initialExpandedItemIds])
 
     return (
       <div className={cn('overflow-hidden relative p-2', className)}>
@@ -147,7 +152,7 @@ TreeView.displayName = 'TreeView'
 type TreeItemProps = TreeProps & {
   selectedItemId?: string
   handleSelectChange: (item: TreeDataItem | undefined) => void
-  expandedItemIds: string[]
+  expandedItemIds: Array<string>
   defaultNodeIcon?: any
   defaultLeafIcon?: any
   handleDragStart?: (item: TreeDataItem) => void
@@ -226,7 +231,7 @@ const TreeNode = ({
 }: {
   item: TreeDataItem
   handleSelectChange: (item: TreeDataItem | undefined) => void
-  expandedItemIds: string[]
+  expandedItemIds: Array<string>
   selectedItemId?: string
   defaultNodeIcon?: any
   defaultLeafIcon?: any
@@ -294,7 +299,7 @@ const TreeNode = ({
             isOpen={value.includes(item.id)}
             default={defaultNodeIcon}
           />
-          <span className="text-sm truncate">{item.name}</span>
+          <span className="text-md truncate">{item.name}</span>
           <TreeActions isSelected={selectedItemId === item.id}>
             {item.actions}
           </TreeActions>
@@ -401,7 +406,7 @@ const TreeLeaf = React.forwardRef<
           isSelected={selectedItemId === item.id}
           default={defaultLeafIcon}
         />
-        <span className="flex-grow text-sm truncate">{item.name}</span>
+        <span className="flex-grow text-md truncate">{item.name}</span>
         <TreeActions isSelected={selectedItemId === item.id}>
           {item.actions}
         </TreeActions>
@@ -438,7 +443,7 @@ const AccordionContent = React.forwardRef<
   <AccordionPrimitive.Content
     ref={ref}
     className={cn(
-      'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+      'overflow-hidden text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
       className,
     )}
     {...props}

package/src/engine-handling/add-to-app-wrapper.ts

@@ -0,0 +1,114 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+import {
+  addToApp,
+  createDefaultEnvironment,
+  createMemoryEnvironment,
+  recursivelyGatherFiles,
+} from '@tanstack/cta-engine'
+
+import { createAppWrapper } from './create-app-wrapper.js'
+
+import { getProjectPath } from '@/engine-handling/server-environment.js'
+import {
+  cleanUpFileArray,
+  cleanUpFiles,
+} from '@/engine-handling/file-helpers.js'
+
+export async function addToAppWrapper(
+  addOns: Array<string>,
+  opts: {
+    dryRun?: boolean
+    stream?: boolean
+  },
+) {
+  const projectPath = getProjectPath()
+
+  const persistedOptions = JSON.parse(
+    readFileSync(resolve(projectPath, '.cta.json')),
+  )
+
+  const newAddons: Array<string> = []
+  for (const addOn of addOns) {
+    if (!persistedOptions.existingAddOns.includes(addOn)) {
+      newAddons.push(addOn)
+    }
+  }
+
+  if (newAddons.length === 0) {
+    return await createAppWrapper(persistedOptions, opts)
+  }
+
+  async function createEnvironment() {
+    if (opts.dryRun) {
+      const { environment, output } = createMemoryEnvironment(projectPath)
+      environment.writeFile(
+        resolve(projectPath, '.cta.json'),
+        JSON.stringify(persistedOptions, null, 2),
+      )
+
+      const localFiles = await cleanUpFiles(
+        await recursivelyGatherFiles(projectPath, false),
+      )
+      for (const file of Object.keys(localFiles)) {
+        environment.writeFile(resolve(projectPath, file), localFiles[file])
+      }
+      return { environment, output }
+    }
+    return {
+      environment: createDefaultEnvironment(),
+      output: { files: {}, deletedFiles: [], commands: [] },
+    }
+  }
+
+  const { environment, output } = await createEnvironment()
+
+  if (opts.stream) {
+    return new ReadableStream({
+      start(controller) {
+        environment.startStep = ({ id, type, message }) => {
+          controller.enqueue(
+            new TextEncoder().encode(
+              JSON.stringify({
+                msgType: 'start',
+                id,
+                type,
+                message,
+              }) + '\n',
+            ),
+          )
+        }
+        environment.finishStep = (id, message) => {
+          controller.enqueue(
+            new TextEncoder().encode(
+              JSON.stringify({
+                msgType: 'finish',
+                id,
+                message,
+              }) + '\n',
+            ),
+          )
+        }
+
+        environment.startRun()
+        addToApp(environment, newAddons, projectPath, {
+          forced: true,
+        }).then(() => {
+          environment.finishRun()
+          controller.close()
+        })
+      },
+    })
+  } else {
+    environment.startRun()
+    await addToApp(environment, newAddons, projectPath, {
+      forced: true,
+    })
+    environment.finishRun()
+
+    output.files = cleanUpFiles(output.files, projectPath)
+    output.deletedFiles = cleanUpFileArray(output.deletedFiles, projectPath)
+    return output
+  }
+}

package/src/engine-handling/create-app-wrapper.ts

@@ -0,0 +1,107 @@
+import { resolve } from 'node:path'
+
+import {
+  createApp,
+  createDefaultEnvironment,
+  createMemoryEnvironment,
+  finalizeAddOns,
+  getFrameworkById,
+  loadStarter,
+} from '@tanstack/cta-engine'
+
+import { registerFrameworks } from './framework-registration'
+
+import { cleanUpFileArray, cleanUpFiles } from './file-helpers'
+import { getApplicationMode, getProjectPath } from './server-environment'
+
+import type { Options, SerializedOptions, Starter } from '@tanstack/cta-engine'
+
+export async function createAppWrapper(
+  projectOptions: SerializedOptions,
+  opts: { dryRun?: boolean; stream?: boolean },
+) {
+  registerFrameworks()
+
+  const framework = getFrameworkById(projectOptions.framework)!
+
+  let starter: Starter | undefined
+  const addOns: Array<string> = [...projectOptions.chosenAddOns]
+  if (projectOptions.starter) {
+    starter = await loadStarter(projectOptions.starter)
+    for (const addOn of starter.dependsOn ?? []) {
+      addOns.push(addOn)
+    }
+  }
+  const chosenAddOns = await finalizeAddOns(
+    framework,
+    projectOptions.mode,
+    addOns,
+  )
+
+  const projectPath = getProjectPath()
+  const targetDir =
+    getApplicationMode() === 'add'
+      ? projectOptions.targetDir
+      : resolve(projectPath, projectOptions.projectName)
+
+  const options: Options = {
+    ...projectOptions,
+    targetDir,
+    starter,
+    framework,
+    chosenAddOns,
+  }
+
+  function createEnvironment() {
+    if (opts.dryRun) {
+      return createMemoryEnvironment(targetDir)
+    }
+    return {
+      environment: createDefaultEnvironment(),
+      output: { files: {}, deletedFiles: [], commands: [] },
+    }
+  }
+
+  const { environment, output } = createEnvironment()
+
+  if (opts.stream) {
+    return new ReadableStream({
+      start(controller) {
+        environment.startStep = ({ id, type, message }) => {
+          controller.enqueue(
+            new TextEncoder().encode(
+              JSON.stringify({
+                msgType: 'start',
+                id,
+                type,
+                message,
+              }) + '\n',
+            ),
+          )
+        }
+        environment.finishStep = (id, message) => {
+          controller.enqueue(
+            new TextEncoder().encode(
+              JSON.stringify({
+                msgType: 'finish',
+                id,
+                message,
+              }) + '\n',
+            ),
+          )
+        }
+
+        createApp(environment, options).then(() => {
+          controller.close()
+        })
+      },
+    })
+  } else {
+    await createApp(environment, options)
+
+    output.files = cleanUpFiles(output.files, targetDir)
+    output.deletedFiles = cleanUpFileArray(output.deletedFiles, targetDir)
+
+    return output
+  }
+}

package/src/engine-handling/file-helpers.ts

@@ -0,0 +1,25 @@
+import { basename } from 'node:path'
+
+export function cleanUpFiles(
+  files: Record<string, string>,
+  targetDir?: string,
+) {
+  return Object.keys(files).reduce<Record<string, string>>((acc, file) => {
+    const content = files[file].startsWith('base64::')
+      ? '<binary file>'
+      : files[file]
+    if (basename(file) !== '.cta.json') {
+      acc[targetDir ? file.replace(targetDir, '.') : file] = content
+    }
+    return acc
+  }, {})
+}
+
+export function cleanUpFileArray(files: Array<string>, targetDir?: string) {
+  return files.reduce<Array<string>>((acc, file) => {
+    if (basename(file) !== '.cta.json') {
+      acc.push(targetDir ? file.replace(targetDir, '.') : file)
+    }
+    return acc
+  }, [])
+}

package/src/engine-handling/framework-registration.ts

@@ -0,0 +1,11 @@
+import { register as registerReactCra } from '@tanstack/cta-framework-react-cra'
+import { register as registerSolid } from '@tanstack/cta-framework-solid'
+
+let registered = false
+
+export function registerFrameworks() {
+  if (registered) return
+  registerReactCra()
+  registerSolid()
+  registered = true
+}

package/src/engine-handling/generate-initial-payload.ts

@@ -0,0 +1,93 @@
+import { readFileSync } from 'node:fs'
+import { basename, resolve } from 'node:path'
+
+import {
+  createSerializedOptionsFromPersisted,
+  getAllAddOns,
+  getFrameworkById,
+  recursivelyGatherFiles,
+} from '@tanstack/cta-engine'
+
+import { cleanUpFiles } from './file-helpers.js'
+import { createAppWrapper } from './create-app-wrapper.js'
+import { registerFrameworks } from './framework-registration.js'
+import {
+  getApplicationMode,
+  getProjectOptions,
+  getProjectPath,
+} from './server-environment.js'
+
+import type { SerializedOptions } from '@tanstack/cta-engine'
+
+export async function generateInitialPayload() {
+  registerFrameworks()
+
+  const projectPath = getProjectPath()
+  const applicationMode = getApplicationMode()
+
+  const localFiles =
+    applicationMode === 'add'
+      ? await cleanUpFiles(await recursivelyGatherFiles(projectPath, false))
+      : {}
+
+  function getSerializedOptions() {
+    if (applicationMode === 'setup') {
+      const projectOptions = getProjectOptions()
+      return {
+        ...projectOptions,
+        framework: projectOptions.framework || 'react-cra',
+        projectName: projectOptions.projectName || basename(projectPath),
+        mode: projectOptions.mode || 'file-router',
+        typescript: projectOptions.typescript || true,
+        tailwind: projectOptions.tailwind || true,
+        git: projectOptions.git || true,
+      } as SerializedOptions
+    } else {
+      const persistedOptions = JSON.parse(
+        readFileSync(resolve(projectPath, '.cta.json')),
+      )
+      return createSerializedOptionsFromPersisted(persistedOptions)
+    }
+  }
+
+  const serializedOptions = getSerializedOptions()
+
+  const output = await createAppWrapper(serializedOptions, {
+    dryRun: true,
+  })
+
+  const framework = await getFrameworkById(serializedOptions.framework)
+
+  const codeRouter = getAllAddOns(framework!, 'code-router').map((addOn) => ({
+    id: addOn.id,
+    name: addOn.name,
+    description: addOn.description,
+    type: addOn.type,
+    smallLogo: addOn.smallLogo,
+    logo: addOn.logo,
+    link: addOn.link,
+    dependsOn: addOn.dependsOn,
+  }))
+
+  const fileRouter = getAllAddOns(framework!, 'file-router').map((addOn) => ({
+    id: addOn.id,
+    name: addOn.name,
+    description: addOn.description,
+    type: addOn.type,
+    smallLogo: addOn.smallLogo,
+    logo: addOn.logo,
+    link: addOn.link,
+    dependsOn: addOn.dependsOn,
+  }))
+
+  return {
+    applicationMode,
+    localFiles,
+    addOns: {
+      'code-router': codeRouter,
+      'file-router': fileRouter,
+    },
+    options: serializedOptions,
+    output,
+  }
+}