feat: full installation commands

Author: gabitoesmiapodo

package.json

@@ -32,5 +32,8 @@
     "@types/react": "^18.3.22",
     "ts-node": "^10.9.1",
     "typescript": "^5.8.3"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": ["@biomejs/biome"]
   }
 }

pnpm-workspace.yaml

@@ -25,8 +25,8 @@ const App = () => {
 
   const steps: Array<ReactNode> = [
     <ProjectName
-      onSubmit={setProjectName}
       onCompletion={finishStep}
+      onSubmit={setProjectName}
       projectName={projectName}
       key={1}
     />,
@@ -41,17 +41,18 @@ const App = () => {
       key={3}
     />,
     <OptionalPackages
+      installation={setupType?.value}
       onCompletion={finishStep}
       onSubmit={onSelectCustomOptions}
-      installation={setupType?.value}
       key={4}
     />,
     <Install
+      installation={{ installationType: setupType?.value, customOptions: customOptions }}
       onCompletion={finishStep}
       projectName={projectName}
-      installation={setupType?.value}
       key={5}
     />,
+    <Text key={6}>Done! Go fuck yourself.</Text>,
   ]
 
   return (
@@ -61,11 +62,6 @@ const App = () => {
     >
       <MainTitle />
       {steps.map((item, index) => canShowStep(currentStep, index + 1) && item)}
-      {customOptions?.map((item) => (
-        <Text key={item.value}>
-          {item.label} / {item.value}
-        </Text>
-      ))}
     </Box>
   )
 }

source/app.tsx

@@ -1,12 +1,14 @@
 import { Text } from 'ink'
 import React, { type FC } from 'react'
+import type { Item as CustomOptionsItem } from '../OptionalPackages.js'
 
 interface Props {
-  projectName: string
+  installationPackages?: Array<CustomOptionsItem>
   onCompletion: () => void
+  projectName: string
 }
 
-const CustomInstallation: FC<Props> = ({ projectName, onCompletion }) => (
+const CustomInstallation: FC<Props> = ({ projectName, onCompletion, installationPackages }) => (
   <Text>Custom Installation!</Text>
 )
 

source/import/components/steps/Install/CustomInstallation.tsx

@@ -1,13 +1,38 @@
-import { Text } from 'ink'
+import { join } from 'node:path'
+import process from 'node:process'
+import { Box, Text } from 'ink'
+import { Script, Spawn } from 'ink-spawn'
 import React, { type FC } from 'react'
 
 interface Props {
   projectName: string
   onCompletion: () => void
 }
 
-const FullInstallation: FC<Props> = ({ projectName, onCompletion }) => (
-  <Text>Full Installation!</Text>
-)
+const FullInstallation: FC<Props> = ({ projectName, onCompletion }) => {
+  const projectDir = join(process.cwd(), projectName)
+
+  return (
+    <Box
+      flexDirection={'column'}
+      gap={0}
+    >
+      <Script>
+        <Text color={'whiteBright'}>Installing packages</Text>
+        <Spawn
+          shell
+          cwd={projectDir}
+          silent
+          command={'pnpm'}
+          args={['i']}
+          runningText={'Working...'}
+          successText={'Done!'}
+          failureText={'Error...'}
+          onCompletion={onCompletion}
+        />
+      </Script>
+    </Box>
+  )
+}
 
 export default FullInstallation

source/import/components/steps/Install/FullInstallation.tsx

@@ -5,22 +5,27 @@ import { Script, Spawn } from 'ink-spawn'
 import React, { type FC, useState } from 'react'
 import Divider from '../../Divider.js'
 import type { Installation } from '../InstallationType.js'
+import type { Item as CustomOptionsItem } from '../OptionalPackages.js'
 import CustomInstallation from './CustomInstallation.js'
 import FullInstallation from './FullInstallation.js'
 
 interface Props {
-  installation: Installation | undefined
+  installation: {
+    installationType: Installation | undefined
+    customOptions?: Array<CustomOptionsItem>
+  }
   projectName: string
   onCompletion: () => void
 }
 
 const Install: FC<Props> = ({ projectName, onCompletion, installation }) => {
+  const { installationType, customOptions } = installation
   const projectDir = join(process.cwd(), projectName)
   const [canInstall, setCanInstall] = useState(false)
 
   return (
     <>
-      <Divider title={`Performing ${installation ?? 'full'} installation`} />
+      <Divider title={`Performing ${installation.installationType ?? 'full'} installation`} />
       <Box
         flexDirection={'column'}
         gap={0}
@@ -50,16 +55,22 @@ const Install: FC<Props> = ({ projectName, onCompletion, installation }) => {
             onCompletion={() => setCanInstall(true)}
           />
         </Script>
-        {canInstall && installation === 'full' ? (
-          <FullInstallation
-            projectName={projectName}
-            onCompletion={() => console.log()}
-          />
-        ) : (
-          <CustomInstallation
-            projectName={projectName}
-            onCompletion={() => console.log()}
-          />
+        {canInstall && (
+          <>
+            {installationType === 'full' && (
+              <FullInstallation
+                projectName={projectName}
+                onCompletion={onCompletion}
+              />
+            )}
+            {installationType === 'custom' && (
+              <CustomInstallation
+                installationPackages={customOptions}
+                projectName={projectName}
+                onCompletion={onCompletion}
+              />
+            )}
+          </>
         )}
       </Box>
     </>