feat: add mocked custom options retrieval

Author: gabitoesmiapodo

source/app.tsx

@@ -3,18 +3,21 @@ 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, { type Item } from './import/Step3.js'
-import Step4 from './import/Step4.js'
+import Step3, { type Item as SetupTypeItem } from './import/Step3.js'
+import Step4, { type Item as CustomOptionsItem } from './import/Step4.js'
 import Step5 from './import/Step5.js'
 import { canShowStep } from './import/utils.js'
 
 const App = () => {
   const [projectName, setProjectName] = useState<string>('')
   const [currentStep, setCurrentStep] = useState(1)
-  const [setupOption, setSetupOption] = useState<Item | undefined>()
+  const [setupType, setSetupType] = useState<SetupTypeItem | undefined>()
+  const [customOptions, setCustomOptions] = useState<Array<CustomOptionsItem> | undefined>()
 
   const finishStep = () => setCurrentStep(currentStep + 1)
-  const onSelect = (item: Item) => setSetupOption(item)
+  const onSelectSetupType = (item: SetupTypeItem) => setSetupType(item)
+  const onSelectCustomOptions = (selectedItems: Array<CustomOptionsItem>) =>
+    setCustomOptions([...selectedItems])
 
   const steps: Array<ReactNode> = [
     <Step1
@@ -30,19 +33,19 @@ const App = () => {
     />,
     <Step3
       onCompletion={finishStep}
-      onSelect={onSelect}
+      onSelect={onSelectSetupType}
       key={3}
     />,
     <Step4
       onCompletion={finishStep}
-      onSubmit={() => console.log()}
-      installation={setupOption?.value}
+      onSubmit={onSelectCustomOptions}
+      installation={setupType?.value}
       key={4}
     />,
     <Step5
       onCompletion={finishStep}
       projectName={projectName}
-      installation={setupOption?.value}
+      installation={setupType?.value}
       key={5}
     />,
   ]
@@ -54,6 +57,11 @@ const App = () => {
     >
       <MainTitle />
       {steps.map((item, index) => canShowStep(currentStep, index + 1) && item)}
+      {customOptions?.map((item, index) => (
+        <Text key={index}>
+          {item.label} / {item.value}
+        </Text>
+      ))}
     </Box>
   )
 }

source/import/Step4.tsx

@@ -4,15 +4,15 @@ import MultiSelect from './Multiselect/index.js'
 import React, { useState, type FC, useEffect } from 'react'
 import type { Installation } from './Step3.js'
 
-interface Item {
+export interface Item {
   label: string
   value: string
 }
 
 interface Props {
-  onCompletion: () => void
-  onSubmit: (item: Item) => void
   installation: Installation | undefined
+  onCompletion: () => void
+  onSubmit: (selectedItems: Array<Item>) => void
 }
 
 const customPackages: Array<Item> = [
@@ -40,43 +40,27 @@ const customPackages: Array<Item> = [
 
 const Step4: FC<Props> = ({ onCompletion, onSubmit, installation }) => {
   const [isFocused, setIsFocused] = useState(true)
-  const [showCustomOptions, setShowCustomOptions] = useState(false)
   const skip = installation === 'full'
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: Run this only once
   useEffect(() => {
+    // full installation, do nothing
     if (skip) {
       onCompletion()
     }
   }, [])
 
-  const onHandleSubmit = (item: Array<Item>) => {
-    // onSubmit(item)
-    //
-    // if (item.value === 'full') {
-    //   onCompletion()
-    // } else {
-    //   setShowCustomOptions(true)
-    // }
-    // setIsFocused(false)
+  const onHandleSubmit = (selectedItems: Array<Item>) => {
+    onSubmit(selectedItems)
+    setIsFocused(false)
+    onCompletion()
   }
 
   return skip ? null : (
     <>
       <Text color={'whiteBright'}>Choose optional packages</Text>
       <MultiSelect
-        // indicatorComponent={({ isSelected }) => (
-        //   <Text color="green">{isSelected ? '> ' : '  '}</Text>
-        // )}
-        // itemComponent={({ label, isSelected }) => (
-        //   <Text
-        //     color={isSelected ? 'green' : 'white'}
-        //     bold={isSelected}
-        //   >
-        //     {label}
-        //   </Text>
-        // )}
-        // isFocused={isFocused}
+        focus={isFocused}
         items={customPackages}
         onSubmit={onHandleSubmit}
       />