feat: custom packages selection / removal

Author: gabitoesmiapodo

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

@@ -1,15 +1,120 @@
-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'
+import { featurePackages } from '../../../constants/config.js'
 import type { Item as CustomOptionsItem } from '../OptionalPackages.js'
 
 interface Props {
-  installationPackages?: Array<CustomOptionsItem>
+  customOptions?: Array<CustomOptionsItem>
   onCompletion: () => void
   projectName: string
 }
 
-const CustomInstallation: FC<Props> = ({ projectName, onCompletion, installationPackages }) => (
-  <Text>Custom Installation!</Text>
-)
+/**
+ * Performs a custom installation based on the selected features: basically we tell `pnpm` what
+ * features to remove (everything's included in package.json by default to simplify things)
+ * @param projectName
+ * @param onCompletion
+ * @param customOptions
+ */
+const CustomInstallation: FC<Props> = ({ projectName, onCompletion, customOptions }) => {
+  const projectDir = join(process.cwd(), projectName)
+
+  /**
+   * Selected features won't be removed, unselected features will be.
+   * @param feature
+   * @param featuresList
+   */
+  const featureSelected = (feature: string, featuresList: Array<CustomOptionsItem> | undefined) => {
+    return !!featuresList?.find((item: CustomOptionsItem) => item.value === feature)
+  }
+
+  /**
+   * Returns the packages to remove checking first if the feature is selected or not.
+   * Selected features are kept, unselected features are removed.
+   * @param feature
+   */
+  const getPackages = (feature: string) => {
+    const packages = featurePackages[feature]
+
+    return featureSelected(feature, customOptions) ? [] : packages?.length ? packages : []
+  }
+
+  const demoSupport = featureSelected('demo', customOptions)
+  const subgraphSupport = featureSelected('subgraph', customOptions)
+  const typedocSupport = featureSelected('typedoc', customOptions)
+  const vocsSupport = featureSelected('vocs', customOptions)
+  const huskySupport = featureSelected('husky', customOptions)
+
+  const packagesToRemove = [
+    ...getPackages('subgraph'),
+    ...getPackages('typedoc'),
+    ...getPackages('vocs'),
+    ...getPackages('husky'),
+  ]
+    .join(' ')
+    .trim()
+
+  return (
+    <Box
+      flexDirection={'column'}
+      gap={0}
+    >
+      <Text color={'whiteBright'}>demo selected: {demoSupport ? 'true' : 'false'}</Text>
+      <Text color={'whiteBright'}>subgraph selected: {subgraphSupport ? 'true' : 'false'}</Text>
+      <Text color={'whiteBright'}>typedoc selected: {typedocSupport ? 'true' : 'false'}</Text>
+      <Text color={'whiteBright'}>vocs selected: {vocsSupport ? 'true' : 'false'}</Text>
+      <Text color={'whiteBright'}>husky selected: {huskySupport ? 'true' : 'false'}</Text>
+      {!packagesToRemove ? (
+        <Script>
+          {/* If there are no packages to remove simply install everything... */}
+          <Text color={'whiteBright'}>Installing packages</Text>
+          <Spawn
+            shell
+            cwd={projectDir}
+            silent
+            command={'pnpm'}
+            args={['i']}
+            runningText={'Working...'}
+            successText={'Done!'}
+            failureText={'Error...'}
+            onCompletion={onCompletion}
+          />
+        </Script>
+      ) : (
+        <Script>
+          {/* `pnpm remove` will install the necessary packages while uninstalling the unwanted ones... */}
+          <Text color={'whiteBright'}>Installing packages</Text>
+          <Spawn
+            shell
+            cwd={projectDir}
+            // silent
+            command={'pnpm'}
+            args={['remove', packagesToRemove]}
+            // runningText={'Working...'}
+            // successText={'Done!'}
+            // failureText={'Error...'}
+            // onCompletion={onCompletion}
+          />
+          {/* ... but it won't run the post-install script, so we run the post-install scripts manually */}
+          <Text color={'whiteBright'}>Executing post-install scripts</Text>
+          <Spawn
+            shell
+            cwd={projectDir}
+            silent
+            command={'pnpm'}
+            args={['run', 'postinstall']}
+            runningText={'Working...'}
+            successText={'Done!'}
+            failureText={'Error...'}
+            // onCompletion={onCompletion}
+          />
+        </Script>
+      )}
+    </Box>
+  )
+}
 
 export default CustomInstallation

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

@@ -2,7 +2,7 @@ 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, useState } from 'react'
+import React, { type FC } from 'react'
 import Divider from '../../Divider.js'
 import type { Installation } from '../InstallationType.js'
 import type { Item as CustomOptionsItem } from '../OptionalPackages.js'
@@ -21,7 +21,6 @@ interface Props {
 const Install: FC<Props> = ({ projectName, onCompletion, installation }) => {
   const { installationType, customOptions } = installation
   const projectDir = join(process.cwd(), projectName)
-  const [canInstall, setCanInstall] = useState(false)
 
   return (
     <>
@@ -52,26 +51,21 @@ const Install: FC<Props> = ({ projectName, onCompletion, installation }) => {
             runningText={'Working...'}
             successText={'Done!'}
             failureText={'Error...'}
-            onCompletion={() => setCanInstall(true)}
           />
+          {installationType === 'full' && (
+            <FullInstallation
+              projectName={projectName}
+              onCompletion={onCompletion}
+            />
+          )}
+          {installationType === 'custom' && (
+            <CustomInstallation
+              customOptions={customOptions}
+              projectName={projectName}
+              onCompletion={onCompletion}
+            />
+          )}
         </Script>
-        {canInstall && (
-          <>
-            {installationType === 'full' && (
-              <FullInstallation
-                projectName={projectName}
-                onCompletion={onCompletion}
-              />
-            )}
-            {installationType === 'custom' && (
-              <CustomInstallation
-                installationPackages={customOptions}
-                projectName={projectName}
-                onCompletion={onCompletion}
-              />
-            )}
-          </>
-        )}
       </Box>
     </>
   )

source/import/components/steps/OptionalPackages.tsx

@@ -66,6 +66,7 @@ const OptionalPackages: FC<Props> = ({ onCompletion, onSubmit, installation }) =
     <>
       <Text color={'whiteBright'}>Choose optional packages</Text>
       <MultiSelect
+        defaultSelected={customPackages}
         focus={isFocused}
         items={customPackages}
         onSubmit={onHandleSubmit}