chore: ui updates for progress

Author: jherr

frameworks/react-cra/add-ons/start/info.json

@@ -5,7 +5,7 @@
   "link": "https://tanstack.com/start/latest",
   "modes": ["file-router"],
   "type": "add-on",
-  "warning": "TanStack Start is not yet at 1.0 and may change significantly or not be compatible with other add-ons.",
+  "warning": "TanStack Start is not yet at 1.0 and may change significantly or not be compatible with other add-ons.\nMigrating to Start might require deleting node_modules and re-installing.",
   "routes": [
     {
       "url": "/demo/start/server-funcs",
@@ -20,5 +20,11 @@
       "jsName": "StartApiRequestDemo"
     }
   ],
-  "deletedFiles": ["./vite.config.js", "./vite.config.ts", "./index.html"]
+  "deletedFiles": [
+    "./vite.config.js",
+    "./vite.config.ts",
+    "./index.html",
+    "./src/main.tsx",
+    "./src/App.css"
+  ]
 }

packages/cta-engine/src/add-to-app.ts

@@ -121,7 +121,11 @@ export async function writeFiles(
     }
   }
 
-  environment.startStep('Writing files...')
+  environment.startStep({
+    id: 'write-files',
+    type: 'file',
+    message: 'Writing add-on files...',
+  })
 
   for (const file of [...changedFiles, ...overwrittenFiles]) {
     const fName = basename(file)
@@ -144,7 +148,7 @@ export async function writeFiles(
     }
   }
 
