[21] Componente Input
[21] Componente Input
🔗 Task 21 [FE] | Componente Input
➕ O que foi adicionado?
Componente de input genérico.
🔧 O que foi modificado?
Adicionado dependências ao projeto incluindo mui (Material UI), jest, emotion, entre outras dependências.
❌ O que foi removido?
Nada.
🧪 Como testar?
<InputShowcase /> pode ser adicionado a page.tsx para visualizar no navegador.
Unit tests: npx vitest Input --coverage --coverage.include="**/components/input/Input.tsx"
❗ Informações adicionais
Props
- onChange = {e => setValue(e.target.value)} // Optional, function
- value = {value} // Only for useState, don't use directly
- name = "Name" // Optional, string
- id = "id-input" // Optional, string
- variant = 'outlined' // Optional (default: outlined), 'outlined' | 'filled' | 'standard'
- height = {40} // Optional (default: 40), number
- type = "text" // Optional (defalut: "text"), 'text' | 'password' | 'email' | 'tel' | 'date' | 'time' | 'datetime-local' | 'search'
- required = {true} // Optional (default: false), boolean
- placeholder = "Placeholder" // Mandatory, string
- disabled = {false} // Optional (default: false), boolean
- label = "Label" // Optional, string
- error = "Error message" // Optional, string
- startIcon = {} // Optional, icon element https://mui.com/material-ui/material-icons/
- endIcon = {} // Optional, icon element
📷 Screenshots
