egutierrez
5f4f1f7508
Añade campos params y output al frontmatter YAML de las 506 funciones del registry. Cada parámetro tiene descripción semántica (qué representa, unidades, rango típico) y cada función describe qué produce su output. Permite a agentes razonar sobre cadenas de composición (ej: prices → log_return → sharpe_ratio) sin leer código.
73 lines
1.8 KiB
Markdown
73 lines
1.8 KiB
Markdown
---
|
|
name: search_bar
|
|
kind: component
|
|
lang: ts
|
|
domain: ui
|
|
version: "1.0.0"
|
|
purity: impure
|
|
signature: "SearchBar(props: SearchBarProps): JSX.Element"
|
|
description: "Search input with debounce, search icon, and clear button"
|
|
tags: [component, ui, search, input, debounce]
|
|
uses_functions: [cn_ts_core]
|
|
uses_types: []
|
|
returns: []
|
|
returns_optional: false
|
|
error_type: ""
|
|
imports: ["lucide-react"]
|
|
params:
|
|
- name: onSearch
|
|
desc: "Callback que se ejecuta con la query debounceada"
|
|
- name: placeholder
|
|
desc: "Placeholder del input (por defecto 'Search...')"
|
|
- name: debounceMs
|
|
desc: "Delay en milisegundos para el debounce (por defecto 300)"
|
|
output: "Componente SearchBar que renderiza input de búsqueda con icono y botón de limpiar"
|
|
tested: false
|
|
tests: []
|
|
test_file_path: ""
|
|
file_path: "frontend/functions/ui/search_bar.tsx"
|
|
props:
|
|
- name: onSearch
|
|
type: "(query: string) => void"
|
|
required: true
|
|
description: "Called with the debounced search query"
|
|
- name: placeholder
|
|
type: "string"
|
|
required: false
|
|
description: "Placeholder text (default: Search...)"
|
|
- name: debounceMs
|
|
type: "number"
|
|
required: false
|
|
description: "Debounce delay in ms (default: 300)"
|
|
- name: className
|
|
type: "string"
|
|
required: false
|
|
description: "Additional CSS classes"
|
|
emits: []
|
|
has_state: true
|
|
framework: react
|
|
variant: []
|
|
---
|
|
|
|
## Ejemplo
|
|
|
|
```tsx
|
|
import { SearchBar } from '@fn_library'
|
|
|
|
function MyPage() {
|
|
return (
|
|
<SearchBar
|
|
onSearch={(query) => console.log('search:', query)}
|
|
placeholder="Search entities..."
|
|
debounceMs={300}
|
|
/>
|
|
)
|
|
}
|
|
```
|
|
|
|
## Notas
|
|
|
|
- Debounce usa ref para evitar re-renders innecesarios del callback
|
|
- El icono de clear solo aparece cuando hay texto
|
|
- Usa CSS variables del tema para colores (border, input, foreground, muted-foreground)
|