From 339242cc05a4ace41ff87e02eeb5e3d413ef3360 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Fri, 7 Jun 2024 21:32:01 +0900
Subject: [PATCH] feat(cli): add Divider and SearchBox components

A Divider and a SearchBox component have been added to the CLI. The Divider is a simple component for displaying a horizontal line. The SearchBox takes a list of components as props and provides a live search functionality, showing suggestions for user inputs.
---
 packages/cli/src/components/Divider.tsx   | 24 ++++++++++++
 packages/cli/src/components/SearchBox.tsx | 45 +++++++++++++++++++++++
 2 files changed, 69 insertions(+)
 create mode 100644 packages/cli/src/components/Divider.tsx
 create mode 100644 packages/cli/src/components/SearchBox.tsx

diff --git a/packages/cli/src/components/Divider.tsx b/packages/cli/src/components/Divider.tsx
new file mode 100644
index 0000000..28b8274
--- /dev/null
+++ b/packages/cli/src/components/Divider.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import {Box, Text} from 'ink'
+
+export function Divider({width = 50, padding = 1, title}: {width?: number; padding?: number; title: string}) {
+  const length = Math.floor((width - title.length - padding * 2) / 2)
+
+  return (
+    <Box>
+      {Array.from(Array(length)).map((_, i) => (
+        <Text key={i}>─</Text>
+      ))}
+      {Array.from(Array(padding)).map((_, i) => (
+        <Text key={i}> </Text>
+      ))}
+      <Text>{title}</Text>
+      {Array.from(Array(padding)).map((_, i) => (
+        <Text key={i}> </Text>
+      ))}
+      {Array.from(Array(length)).map((_, i) => (
+        <Text key={i}>─</Text>
+      ))}
+    </Box>
+  )
+}
diff --git a/packages/cli/src/components/SearchBox.tsx b/packages/cli/src/components/SearchBox.tsx
new file mode 100644
index 0000000..61b5c20
--- /dev/null
+++ b/packages/cli/src/components/SearchBox.tsx
@@ -0,0 +1,45 @@
+import React, {useEffect, useState} from 'react'
+import {getSuggestion} from '../helpers/search.js'
+import Input from 'ink-text-input'
+import {Divider} from './Divider.js'
+import Spinner from 'ink-spinner'
+import {Box, Text} from 'ink'
+
+export function SearchBox({components}: {components: string[]}) {
+  const [query, setQuery] = useState<string>('')
+  const [isLoading, setLoading] = useState<boolean>(false)
+  const [suggestions, setSuggestions] = useState<string[]>([])
+
+  useEffect(() => {
+    setLoading(true)
+    getSuggestion(components, query).then((result) => {
+      setSuggestions(result)
+      setLoading(false)
+    })
+  }, [query])
+
+  return (
+    <Box width={50} display={'flex'} flexDirection={'column'} columnGap={4}>
+      <Box display={'flex'} flexDirection={'row'}>
+        <Box marginRight={2}>
+          <Text color={'greenBright'}>?</Text>
+        </Box>
+        <Input value={query} onChange={(v) => setQuery(v)} />
+      </Box>
+      <Divider title={isLoading ? 'Loading...' : `${suggestions.length} components found.`} />
+      {isLoading ? (
+        <Spinner />
+      ) : (
+        <Box display={'flex'} flexDirection={'column'} columnGap={1}>
+          {suggestions.map((name) => {
+            return (
+              <Box borderStyle={'round'} key={name}>
+                <Text>{name}</Text>
+              </Box>
+            )
+          })}
+        </Box>
+      )}
+    </Box>
+  )
+}