Egutierrez
5a824c2eee
75 components + DESIGN_SYSTEM.md + sync script. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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: []
|
|
uses_types: []
|
|
returns: []
|
|
returns_optional: false
|
|
error_type: ""
|
|
imports: ["@mantine/core", "@tabler/icons-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)
|