Desenvolvendo um input de <Telephone />: um exemplo de design de software eficiente
Tags: webcomponents, javascript, html, css
Published: 2023-03-28 11:51:05

Neste post, vamos explicar um pouco sobre um input de telefone que foi desenvolvido utilizando o [kuba](https://github.com/deMGoncalves/kuba), um framework Javascript que segue os princípios de design de software. Vamos dar uma olhada no código e entender suas partes.

```javascript
import * as filter from '@kuba/filter'
import * as validator from '@kuba/validator'
import { paint, repaint } from '@kuba/h'
import component from './component'
import imask from '@kuba/imask'

@paint(component)
@imask
class Telephone {
  #state
  #value

  get state () {
    return (this.#state ??= '')
  }

  get value () {
    return (this.#value ??= '')
  }

  constructor (props) {
    this.#value = props.value
  }

  @filter.value
  @validator.required
  onChange (value) {
    this.#value = value
    return this
  }

  [imask.settings] () {
    return {
      element: this[paint.rootElement]().querySelector('input'),
      options: {
        mask: [
          { mask: '+{55} (00) 0000-0000' },
          { mask: '+{55} (00) 0 0000-0000' }
        ]
      }
    }
  }

  @repaint
  [validator.outlet] (state) {
    this.#state = state
    return this
  }
}

export default Telephone
```

O código começa com a importação dos módulos `filter`, `validator`, `h`, e `imask`. Esses módulos são usados para implementar algumas funcionalidades do [kuba](https://github.com/deMGoncalves/kuba), como validação de dados, renderização de componentes e formatação de campos.

Em seguida, temos a definição da classe `Telephone`, que é um componente de input de telefone. Essa classe é decorada com o adivice `paint` e `imask`. O adivice `paint` é usada para renderizar o `componente`, enquanto o adivice `imask` é usada para aplicar a máscara de telefone no campo de input.

A classe `Telephone` possui dois fields privados: `#state` e `#value`. O field `#state` é usada para armazenar o estado do componente, enquanto o field `#value` é usada para armazenar o valor do campo de input.

A classe também possui dois getters: `state` e `value`. O getter `state` retorna o estado atual do componente, enquanto o getter `value` retorna o valor atual do campo de input.

O construtor da classe recebe um objeto de propriedades como argumento e inicializa o field `#value` com o valor passado nas propriedades.

Em seguida, temos o method `onChange`, que é decorado com as adivice `filter.value` e `validator.required`. O método é executado sempre que o valor do campo de input é alterado. O método atualiza o field `#value` com o novo valor e retorna a instância da classe.

O method `[imask.settings]` retorna as configurações de máscara para o campo de input. Esse método é chamado automaticamente pelo `imask` sempre que a classe é renderizada.

Por fim, temos o method `[validator.outlet]`, que é decorado com o adivice `repaint`. Esse método é chamado toda vez que o estado do componente é alterado pelo validador. Ele atualiza o estado do componente com o valor recebido do `validador` e chama o adivice `repaint`, que é responsável por atualizar a renderização do componente.

Agora que vimos como o componente `Telephone` foi construído, vamos entender como ele funciona na prática. Quando utilizamos o componente em nosso projeto, podemos passar uma propriedade chamada `value` que irá inicializar o estado do componente. Essa propriedade é acessada no construtor da classe e armazenada field privado `#value`.

Em seguida, temos o method `onChange`, que é decorado com os adivices `@filter.value` e `@validator.required`. Esses adivices são responsáveis por filtrar e validar o valor digitado no campo de telefone. O adivice `@filter.value` repassa o value do target, enquanto adivice `@validator.required` é usada para verificar se o value não está vazio.

Por fim, temos o methods `[imask.settings]`, que é responsável por configurar a máscara no campo de telefone. O objeto de configuração contém a referência ao elemento HTML do campo de telefone e as opções de máscara.

Por fim, o method `[validator.outlet]` é decorado com a função `@repaint`. Esse adivice é chamado toda vez que o estado do componente é atualizado pelo validador e é responsável por atualizar a renderização do componente.

Em resumo, o componente `Telephone` é um exemplo prático de como os princípios de design de software podem ser aplicados em um projeto. Ele é construído de forma modular e fácil de entender, com funções específicas para cada responsabilidade e uma arquitetura limpa e organizada. Além disso, ele é altamente configurável e pode ser facilmente integrado em qualquer projeto.

Gostou do que viu neste post? Então, conheça o Kuba - um projeto código aberto para desenvolvimento front-end. Com o Kuba, você pode criar aplicativos modulares, reutilizáveis e escaláveis com facilidade. Ele possui pacotes para gerenciamento de estado, roteamento, validação de formulários e muito mais. Além disso, o Kuba é altamente personalizável e oferece uma experiência de desenvolvimento mais ágil. Saiba mais em [link para o Github do Kuba](https://github.com/deMGoncalves/kuba).