Desenvolvendo um input de <Telephone />: um exemplo de design de software eficiente

Neste post, vamos explicar um pouco sobre um input de telefone que foi desenvolvido utilizando o kuba, um framework Javascript que segue os princípios de design de software. Vamos dar uma olhada no código e entender suas partes.

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} [phone]' },
          { 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, 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.