npm package: @logcomex/aylawc
Description: Aylawc is a design system library developed by logcomex
Latest version: 1.0.8

# Ayla Components

<i>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.</i>

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:

<ul>
  <li>Componentes de produtos: TAG = ayla-product-<b>[NOME DO COMPONENTE]</b></li>
  <li>Componentes puros: TAG = ayla-<b>[NOME DO COMPONENTE]</b></li>
  <li>Módulos: os módulos são usados nos componentes e podem ser integrados nos projetos, os módulos possuem responsabilidades secundárias como por exemplo: Tradução, consumo de recursos HTTP, Eventos e Etc.
</ul>

# 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.

- <b>1º</b>: instale as dependências com os seguintes comandos:
```bash
  npm install ayla-components nuxt-stencil
```

- <b>2º</b>: abra o arquivo <b>nuxt.config.js</b><br>
  - <b>2.1º</b>: adicione o nuxt-stencil dentro de modules
    ```js
      {
        modules: [
          nuxt-stencil
        ]
      }
    ```
  - <b>2.2º</b>: no mesmo arquivo crie uma nova chave com as seguintes      configurações:
    ```js
    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.

- <b>1º</b>: instale as dependências com os seguintes comandos:
```bash
  npm install ayla-components
```
- <b>2º</b>: abra o arquivo main.js e adicione o seguinte código:
```js
import { defineCustomElements, applyPolyfills } from 'ayla-components/loader'

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

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

<br/>
<br/>

# Desenvolvimento
<i>O que eu preciso saber para criar um componente e submeter a um pull request ?</i>

<strong>IMPORTANTE: </strong>se faz necessário instalar os hooks do husky executando o comando:
```bash
npm run husky:install
```

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

<i>Tipos de componentes</i>:
- 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.

<i>Módulos</i>:
- 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 <b>Facade</b> 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.

<br/>

## 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.

  <b>Critérios de aceite</b>:<br>
  - 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.
  
  <br/>
  Atualmente existem 2 metódos de testes, sendo um utilizado para os componentes e o segundo para os módulos, o segundo meio foi adicionado devido a impossibilidade de execução do coverage em testes que não sejam de componentes.

  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.