@logcomex/aylawc NPM

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.