GitLab

Título

FEAT-04 - Input

Descrição

Criação do componente de Input. A partir dos requisitos da HU e utilizando o componente Input do shadcn ui foi implementado um componente, um wrapper, na verdade, que possui os seguintes parâmetros:

{
      className,
      type      = "text",
      inputSize = "medium",
      error,
      label,
      disabled,
      readOnly,
      "aria-label": ariaLabel,
      onChange,
      ...props
    }

E implementa a seguinte interface:

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  inputSize?: "small" | "medium" | "large";
  error?: string;
  label?: string;
}

Abaixo, seguem diversos casos de uso do componente:

//-----------------------------------------------------
//Exemplos de Uso do Componente Input
//-----------------------------------------------------

//Uso básico
//Apenas importe e use com as configurações padrão (tamanho médio)
import { Input } from './components/Input';

 <Input placeholder="Digite o texto aqui" />


 -----------------------------------------------------
 Variações de Tamanho
 -----------------------------------------------------

 Input de tamanho pequeno
 <Input 
   inputSize="small"
   placeholder="Input pequeno"
   label="Input Pequeno"
 />

 Input de tamanho médio (padrão)
 <Input 
   inputSize="medium"  Este é o padrão, então você pode omiti-lo
   placeholder="Input médio"
   label="Input Médio"
 />

 Input de tamanho grande
 <Input 
   inputSize="large"
   placeholder="Input grande"
   label="Input Grande"
 />


 -----------------------------------------------------
 Tipos de Input
 -----------------------------------------------------

 Input de texto (padrão)
 <Input 
   type="text"
   placeholder="Input de texto"
   label="Texto"
 />

 Input de email
 <Input 
   type="email"
   placeholder="Input de email"
   label="Email"
 />

 Input de senha
 <Input 
   type="password"
   placeholder="Input de senha"
   label="Senha"
 />

 Input de número
 <Input 
   type="number"
   placeholder="Input de número"
   label="Número"
 />

 Input de data
 <Input 
   type="date"
   label="Data"
 />


 -----------------------------------------------------
 Estados
 -----------------------------------------------------

 Input desabilitado
 <Input 
   placeholder="Input desabilitado"
   label="Input Desabilitado"
   disabled={true}
 />

 Input somente leitura
 <Input 
   placeholder="Input somente leitura"
   label="Input Somente Leitura"
   readOnly={true}
   value="Este valor não pode ser alterado"
 />

 Input com mensagem de erro
 <Input 
   placeholder="Input com erro"
   label="Input com Erro"
   error="Este campo tem uma mensagem de erro"
 />

 Input obrigatório
 <Input 
   placeholder="Input obrigatório"
   label="Input Obrigatório"
   required={true}
 />


 -----------------------------------------------------
 Com Formulário e Gerenciamento de Estado
 -----------------------------------------------------

 Exemplo com estado do React e validação
 import React, { useState } from 'react';

 function ExemploFormulario() {
   const [email, setEmail] = useState('');
   const [emailError, setEmailError] = useState('');

   const validarEmail = (valor) => {
     const ehValido = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(valor);
     setEmailError(ehValido ? '' : 'Por favor, insira um endereço de email válido');
   };

   return (
     <form onSubmit={(e) => e.preventDefault()}>
       <Input 
         type="email"
         placeholder="Digite seu endereço de email"
         label="Endereço de Email"
         value={email}
         onChange={(e) => {
           setEmail(e.target.value);
           validarEmail(e.target.value);
         }}
         error={emailError}
         required
       />
       <button type="submit">Enviar</button>
     </form>
   );
 }

Telas com o componente

email-large

email-medium

email-small

number-large

password

text