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

@@ -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'} />)
+  }
+}

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>