-  environment.finishStep('Files written')
+  environment.finishStep('write-files', 'Add-on files written')
 }
 
 export async function runNewCommands(
@@ -169,11 +173,13 @@ export async function runNewCommands(
   for (const command of output.commands) {
     const commandString = [command.command, ...command.args].join(' ')
     if (!originalCommands.has(commandString)) {
-      environment.startStep(
-        `Running ${formatCommand({ command: command.command, args: command.args })}...`,
-      )
+      environment.startStep({
+        id: 'run-commands',
+        type: 'command',
+        message: `Running ${formatCommand({ command: command.command, args: command.args })}...`,
+      })
       await environment.execute(command.command, command.args, cwd)
-      environment.finishStep(`${command.command} complete`)
+      environment.finishStep('run-commands', 'Setup commands complete')
     }
   }
 }
@@ -200,7 +206,11 @@ export async function addToApp(
   }
 
   environment.intro(`Adding ${addOns.join(', ')} to the project...`)
-  environment.startStep('Processing new app setup...')
+  environment.startStep({
+    id: 'processing-new-app-setup',
+    type: 'file',
+    message: 'Processing new app setup...',
+  })
 
   const newOptions = await createOptions(persistedOptions, addOns, cwd)
 
@@ -211,13 +221,18 @@ export async function addToApp(
 
   await writeFiles(environment, cwd, output, !!options?.forced)
 
-  environment.finishStep('App setup processed')
+  environment.finishStep(
+    'processing-new-app-setup',
+    'Application files written',
+  )
 
   // Install dependencies
 
-  environment.startStep(
-    `Installing dependencies via ${newOptions.packageManager}...`,
-  )
+  environment.startStep({
+    id: 'install-dependencies',
+    type: 'package-manager',
+    message: `Installing dependencies via ${newOptions.packageManager}...`,
+  })
   const s = environment.spinner()
   s.start(`Installing dependencies via ${newOptions.packageManager}...`)
   await packageManagerInstall(
@@ -226,15 +241,19 @@ export async function addToApp(
     newOptions.packageManager,
   )
   s.stop(`Installed dependencies`)
-  environment.finishStep('Installed dependencies')
+  environment.finishStep('install-dependencies', 'Dependencies installed')
 
   // Handle new commands
 
   await runNewCommands(environment, persistedOptions, cwd, output)
 
-  environment.startStep('Writing config file...')
+  environment.startStep({
+    id: 'write-config-file',
+    type: 'file',
+    message: 'Writing config file...',
+  })
   writeConfigFileToEnvironment(environment, newOptions)
-  environment.finishStep('Config file written')
+  environment.finishStep('write-config-file', 'Config file written')
 
   environment.outro('Add-ons added successfully!')
 }

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

@@ -38,38 +38,62 @@ async function writeFiles(environment: Environment, options: Options) {
     }
   }
 
-  environment.startStep('Writing framework files...')
+  environment.startStep({
+    id: 'write-framework-files',
+    type: 'file',
+    message: 'Writing framework files...',
+  })
   await writeFileBundle(options.framework)
-  environment.finishStep('Framework files written')
+  environment.finishStep('write-framework-files', 'Framework files written')
 
+  let wroteAddonFiles = false
   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...`)
+        environment.startStep({
+          id: 'write-addon-files',
+          type: 'file',
+          message: `Writing ${addOn.name} files...`,
+        })
         await writeFileBundle(addOn)
-        environment.finishStep(`${addOn.name} files written`)
+        wroteAddonFiles = true
       }
     }
   }
+  if (wroteAddonFiles) {
+    environment.finishStep('write-addon-files', 'Add-on files written')
+  }
 
   if (options.starter) {
-    environment.startStep(`Writing starter files...`)
+    environment.startStep({
+      id: 'write-starter-files',
+      type: 'file',
+      message: 'Writing starter files...',
+    })
     await writeFileBundle(options.starter)
-    environment.finishStep(`Starter files written`)
+    environment.finishStep('write-starter-files', 'Starter files written')
   }
 
-  environment.startStep(`Writing package.json...`)
+  environment.startStep({
+    id: 'write-package-json',
+    type: 'file',
+    message: 'Writing package.json...',
+  })
   await environment.writeFile(
     resolve(options.targetDir, './package.json'),
     JSON.stringify(createPackageJSON(options), null, 2),
   )
-  environment.finishStep(`package.json written`)
+  environment.finishStep('write-package-json', 'Package.json written')
 
-  environment.startStep(`Writing config file...`)
+  environment.startStep({
+    id: 'write-config-file',
+    type: 'file',
+    message: 'Writing config file...',
+  })
   await writeConfigFileToEnvironment(environment, options)
-  environment.finishStep(`Config file written`)
+  environment.finishStep('write-config-file', 'Config file written')
 }
 
 async function runCommandsAndInstallDependencies(
@@ -81,41 +105,58 @@ async function runCommandsAndInstallDependencies(
   // Setup git
   if (options.git) {
     s.start(`Initializing git repository...`)
-    environment.startStep(`Initializing git repository...`)
+    environment.startStep({
+      id: 'initialize-git-repository',
+      type: 'command',
+      message: 'Initializing git repository...',
+    })
 
     await setupGit(environment, options.targetDir)
 
-    environment.finishStep(`Initialized git repository`)
+    environment.finishStep(
+      'initialize-git-repository',
+      'Initialized git repository',
+    )
     s.stop(`Initialized git repository`)
   }
 
   // Install dependencies
   s.start(`Installing dependencies via ${options.packageManager}...`)
-  environment.startStep(
-    `Installing dependencies via ${options.packageManager}...`,
-  )
+  environment.startStep({
+    id: 'install-dependencies',
+    type: 'package-manager',
+    message: `Installing dependencies via ${options.packageManager}...`,
+  })
   await packageManagerInstall(
     environment,
     options.targetDir,
     options.packageManager,
   )
-  environment.finishStep(`Installed dependencies`)
+  environment.finishStep('install-dependencies', 'Installed dependencies')
   s.stop(`Installed dependencies`)
 
   for (const phase of ['setup', 'add-on', 'example']) {
     for (const addOn of options.chosenAddOns.filter(
       (addOn) =>
         addOn.phase === phase && addOn.command && addOn.command.command,
     )) {
-      s.start(`Setting up ${addOn.name}...`)
-      environment.startStep(`Setting up ${addOn.name}...`)
+      s.start(`Running commands for ${addOn.name}...`)
+      const cmd = formatCommand({
+        command: addOn.command!.command,
+        args: addOn.command!.args || [],
+      })
+      environment.startStep({
+        id: 'run-commands',
+        type: 'command',
+        message: cmd,
+      })
       await environment.execute(
         addOn.command!.command,
         addOn.command!.args || [],
         options.targetDir,
       )
-      environment.finishStep(`${addOn.name} setup complete`)
-      s.stop(`${addOn.name} setup complete`)
+      environment.finishStep('run-commands', 'Setup commands complete')
+      s.stop(`${addOn.name} commands complete`)
     }
   }
 
@@ -126,16 +167,24 @@ async function runCommandsAndInstallDependencies(
     options.starter.command.command
   ) {
     s.start(`Setting up starter ${options.starter.name}...`)
-    environment.startStep(`Setting up starter ${options.starter.name}...`)
+    const cmd = formatCommand({
+      command: options.starter.command.command,
+      args: options.starter.command.args || [],
+    })
+    environment.startStep({
+      id: 'run-starter-command',
+      type: 'command',
+      message: cmd,
+    })
 
     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`)
