feat: add custom / full installation mockup

Author: gabitoesmiapodo

source/app.tsx

@@ -4,6 +4,7 @@ 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 { canShowStep } from './import/utils.js'
 
 const App = () => {
@@ -31,6 +32,12 @@ const App = () => {
       onSelect={onSelect}
       key={3}
     />,
+    <Step4
+      onCompletion={finishStep}
+      projectName={projectName}
+      installation={setupOption?.value}
+      key={4}
+    />,
   ]
 
   return (
@@ -40,7 +47,6 @@ const App = () => {
     >
       <MainTitle />
       {steps.map((item, index) => canShowStep(currentStep, index + 1) && item)}
-      {canShowStep(currentStep, 4) && <Text>{setupOption?.value}</Text>}
     </Box>
   )
 }

source/import/CustomInstallation.tsx

@@ -0,0 +1,13 @@
+import { Text } from 'ink'
+import React, { type FC } from 'react'
+
+interface Props {
+  projectName: string
+  onCompletion: () => void
+}
+
+const CustomInstallation: FC<Props> = ({ projectName, onCompletion }) => (
+  <Text>Custom Installation!</Text>
+)
+
+export default CustomInstallation

source/import/FullInstallation.tsx

@@ -0,0 +1,13 @@
+import { Text } from 'ink'
+import React, { type FC } from 'react'
+
+interface Props {
+  projectName: string
+  onCompletion: () => void
+}
+
+const FullInstallation: FC<Props> = ({ projectName, onCompletion }) => (
+  <Text>Full Installation!</Text>
+)
+
+export default FullInstallation

source/import/Step4.tsx

@@ -0,0 +1,74 @@
+import { join } from 'node:path'
+import process from 'node:process'
+import { Box, Text } from 'ink'
+import Divider from 'ink-divider'
+import { Script, Spawn } from 'ink-spawn'
+import React, { type FC, useState } from 'react'
+import CustomInstallation from './CustomInstallation.js'
+import FullInstallation from './FullInstallation.js'
+import fullInstallation from './FullInstallation.js'
+import type { Installation } from './Step3.js'
+
+interface Props {
+  installation: Installation | undefined
+  projectName: string
+  onCompletion: () => void
+}
+
+const Step4: FC<Props> = ({ projectName, onCompletion, installation }) => {
+  const projectDir = join(process.cwd(), projectName)
+  const [canInstall, setCanInstall] = useState(false)
+
+  return (
+    <>
+      <Divider
+        titlePadding={2}
+        titleColor={'whiteBright'}
+        title={`Performing ${installation ?? 'full'} installation`}
+      />
+      <Box
+        flexDirection={'column'}
+        gap={0}
+      >
+        <Script>
+          <Box columnGap={1}>
+            <Text color={'whiteBright'}>
+              Creating{' '}
+              <Text
+                italic
+                color={'white'}
+              >
+                .env.local
+              </Text>{' '}
+              file
+            </Text>
+          </Box>
+          <Spawn
+            shell
+            cwd={projectDir}
+            silent
+            command={'cp'}
+            args={['.env.example', '.env.local']}
+            runningText={'Working...'}
+            successText={'Done!'}
+            failureText={'Error...'}
+            onCompletion={() => setCanInstall(true)}
+          />
+        </Script>
+        {canInstall && installation === 'full' ? (
+          <FullInstallation
+            projectName={projectName}
+            onCompletion={() => console.log()}
+          />
+        ) : (
+          <CustomInstallation
+            projectName={projectName}
+            onCompletion={() => console.log()}
+          />
+        )}
+      </Box>
+    </>
+  )
+}
+
+export default Step4