Ayla Components

Ayla-components é uma biblioteca feita com intuito privado, não existe nenhuma iniciativa para que seu desenvolvimento seja voltado para uso geral por terceiros, mesmo tendo seu código aberto ao público.

Ayla Components é uma construção de um design system com web components que utiliza o Stencil para facilitar a construção, a biblioteca é divida da seguinte forma:

Começando

Nuxt 2:

para a instalação da biblioteca se faz necessário a utilização de uma biblioteca adicional que irá adicionar a biblioteca ayla-components como módulo no nuxt2.

• 1º: instale as dependências com os seguintes comandos:

  npm install ayla-components nuxt-stencil

• 2º: abra o arquivo nuxt.config.js
  • 2.1º: adicione o nuxt-stencil dentro de modules

      {
        modules: [
          nuxt-stencil
        ]
      }

  • 2.2º: no mesmo arquivo crie uma nova chave com as seguintes configurações:

    stencil: {
      lib: 'ayla-components',
      prefix: 'ayla-',
      renderOptions: {},
      hydratePath: 'ayla-components/hydrate',
      loaderPath: 'ayla-components/loader',
      ignoredElements: null
    }

esses são os unicos passos necessários.

Vue3:

Para a sua utilização no vue3 não existe a necessidade de instalação de bibliotecas adicionais.

• 1º: instale as dependências com os seguintes comandos:

  npm install ayla-components

• 2º: abra o arquivo main.js e adicione o seguinte código:

import { defineCustomElements, applyPolyfills } from 'ayla-components/loader'

applyPolyfills().then(() => {
  defineCustomElements(window)
})

esse código deve ser inserido antes do createApp e app.mount.

Desenvolvimento

O que eu preciso saber para criar um componente e submeter a um pull request ?

IMPORTANTE: se faz necessário instalar os hooks do husky executando o comando:

npm run husky:install

Classificação dos componetes: os componentes são classificados em duas categorias e todo o restante é construido como módulo.

Tipos de componentes:

• componente de produto: Os componentes de produto são componentes que podem depender de um ou mais componentes, que possuem lógica complexa devido a atender as necessidades de produto como um header, um menu com várias opções, esses componentes devem ser criados dentro da pasta src/components.

• componente puro: Os componentes puros são caracterizados por não depender de nenhum outro componente e o seu uso não depende da lógica do produto como por exemplo componentes como botões, chips.

Módulos:

• Os módulos são responsáveis por lógicas globais, como por exemplo: Tradução, Emissão de eventos, consumo de recursos HTTP, WebSocket. Todos os módulos são distribuidos através de uma Facade a facade deve ser construida como uma interface simples para interfaces mais complexas, sem necessitar de instruções de montagem desnecessárias e pode estender poucas funcionalidades, em geral o padrão deve seguir como um caminho e não como o meio de implementação.

Testes

• Os testes devem ser escritos sem excessão, os testes de componentes devem utilizar a biblioteca padrão de testes do stencil que possui integração com o jest, enquanto os módulos devem seguir a regra comum.

  Critérios de aceite:

  • Correto:
    • Testes de componentes que preveem comportamentos como um clique de botão, esses triggers devem ser disparados simulando o clique no elemento.
    • Todos os testes devem cobrir as branchs isso significa que caso exista um if em sua função esse if e o else devem ser testados.
  • Incorreto:
    • Em suma maioria NÃO deve ser testado componentes através do HTML, somente em casos que não exista outro meio possível.

  Através do package.json é possível destinguir qual teste deve ser executado em ambos os casos.

  OBS: Nos testes de módulo ocorrem warnings devido a versão do jest, porém a mesma não deve ser atualizada devido a compatibilidade com os testes de componentes.

Consumindo Módulos

Todos os módulos devem ser consumidos através da Facade visando o encapsulamento, mesmo sendo possível consumir por outra via, qualquer código que não consumir o Facade será considerado incorreto.

Workflow

1: Crie uma branch a partir de main

2: Insira as suas atualizações

3: execute um git pull origin main, para atualizar sua branch caso algum código novo tenha sido empurrado.

4: a partir desse ponto, você prossegue o ritmo normal mandando sua branch para o repositorio remoto e realizando o pull request.