feat: select installation type

Author: gabitoesmiapodo

source/app.tsx

@@ -1,52 +1,46 @@
-import { Box } from 'ink'
-import BigText from 'ink-big-text'
-import Gradient from 'ink-gradient'
-import React, { useState } from 'react'
+import { Box, Text } from 'ink'
+import React, { useState, type ReactNode } from 'react'
+import MainTitle from './import/MainTitle.js'
 import Step1 from './import/Step1.js'
 import Step2 from './import/Step2.js'
-import Step3 from './import/Step3.js'
+import Step3, { type ItemProps } from './import/Step3.js'
 import { canShowStep } from './import/utils.js'
 
 const App = () => {
   const [projectName, setProjectName] = useState<string>('')
   const [currentStep, setCurrentStep] = useState(1)
+  const [setupOption, setSetupOption] = useState<ItemProps | undefined>()
 
   const finishStep = () => setCurrentStep(currentStep + 1)
+  const onSelect = (item: ItemProps) => setSetupOption(item)
 
-  const onSelect = (value: string) => {
-    console.log(value)
-  }
+  const steps: Array<ReactNode> = [
+    <Step1
+      onSubmit={setProjectName}
+      onCompletion={finishStep}
+      projectName={projectName}
+      key={1}
+    />,
+    <Step2
+      onCompletion={finishStep}
+      projectName={projectName}
+      key={2}
+    />,
+    <Step3
+      onCompletion={finishStep}
+      onSelect={onSelect}
+      key={3}
+    />,
+  ]
 
   return (
     <Box
       flexDirection={'column'}
       rowGap={1}
     >
-      <Gradient colors={['#ff438c', '#bb1d79', '#8b46a4', '#6a2581']}>
-        <BigText
-          lineHeight={1}
-          font={'chrome'}
-          text="dAppBooster"
-        />
-      </Gradient>
-      <Step1
-        onSubmit={setProjectName}
-        onCompletion={finishStep}
-        projectName={projectName}
-      />
-      {canShowStep(currentStep, 2) && (
-        <Step2
-          projectName={projectName}
-          onCompletion={finishStep}
-        />
-      )}
-      {canShowStep(currentStep, 3) && (
-        <Step3
-          onCompletion={finishStep}
-          onSelect={onSelect}
-          projectName={projectName}
-        />
-      )}
+      <MainTitle />
+      {steps.map((item, index) => canShowStep(currentStep, index + 1) && item)}
+      {canShowStep(currentStep, 4) && <Text>{setupOption?.value}</Text>}
     </Box>
   )
 }

source/import/Step3.tsx

@@ -1,19 +1,49 @@
+import { Box, Text } from 'ink'
 import Divider from 'ink-divider'
+import SelectInput from 'ink-select-input'
 import React, { type FC } from 'react'
 
+export interface ItemProps {
+  label: string
+  value: string
+}
+
 interface Props {
-  projectName: string
   onCompletion: () => void
+  onSelect: (item: ItemProps) => void
 }
 
-const Step3: FC<Props> = ({ projectName, onCompletion }) => (
-  <>
-    <Divider
-      titlePadding={2}
-      titleColor={'whiteBright'}
-      title={'Installation setup'}
-    />
-  </>
-)
+const Step3: FC<Props> = ({ onCompletion, onSelect }) => {
+  const handleSelect = (item: ItemProps) => {
+    onSelect(item)
+    onCompletion()
+  }
+
+  const items = [
+    {
+      label: 'Full',
+      value: 'full',
+    },
+    {
+      label: 'Custom',
+      value: 'custom',
+    },
+  ]
+
+  return (
+    <>
+      <Divider
+        titlePadding={2}
+        titleColor={'whiteBright'}
+        title={'Installation setup'}
+      />
+      <Text color={'whiteBright'}>Choose installation type</Text>
+      <SelectInput
+        items={items}
+        onSelect={handleSelect}
+      />
+    </>
+  )
+}
 
 export default Step3