refactor: put everything under the /source file

Author: gabitoesmiapodo

source/components/Ask.tsx

@@ -0,0 +1,57 @@
+import { Box, Text } from 'ink'
+import TextInput from 'ink-text-input'
+import React, { type FC, useMemo, useState } from 'react'
+import { isAnswerConfirmed } from '../utils/utils.js'
+
+interface Props {
+  answer?: string
+  errorMessage?: string
+  onSubmit: (value: string) => void
+  question: string
+  tip?: string
+  placeholder?: string
+}
+
+const Ask: FC<Props> = ({ question, onSubmit, answer, tip, errorMessage, placeholder }) => {
+  const [input, setInput] = useState('')
+  const answered = useMemo(() => isAnswerConfirmed(answer, errorMessage), [answer, errorMessage])
+
+  return (
+    <Box
+      flexDirection={'column'}
+      rowGap={1}
+    >
+      <Box flexDirection={'column'}>
+        <Box>
+          <Text color={'whiteBright'}>{question}: </Text>
+          {answered ? (
+            <Text
+              bold
+              color={'green'}
+            >
+              {answer}
+            </Text>
+          ) : (
+            <TextInput
+              onChange={setInput}
+              onSubmit={onSubmit}
+              placeholder={placeholder}
+              value={input}
+            />
+          )}
+        </Box>
+        {tip && <Text color={'gray'}>{tip}</Text>}
+      </Box>
+      {errorMessage && (
+        <Text
+          bold
+          color={'red'}
+        >
+          {errorMessage}
+        </Text>
+      )}
+    </Box>
+  )
+}
+
+export default Ask

source/components/Divider.tsx

@@ -0,0 +1,12 @@
+import BaseDivider from 'ink-divider'
+import React, { type FC } from 'react'
+
+const Divider: FC<{ title: string }> = ({ title }) => (
+  <BaseDivider
+    titlePadding={2}
+    titleColor={'whiteBright'}
+    title={title}
+  />
+)
+
+export default Divider

source/components/MainTitle.tsx

@@ -0,0 +1,15 @@
+import BigText from 'ink-big-text'
+import Gradient from 'ink-gradient'
+import React, { type FC } from 'react'
+
+const MainTitle: FC = () => (
+  <Gradient colors={['#ff438c', '#bb1d79', '#8b46a4', '#6a2581']}>
+    <BigText
+      lineHeight={1}
+      font={'chrome'}
+      text="dAppBooster"
+    />
+  </Gradient>
+)
+
+export default MainTitle

source/components/Multiselect/MultiSelect.tsx