+    environment.finishStep('run-starter-command', 'Starter command complete')
+    s.stop(`${options.starter.name} commands complete`)
   }
 
   await installShadcnComponents(environment, options.targetDir, options)

packages/cta-engine/src/index.ts

@@ -53,6 +53,9 @@ export { createSerializedOptions } from './options.js'
 
 export {
   StarterCompiledSchema,
+  StatusEvent,
+  StatusStepType,
+  StopEvent,
   AddOnCompiledSchema,
   AddOnInfoSchema,
   IntegrationSchema,

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

@@ -30,9 +30,11 @@ export async function installShadcnComponents(
       s.start(
         `Installing shadcn components (${Array.from(shadcnComponents).join(', ')})...`,
       )
-      environment.startStep(
-        `Installing shadcn components (${Array.from(shadcnComponents).join(', ')})...`,
-      )
+      environment.startStep({
+        id: 'install-shadcn-components',
+        type: 'command',
+        message: `Installing shadcn components (${Array.from(shadcnComponents).join(', ')})...`,
+      })
 
       await packageManagerExecute(
         environment,
@@ -42,7 +44,10 @@ export async function installShadcnComponents(
         ['add', '--silent', '--yes', ...Array.from(shadcnComponents)],
       )
 
-      environment.finishStep(`Installed additional shadcn components`)
+      environment.finishStep(
+        'install-shadcn-components',
+        'Shadcn components installed',
+      )
       s.stop(`Installed additional shadcn components`)
     }
   }

packages/cta-engine/src/types.ts

@@ -5,6 +5,13 @@ import type { PackageManager } from './package-manager.js'
 
 export type Mode = typeof CODE_ROUTER | typeof FILE_ROUTER
 
+export type StatusStepType =
+  | 'file'
+  | 'command'
+  | 'info'
+  | 'package-manager'
+  | 'other'
+
 export const AddOnBaseSchema = z.object({
   id: z.string(),
   name: z.string(),
@@ -166,11 +173,24 @@ type FileEnvironment = {
   readdir: (path: string) => Promise<Array<string>>
 }
 
+export type StatusEvent = {
+  id: string
+  type: StatusStepType
+  message: string
+}
+export type StopEvent = {
+  id: string
+}
+
 type UIEnvironment = {
   appName: string
 
-  startStep: (message: string) => void
-  finishStep: (message: string) => void
+  startStep: (info: {
+    id: string
+    type: StatusStepType
+    message: string
+  }) => void
+  finishStep: (id: string, finalMessage: string) => void
 
   intro: (message: string) => void
   outro: (message: string) => void

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

@@ -0,0 +1,22 @@
+import type { StreamItem } from '@/types'
+
+export default function StatusList({
+  streamItems,
+  finished,
+}: {
+  streamItems: Array<StreamItem>
+  finished: boolean
+}) {
+  return (
+    <div className="flex flex-col gap-2">
+      {streamItems.map((item, index) => (
+        <div key={item.id} className="flex items-center gap-2">
+          <item.icon
+            className={`w-4 h-4 ${index === streamItems.length - 1 && !finished ? 'text-green-500 animate-spin' : ''}`}
+          />
+          {item.message}
+        </div>
+      ))}
+    </div>
+  )
+}