refactor: migrate TUI components to operations layer and feature definitions

Update CloneRepo, Install, FileCleanup, OptionalPackages, and
PostInstall to use the extracted operations and featureDefinitions.
Remove now-unused components (Commands, CustomInstallation,
FullInstallation, InstallAllPackages). Clean up app.tsx by removing
hybrid flag pre-population.

Author: fernandomg

source/app.tsx

@@ -8,7 +8,7 @@ import InstallationMode from './components/steps/InstallationMode.js'
 import OptionalPackages from './components/steps/OptionalPackages.js'
 import PostInstall from './components/steps/PostInstall.js'
 import ProjectName from './components/steps/ProjectName.js'
-import type { InstallationSelectItem, MultiSelectItem } from './types/types.js'
+import type { InstallationSelectItem, InstallationType, MultiSelectItem } from './types/types.js'
 import { canShowStep } from './utils/utils.js'
 
 const App = () => {
@@ -24,6 +24,8 @@ const App = () => {
     [],
   )
 
+  const skipFeatures = setupType?.value === 'full'
+
   const steps: Array<ReactNode> = useMemo(
     () => [
       <ProjectName
@@ -42,12 +44,10 @@ const App = () => {
         onSelect={onSelectSetupType}
         key={3}
       />,
-      // TODO: add a skip parameter to all (or most) steps
-      // to allow skipping when testing, etc.
       <OptionalPackages
         onCompletion={finishStep}
         onSubmit={onSelectSelectedFeatures}
-        skip={setupType?.value === 'full'}
+        skip={skipFeatures}
         key={4}
       />,
       <Install
@@ -71,7 +71,7 @@ const App = () => {
       <PostInstall
         projectName={projectName}
         installationConfig={{
-          installationType: setupType?.value,
+          installationType: setupType?.value as InstallationType | undefined,
           selectedFeatures: selectedFeatures,
         }}
         key={7}
@@ -84,6 +84,7 @@ const App = () => {
       selectedFeatures,
       onSelectSetupType,
       projectName,
+      skipFeatures,
     ],
   )
 

source/components/steps/CloneRepo/CloneRepo.tsx

@@ -1,26 +1,45 @@
-import type { FC } from 'react'
+import { Text } from 'ink'
+import { type FC, useEffect, useState } from 'react'
+import { cloneRepo } from '../../../operations/index.js'
 import Divider from '../../Divider.js'
-import Commands from './Commands.js'
 
 interface Props {
   projectName: string
   onCompletion: () => void
 }
 
-/**
- * Step for cloning the repository.
- * @param projectName
- * @param onCompletion
- * @constructor
- */
-const CloneRepo: FC<Props> = ({ projectName, onCompletion }) => (
-  <>
-    <Divider title={'Git tasks'} />
-    <Commands
-      projectName={projectName}
-      onCompletion={onCompletion}
-    />
-  </>
-)
+const CloneRepo: FC<Props> = ({ projectName, onCompletion }) => {
+  const [status, setStatus] = useState<'running' | 'done' | 'error'>('running')
+  const [errorMessage, setErrorMessage] = useState('')
+
+  useEffect(() => {
+    cloneRepo(projectName)
+      .then(() => {
+        setStatus('done')
+        onCompletion()
+      })
+      .catch((error: Error) => {
+        setStatus('error')
+        setErrorMessage(error.message)
+      })
+  }, [projectName, onCompletion])
+
+  return (
+    <>
+      <Divider title={'Git tasks'} />
+      {status === 'running' && (
+        <Text color={'whiteBright'}>
+          Cloning dAppBooster in <Text italic>{projectName}</Text>... Working...
+        </Text>
+      )}
+      {status === 'done' && (
+        <Text color={'green'}>
+          Cloned dAppBooster in <Text italic>{projectName}</Text>. Done!
+        </Text>
+      )}
+      {status === 'error' && <Text color={'red'}>Failed to clone: {errorMessage}</Text>}
+    </>
+  )
+}
 
 export default CloneRepo