@@ -0,0 +1,131 @@
+import { Box, useInput } from 'ink'
+import React, { useCallback, useState } from 'react'
+import CheckBox from './components/Checkbox.js'
+import Indicator from './components/Indicator.js'
+import ItemComponent from './components/Item.js'
+
+type Item<T> = {
+  label: string
+  value: T
+  key?: string | number
+}
+
+type MultiSelectProps<T> = {
+  items: Item<T>[]
+  defaultSelected?: Item<T>[]
+  focus?: boolean
+  initialIndex?: number
+  indicatorComponent?: React.FC<{ isHighlighted: boolean }>
+  checkboxComponent?: React.FC<{ isSelected: boolean }>
+  itemComponent?: React.FC<{ isHighlighted: boolean; label: string }>
+  limit?: number | null
+  onSelect?: (selectedItem: Item<T>) => void
+  onUnselect?: (unselectedItem: Item<T>) => void
+  onSubmit?: (selectedItems: Item<T>[]) => void
+  onHighlight?: (highlightedItem: Item<T>) => void
+}
+
+const MultiSelect = <T,>({
+  items = [],
+  defaultSelected = [],
+  focus = true,
+  initialIndex = 0,
+  indicatorComponent = Indicator,
+  checkboxComponent = CheckBox,
+  itemComponent = ItemComponent,
+  limit = null,
+  onSelect = () => {},
+  onUnselect = () => {},
+  onSubmit = () => {},
+  onHighlight = () => {},
+}: MultiSelectProps<T>) => {
+  const [highlightedIndex, setHighlightedIndex] = useState(initialIndex)
+  const [selectedItems, setSelectedItems] = useState(defaultSelected)
+
+  const hasLimit = limit !== null && limit < items.length
+
+  const slicedItems = hasLimit ? items.slice(0, limit) : items
+
+  const includesItems = useCallback((item: Item<T>, selectedItems: Item<T>[]) => {
+    return (
+      selectedItems.filter(
+        (selectedItem) => selectedItem.value === item.value && selectedItem.label === item.label,
+      ).length > 0
+    )
+  }, [])
+
+  const handleSelect = useCallback(
+    (item: Item<T>) => {
+      if (includesItems(item, selectedItems)) {
+        const newSelectedItems = selectedItems.filter(
+          (selectedItem) => selectedItem.value !== item.value && selectedItem.label !== item.label,
+        )
+        setSelectedItems(newSelectedItems)
+        onUnselect(item)
+      } else {
+        const newSelectedItems = [...selectedItems, item]
+        setSelectedItems(newSelectedItems)
+        onSelect(item)
+      }
+    },
+    [selectedItems, onSelect, onUnselect, includesItems],
+  )
+
+  const handleSubmit = useCallback(() => {
+    onSubmit(selectedItems)
+  }, [selectedItems, onSubmit])
+
+  useInput(
+    useCallback(
+      (input, key) => {
+        if (key.upArrow) {
+          setHighlightedIndex((prevIndex) => {
+            const index = prevIndex === 0 ? slicedItems.length - 1 : prevIndex - 1
+            // biome-ignore lint/style/noNonNullAssertion: <explanation>
+            onHighlight(slicedItems[index]!)
+            return index
+          })
+        } else if (key.downArrow) {
+          setHighlightedIndex((prevIndex) => {
+            const index = prevIndex === slicedItems.length - 1 ? 0 : prevIndex + 1
+            // biome-ignore lint/style/noNonNullAssertion: <explanation>
+            onHighlight(slicedItems[index]!)
+            return index
+          })
+        } else if (key.return) {
+          handleSubmit()
+        } else if (input === ' ') {
+          // biome-ignore lint/style/noNonNullAssertion: <explanation>
+          handleSelect(slicedItems[highlightedIndex]!)
+        }
+      },
+      [onHighlight, handleSelect, handleSubmit, slicedItems, highlightedIndex],
+    ),
+    { isActive: focus },
+  )
+
+  return (
+    <Box flexDirection="column">
+      {slicedItems.map((item, index) => {
+        const key = item.key || item.label
+        const isHighlighted = index === highlightedIndex
+        const isSelected = includesItems(item, selectedItems)
+
+        return (
+          <Box key={key}>
+            {React.createElement(indicatorComponent, { isHighlighted })}
+            {React.createElement(checkboxComponent, { isSelected })}
+            {React.createElement(itemComponent, {
+              ...item,
+              isHighlighted,
+            })}
+          </Box>
+        )
+      })}
+    </Box>
+  )
+}
+
+export default MultiSelect
+
+export { Indicator, ItemComponent, CheckBox, type Item }

source/components/Multiselect/components/Checkbox.tsx

@@ -0,0 +1,17 @@
+import figures from 'figures'
+import { Box, Text } from 'ink'
+import React from 'react'
+
+type CheckBoxProps = {
+  isSelected: boolean
+}
+
+const CheckBox = ({ isSelected = false }: CheckBoxProps) => (
+  <Box marginRight={1}>
+    <Text color={isSelected ? 'green' : 'white'}>
+      {isSelected ? figures.circleFilled : figures.circle}
+    </Text>
+  </Box>
+)
+
+export default CheckBox

source/components/Multiselect/components/Indicator.tsx

@@ -0,0 +1,15 @@
+import figures from 'figures'
+import { Box, Text } from 'ink'
+import React from 'react'
+
+type IndicatorProps = {
+  isHighlighted: boolean
+}
+
+const Indicator = ({ isHighlighted = false }: IndicatorProps) => (
+  <Box marginRight={1}>
+    <Text color={isHighlighted ? 'green' : undefined}>{isHighlighted ? figures.pointer : ' '}</Text>
+  </Box>
+)
+
+export default Indicator

