From 4319053d5d54165c21446087958647ac9c8ccc8b Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Fri, 7 Jun 2024 21:36:25 +0900
Subject: [PATCH] feat(cli): add search command
A new command has been added to the CLI package to search for components. This command fetches the registry and lists accessible components through the SearchBox component. The SearchBox component has also been updated to show a helper text and a new styled border for better user interaction.
---
packages/cli/src/commands/search.tsx | 24 +++++++++++++++++++++++
packages/cli/src/components/SearchBox.tsx | 5 +++--
2 files changed, 27 insertions(+), 2 deletions(-)
create mode 100644 packages/cli/src/commands/search.tsx
diff --git a/packages/cli/src/commands/search.tsx b/packages/cli/src/commands/search.tsx
new file mode 100644
index 0000000..b26e786
--- /dev/null
+++ b/packages/cli/src/commands/search.tsx
@@ -0,0 +1,24 @@
+import {Command} from '@oclif/core'
+import {render} from 'ink'
+import {SearchBox} from '../components/SearchBox.js'
+import {getAvailableComponentNames, getRegistry} from '../helpers/registry.js'
+import React from 'react'
+
+export default class Search extends Command {
+ static override description = 'Search components.'
+
+ static override examples = ['<%= config.bin %> <%= command.id %>']
+
+ static override flags = {}
+
+ public async run(): Promise<void> {
+ const registryResult = await getRegistry()
+ if (!registryResult.ok) {
+ this.error(registryResult.message)
+ }
+ const registry = registryResult.registry
+ const componentNames = await getAvailableComponentNames(registry)
+
+ render(<SearchBox components={componentNames} helper={'Press Ctrl+C to quit'} />)
+ }
+}
diff --git a/packages/cli/src/components/SearchBox.tsx b/packages/cli/src/components/SearchBox.tsx
index 61b5c20..049d009 100644
--- a/packages/cli/src/components/SearchBox.tsx
+++ b/packages/cli/src/components/SearchBox.tsx
@@ -5,7 +5,7 @@ import {Divider} from './Divider.js'
import Spinner from 'ink-spinner'
import {Box, Text} from 'ink'
-export function SearchBox({components}: {components: string[]}) {
+export function SearchBox({components, helper}: {components: string[]; helper: string}) {
const [query, setQuery] = useState<string>('')
const [isLoading, setLoading] = useState<boolean>(false)
const [suggestions, setSuggestions] = useState<string[]>([])
@@ -20,7 +20,8 @@ export function SearchBox({components}: {components: string[]}) {
return (
<Box width={50} display={'flex'} flexDirection={'column'} columnGap={4}>
- <Box display={'flex'} flexDirection={'row'}>
+ <Text color={'gray'}>{helper}</Text>
+ <Box display={'flex'} flexDirection={'row'} borderStyle={'double'}>
<Box marginRight={2}>
<Text color={'greenBright'}>?</Text>
</Box>