chore: create end-to-end with UI

Author: jherr

packages/cta-cli/src/cli.ts

@@ -9,6 +9,7 @@ import {
   compileAddOn,
   compileStarter,
   createApp,
+  createSerializedOptions,
   getAllAddOns,
   getFrameworkById,
   getFrameworkByName,
@@ -123,15 +124,6 @@ export function cli({
     .action(async () => {
       await compileAddOn(environment)
     })
-  addOnCommand
-    .command('ui')
-    .description('Show the add-on developer UI')
-    .action(() => {
-      launchUI({
-        mode: 'add',
-        addOns: [],
-      })
-    })
 
   const starterCommand = program.command('starter')
   starterCommand
@@ -146,15 +138,6 @@ export function cli({
     .action(async () => {
       await compileStarter(environment)
     })
-  starterCommand
-    .command('ui')
-    .description('Show the starter developer UI')
-    .action(() => {
-      launchUI({
-        mode: 'starter',
-        addOns: [],
-      })
-    })
 
   program.argument('[project-name]', 'name of the project')
 
@@ -245,6 +228,7 @@ export function cli({
     )
     .option('--mcp', 'run the MCP server', false)
     .option('--mcp-sse', 'run the MCP server in SSE mode', false)
+    .option('--ui', 'Add with the UI')
 
   program.action(async (projectName: string, options: CliOptions) => {
     if (options.listAddOns) {
@@ -302,7 +286,14 @@ export function cli({
         finalOptions.targetDir =
           options.targetDir || resolve(process.cwd(), finalOptions.projectName)
 
-        await createApp(environment, finalOptions)
+        if (options.ui) {
+          launchUI({
+            mode: 'setup',
+            options: createSerializedOptions(finalOptions),
+          })
+        } else {
+          await createApp(environment, finalOptions)
+        }
       } catch (error) {
         log.error(
           error instanceof Error ? error.message : 'An unknown error occurred',

packages/cta-cli/src/types.ts

@@ -17,4 +17,5 @@ export interface CliOptions {
   starter?: string
   targetDir?: string
   interactive?: boolean
+  ui?: boolean
 }

packages/cta-engine/src/create-app.ts

@@ -38,28 +38,38 @@ async function writeFiles(environment: Environment, options: Options) {
     }
   }
 
+  environment.startStep('Writing framework files...')
   await writeFileBundle(options.framework)
+  environment.finishStep('Framework files written')
 
   for (const type of ['add-on', 'example', 'toolchain']) {
     for (const phase of ['setup', 'add-on', 'example']) {
       for (const addOn of options.chosenAddOns.filter(
         (addOn) => addOn.phase === phase && addOn.type === type,
       )) {
+        environment.startStep(`Writing ${addOn.name} files...`)
         await writeFileBundle(addOn)
+        environment.finishStep(`${addOn.name} files written`)
       }
     }
   }
 
   if (options.starter) {
+    environment.startStep(`Writing starter files...`)
     await writeFileBundle(options.starter)
+    environment.finishStep(`Starter files written`)
   }
 
+  environment.startStep(`Writing package.json...`)
   await environment.writeFile(
     resolve(options.targetDir, './package.json'),
     JSON.stringify(createPackageJSON(options), null, 2),
   )
+  environment.finishStep(`package.json written`)
 
+  environment.startStep(`Writing config file...`)
   await writeConfigFile(environment, options.targetDir, options)
+  environment.finishStep(`Config file written`)
 }
 
 async function runCommandsAndInstallDependencies(
@@ -71,17 +81,25 @@ async function runCommandsAndInstallDependencies(
   // Setup git
   if (options.git) {
     s.start(`Initializing git repository...`)
+    environment.startStep(`Initializing git repository...`)
+
     await setupGit(environment, options.targetDir)
+
+    environment.finishStep(`Initialized git repository`)
     s.stop(`Initialized git repository`)
   }
 
   // Install dependencies
   s.start(`Installing dependencies via ${options.packageManager}...`)
+  environment.startStep(
+    `Installing dependencies via ${options.packageManager}...`,
+  )
   await packageManagerInstall(
     environment,
     options.targetDir,
     options.packageManager,
   )
+  environment.finishStep(`Installed dependencies`)
   s.stop(`Installed dependencies`)
 
   for (const phase of ['setup', 'add-on', 'example']) {
@@ -90,11 +108,13 @@ async function runCommandsAndInstallDependencies(
         addOn.phase === phase && addOn.command && addOn.command.command,
     )) {
       s.start(`Setting up ${addOn.name}...`)
+      environment.startStep(`Setting up ${addOn.name}...`)
       await environment.execute(
         addOn.command!.command,
         addOn.command!.args || [],
         options.targetDir,
       )
+      environment.finishStep(`${addOn.name} setup complete`)
       s.stop(`${addOn.name} setup complete`)
     }
   }
@@ -106,11 +126,15 @@ async function runCommandsAndInstallDependencies(
     options.starter.command.command
   ) {
     s.start(`Setting up starter ${options.starter.name}...`)
+    environment.startStep(`Setting up starter ${options.starter.name}...`)
+
     await environment.execute(
       options.starter.command.command,
       options.starter.command.args || [],
       options.targetDir,
     )
+
+    environment.finishStep(`Starter ${options.starter.name} setup complete`)
     s.stop(`Starter ${options.starter.name} setup complete`)
   }
 

packages/cta-engine/src/index.ts

@@ -39,6 +39,8 @@ export {
   recursivelyGatherFiles,
 } from './custom-add-ons/shared.js'
 
+export { createSerializedOptions } from './options.js'
+
 export type {
   AddOn,
   Environment,

packages/cta-engine/src/integrations/shadcn.ts

@@ -30,13 +30,19 @@ export async function installShadcnComponents(
       s.start(
         `Installing shadcn components (${Array.from(shadcnComponents).join(', ')})...`,
       )
+      environment.startStep(
+        `Installing shadcn components (${Array.from(shadcnComponents).join(', ')})...`,
+      )
+
       await packageManagerExecute(
         environment,
         resolve(targetDir),
         options.packageManager,
         'shadcn@latest',
         ['add', '--silent', '--yes', ...Array.from(shadcnComponents)],
       )
+
+      environment.finishStep(`Installed additional shadcn components`)
       s.stop(`Installed additional shadcn components`)
     }
   }

packages/cta-engine/src/options.ts

@@ -0,0 +1,11 @@
+import type { Options, SerializedOptions } from './types'
+
+export const createSerializedOptions = (options: Options) => {
+  const serializedOptions: SerializedOptions = {
+    ...options,
+    chosenAddOns: options.chosenAddOns.map((addOn) => addOn.id),
+    framework: options.framework.id,
+    starter: options.starter?.id,
+  }
+  return serializedOptions
+}

packages/cta-ui/lib/index.ts

@@ -1,17 +1,22 @@
 import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
+import type { SerializedOptions } from '@tanstack/cta-engine'
+
 export function launchUI({
   mode,
   addOns,
+  options,
 }: {
-  mode: 'add' | 'add-on' | 'starter'
-  addOns: Array<string>
+  mode: 'add' | 'setup'
+  addOns?: Array<string>
+  options?: SerializedOptions
 }) {
   const projectPath = process.cwd()
 
   process.env.CTA_PROJECT_PATH = projectPath
-  process.env.CTA_ADD_ONS = addOns.join(',')
+  process.env.CTA_ADD_ONS = addOns?.join(',') || ''
+  process.env.CTA_OPTIONS = options ? JSON.stringify(options) : ''
   process.env.CTA_MODE = mode
 
   const developerPath = resolve(dirname(fileURLToPath(import.meta.url)), '..')

packages/cta-ui/src/components/cta-sidebar.tsx

@@ -8,6 +8,7 @@ import {
 
 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'
 
 export function AppSidebar() {
   return (
@@ -21,6 +22,7 @@ export function AppSidebar() {
       </SidebarContent>
       <SidebarFooter>
         <RunAddOns />
+        <RunCreateApp />
       </SidebarFooter>
     </Sidebar>
   )

packages/cta-ui/src/components/sidebar-items/run-add-ons.tsx

@@ -4,21 +4,26 @@ import { useStore } from '@tanstack/react-store'
 import { Button } from '@/components/ui/button'
 import {
   Dialog,
-  DialogClose,
   DialogContent,
   DialogFooter,
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
 
-import { selectedAddOns } from '@/store/project'
+import { applicationMode, selectedAddOns } from '@/store/project'
 
 export default function RunAddOns() {
   const currentlySelectedAddOns = useStore(selectedAddOns)
   const [isRunning, setIsRunning] = useState(false)
   const [output, setOutput] = useState('')
   const [finished, setFinished] = useState(false)
 
+  const mode = useStore(applicationMode)
+
+  if (mode !== 'add') {
+    return null
+  }
+
   async function onAddToApp() {
     setIsRunning(true)
     setOutput('')

packages/cta-ui/src/components/sidebar-items/run-create-app.tsx

@@ -0,0 +1,101 @@
+import { useState } from 'react'
+import { useStore } from '@tanstack/react-store'
+
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+
+import {
+  applicationMode,
+  projectOptions,
+  selectedAddOns,
+} from '@/store/project'
+
+export default function RunCreateApp() {
+  const currentlySelectedAddOns = useStore(selectedAddOns)
+  const [isRunning, setIsRunning] = useState(false)
+  const [output, setOutput] = useState('')
+  const [finished, setFinished] = useState(false)
+
+  const mode = useStore(applicationMode)
+  const options = useStore(projectOptions)
+
+  if (mode !== 'setup') {
+    return null
+  }
+
+  async function onAddToApp() {
+    setIsRunning(true)
+    setOutput('')
+
+    const streamingReq = await fetch('/api/create-app', {
+      method: 'POST',
+      body: JSON.stringify({
+        options: {
+          ...options,
+          chosenAddOns: selectedAddOns.state.map((addOn) => addOn.id),
+        },
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+    const reader = streamingReq.body?.getReader()
+    const decoder = new TextDecoder()
+
+    while (true) {
+      const result = await reader?.read()
+      if (result?.done) break
+      setOutput((s) => s + decoder.decode(result?.value))
+    }
+    setFinished(true)
+  }
+
+  return (
+    <div>
+      <Dialog open={isRunning}>
+        <DialogContent
+          className="sm:min-w-[425px] sm:max-w-fit"
+          hideCloseButton
+        >
+          <DialogHeader>
+            <DialogTitle>Creating Your Application</DialogTitle>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <pre>{output}</pre>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="default"
+              onClick={async () => {
+                await fetch('/api/shutdown', {
+                  method: 'POST',
+                })
+                window.close()
+              }}
+              disabled={!finished}
+            >
+              Exit This Application
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <div className="flex flex-col gap-2">
+        <Button
+          variant="default"
+          onClick={onAddToApp}
+          disabled={currentlySelectedAddOns.length === 0 || isRunning}
+          className="w-full"
+        >
+          Run Create App
+        </Button>
+      </div>
+    </div>
+  )
+}