source/components/Multiselect/components/Item.tsx

@@ -0,0 +1,18 @@
+import { Text } from 'ink'
+import React from 'react'
+
+type ItemProps = {
+  isHighlighted: boolean
+  label: string
+}
+
+const Item = ({ isHighlighted = false, label }: ItemProps) => (
+  <Text
+    color={isHighlighted ? 'green' : 'white'}
+    bold={isHighlighted}
+  >
+    {label}
+  </Text>
+)
+
+export default Item

source/components/Multiselect/index.ts

@@ -0,0 +1 @@
+export { default, type Item, Indicator, CheckBox, ItemComponent } from './MultiSelect.js'

source/components/steps/CloneRepo/CloneRepo.tsx

@@ -0,0 +1,26 @@
+import React, { type FC } from 'react'
+import Divider from '../../Divider.js'
+import Commands from './Commands.js'
+
+interface Props {
+  projectName: string
+  onCompletion: () => void
+}
+
+/**
+ * Step for cloning the repository.
+ * @param projectName
+ * @param onCompletion
+ * @constructor
+ */
+const CloneRepo: FC<Props> = ({ projectName, onCompletion }) => (
+  <>
+    <Divider title={'Git tasks'} />
+    <Commands
+      projectName={projectName}
+      onCompletion={onCompletion}
+    />
+  </>
+)
+
+export default CloneRepo

source/components/steps/CloneRepo/Commands.tsx

@@ -0,0 +1,84 @@
+import { join } from 'node:path'
+import * as process from 'node:process'
+import { Box, Text } from 'ink'
+import { Script, Spawn } from 'ink-spawn'
+import React, { type FC } from 'react'
+import { repoUrl } from '../../../constants/config.js'
+
+interface Props {
+  projectName: string
+  onCompletion: () => void
+}
+
+/**
+ * Executes all the commands to clone the dAppBooster repository.
+ * @param projectName
+ * @param onCompletion
+ */
+const Commands: FC<Props> = ({ projectName, onCompletion }) => {
+  const projectFolder = join(process.cwd(), projectName)
+
+  return (
+    <Box
+      flexDirection={'column'}
+      gap={0}
+    >
+      <Script>
+        <Box columnGap={1}>
+          <Text color={'whiteBright'}>Cloning dAppBooster in</Text>
+          <Text italic>{projectName}</Text>
+        </Box>
+        <Spawn
+          shell
+          silent
+          successText={'Done!'}
+          failureText={`Failed to clone the project, check if a folder called "${projectName}" already exists and your read/write permissions...`}
+          runningText={'Working...'}
+          command="git"
+          args={['clone', '--depth', '1', '--no-checkout', repoUrl, projectName]}
+        />
+        <Text color={'whiteBright'}>Fetching tags</Text>
+        <Spawn
+          shell
+          cwd={projectFolder}
+          silent
+          command={'git'}
+          args={['fetch', '--tags']}
+          runningText={'Working...'}
+          successText={'Done!'}
+          failureText={'Error...'}
+        />
+        <Text color={'whiteBright'}>Checking out latest tag</Text>
+        <Spawn
+          shell
+          cwd={projectFolder}
+          command="git"
+          args={['checkout $(git describe --tags `git rev-list --tags --max-count=1`)']}
+          successText="Done!"
+          failureText={'Error...'}
+        />
+        <Text color={'whiteBright'}>Removing .git folder</Text>
+        <Spawn
+          shell
+          cwd={projectFolder}
+          command="rm"
+          args={['-rf', '.git']}
+          successText="Done!"
+          failureText={'Error...'}
+        />
+        <Text color={'whiteBright'}>Initializing Git repository</Text>
+        <Spawn
+          shell
+          cwd={projectFolder}
+          command="git"
+          args={['init']}
+          successText="Done!"
+          failureText={'Error...'}
+          onCompletion={onCompletion}
+        />
+      </Script>
+    </Box>
+  )
+}
+
+export default Commands