Egutierrez
5a824c2eee
75 components + DESIGN_SYSTEM.md + sync script. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
103 lines
2.7 KiB
Markdown
103 lines
2.7 KiB
Markdown
---
|
|
name: file_input
|
|
kind: component
|
|
lang: ts
|
|
domain: ui
|
|
version: "1.0.0"
|
|
purity: impure
|
|
signature: "FileInput(props: FileInputProps): JSX.Element"
|
|
description: "Input de archivos con soporte para múltiples archivos, tipos aceptados y botón de limpiar. Wrapper sobre Mantine FileInput."
|
|
tags: [file, upload, input, form, component, ui, interactive, mantine]
|
|
uses_functions: []
|
|
uses_types: []
|
|
returns: []
|
|
returns_optional: false
|
|
error_type: ""
|
|
imports: ["@mantine/core"]
|
|
tested: false
|
|
tests: []
|
|
test_file_path: ""
|
|
file_path: "frontend/functions/ui/file_input.tsx"
|
|
framework: react
|
|
has_state: true
|
|
emits: [onChange]
|
|
props:
|
|
- name: multiple
|
|
type: "boolean"
|
|
required: false
|
|
description: "Permite seleccionar múltiples archivos"
|
|
- name: accept
|
|
type: "string"
|
|
required: false
|
|
description: "Tipos MIME o extensiones aceptadas (ej: 'image/*', '.pdf,.docx')"
|
|
- name: clearable
|
|
type: "boolean"
|
|
required: false
|
|
description: "Muestra botón para limpiar el archivo seleccionado"
|
|
- name: value
|
|
type: "File | File[] | null"
|
|
required: false
|
|
description: "Valor controlado del input"
|
|
- name: onChange
|
|
type: "(value: File | File[] | null) => void"
|
|
required: false
|
|
description: "Callback que se dispara al seleccionar o limpiar un archivo"
|
|
- name: placeholder
|
|
type: "string"
|
|
required: false
|
|
description: "Texto mostrado cuando no hay archivo seleccionado"
|
|
- name: label
|
|
type: "string"
|
|
required: false
|
|
description: "Etiqueta visible sobre el input"
|
|
- name: disabled
|
|
type: "boolean"
|
|
required: false
|
|
description: "Deshabilita el input"
|
|
- name: size
|
|
type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
|
|
required: false
|
|
description: "Tamaño del componente"
|
|
params:
|
|
- name: props
|
|
desc: "Props de FileInput: archivo(s) seleccionado(s), tipos aceptados, modo múltiple, estado controlado y apariencia"
|
|
output: "Componente FileInput que renderiza input para selección de archivos con preview del nombre"
|
|
---
|
|
|
|
## Ejemplo
|
|
|
|
```tsx
|
|
import { FileInput } from '@fn_library'
|
|
|
|
// Archivo único
|
|
<FileInput
|
|
label="Subir documento"
|
|
placeholder="Selecciona un archivo"
|
|
clearable
|
|
/>
|
|
|
|
// Múltiples archivos
|
|
<FileInput
|
|
label="Subir archivos"
|
|
placeholder="Selecciona uno o varios archivos"
|
|
multiple
|
|
clearable
|
|
/>
|
|
|
|
// Solo imágenes
|
|
<FileInput
|
|
label="Subir imagen"
|
|
placeholder="Selecciona una imagen"
|
|
accept="image/*"
|
|
clearable
|
|
/>
|
|
```
|
|
|
|
## Notas
|
|
|
|
Wrapper directo sobre `FileInput` de `@mantine/core`. Acepta todas las props de Mantine sin restricciones.
|
|
|
|
Para `multiple: true`, el tipo de `value` y `onChange` cambia a `File[] | null` automáticamente gracias al tipado genérico de Mantine.
|
|
|
|
El prop `clearable` añade un ícono de X que permite vaciar la selección sin reabrir el explorador de archivos.
|