# Bibliteca de componentes EzUI

[![Build status](https://gitlab.sankhya.com.br/dti/design-system/ez-ui/badges/master/pipeline.svg)](https://gitlab.sankhya.com.br/dti/design-system/ez-ui/-/commits/master)

Esse projeto é constituído por um monorepo com a seguinte hierarquia:

```
--ez-ui
    -- package.json
    -- .storybook
    -- .storybook-dev
    -- src/components
        -- component1
        -- component2
    -- .gitlab-ci.yml
```

Observe que na raiz do ez-ui temos um packege.json que define as configurações de storybook para todos os componentes filhos dentro da hierarquia.
Cada subpasta (component1, component2) são componentes [Stencil](https://stenciljs.com/).

#### O EzUI foi baseado no [UiKit](https://xd.adobe.com/view/d45d91bf-f5a8-4814-899f-e781732807d1-810e/grid) disponibilizado pela equipe de UX da Sankhya.

## Executando o projeto
Para iniciar o projeto, basta ir até a pasta do componente que deseja testar (ex: ez-ui/component1) e executar o comando: `npm install && npm run dev`
Este procedimento irá iniciar um servidor do storybook para testar o componente. A porta que o servidor estará sendo executado é apresentada no console ao final do comando.

## Padrão de commit e merge request:
Hoje estamos utilizando o padrão de semantic release baseado no [angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular).
* A sintaxe pode ser observada logo abaixo:
```
<type>(<scope>): <short summary>
  │       │             │
  │       │             └─⫸ Summary in present tense. Not capitalized. No period at the end.
  │       │
  │       └─⫸ Commit Scope: animations|bazel|benchpress|common|compiler|compiler-cli|core|
  │                          elements|forms|http|language-service|localize|platform-browser|
  │                          platform-browser-dynamic|platform-server|router|service-worker|
  │                          upgrade|zone.js|packaging|changelog|dev-infra|docs-infra|migrations|
  │                          ngcc|ve
  │
  └─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|test
```

 - Na solicitação de merge request deve ter um titulo com o seguinte padrão: KB-11111 - Titulo  sugestivo da minha modificação, onde, KB-11111 é id do card do Kanbanize.

## Fontes notáveis
- **ez-ui/.storybook/***: Nessa pasta temos arquivos de configuração do storybook. Essa pasta é utilizada em ambiente de produção.
    * **ez-ui/.storybook/preview-head.html**: Esse arquivo é responsável por fazer o import de módulos dos webcomponents e dos styles globais da aplicação. Esse arquivo é utilizado em ambiente de produção.
- **ez-ui/.storybook-dev/***: Nessa pasta temos arquivos de configuração do storybook. Porém essa pasta é utilizada apenas em ambiente de desenvolvimento.
    * **ez-ui/.storybook-dev/preview-head.html**: Esse arquivo é responsável por fazer o import de módulos dos webcomponents e dos styles globais da aplicação apenas em ambiente de desenvolvimento. **É aqui que devemos incluir os scripts de novos componentes para serem apresentados no storybook.**
- **ez-ui/.diststorybook**: Esse diretório é gerado automáticamente pelo `Gulp` no momento que executamos o comando `npm run dev` na pasta de um componente. É nesse diretório que temos os arquivos estáticos utilizados pelo storybook. O `ez-ui/.storybook-dev/preview-head.html` mapeia os módulos de componentes a partir desse diretório. Nele também pode ser encontrado arquivos `.CSS` (temas) globais da aplicação.
- **ez-ui/.gitlab-ci.yml**: Esse é o arquivo responsável pelo pipeline do projeto, nele você vai encontrar:
    *  Definição de stages: Por conta da dependência entre projetos, é importante a ordem com que a publicação dos componentes é feita no NPM, para isso definimos stages para cada componente, eles são utilizados nos jobs de deploy para que seja respeitada a ordem de publicação.
    *  Implementação dos jobs: build, test, deploy e storybook.

## Comandos NPM
- `npm run dev`: Esse comando foi criado com o intuito de facilitar a criação de novos componentes, em paralelo é executado três comandos: `storybook`, `build.watch` e `gulp`. Eles tem como objetivo principal subir um servidor do storybook e monitorar alterações nos componentes. Quando as alterações acontecerem, automaticamente o página do storybook é atualizada.
- `npm run storybook`: Esse comando inicia um servidor do storybook com os seguintes parâmetros:
    - `.storybook-dev`: pasta onde estão as configurações do storybook.
    - `.diststorybook`: pasta onde estão os arquivos estáticos utilizados pelo storybook.
- `npm run build.watch`: Esse comando tem o papel de iniciar o build dos componentes e monitorar alterações nos mesmo, caso ocorra alguma, o build dos componentes é executado e os arquivos são colocados na pasta /dist.
- `npm run gulp`: Utilizamos o gulp para automatizar as tarefas de desenvolvimento no projeto, essa task tem como principal tarefa, monitorar alterações na pasta /dist e realizar a cópia dos arquivos para a pasta /.diststorybook. No Gulp file temos as seguintes tasks:
    *  `watch`: Monitora alterações no diretório /dist fazendo a cópia dos mesmos para a pasta .diststorybook/
    *  `watch-global-css`: Monitora depedência @sankhyalabs/ez-design e realiza a cópia dos arquivos pra a pasta .diststorybook/themes/
    *  `css-docs`: Monitora arquivos de CSS e SASS do projeto e, quando houver alterações, é gerada a documentação referente a temas.
- `npm run link`: Esse comando deve ser utilizado em ambiente de desenvolvimento, ele facilita o build e o link entre os projetos ezui e react-output, executando em um só comando:
o build do ezui, link do react-output e ezui, build do react-output e a disponibilização da dist do react-output no diretório correto do ezui.
- `npm run build`

## Para conhecer detalhes do projeto acesse:
- [Olá EZUi](https://gitlab.sankhya.com.br/dti/design-system/ez-ui/-/wikis/Ol%C3%A1-EzUI)
- [Diretrizes de codificação](https://gitlab.sankhya.com.br/dti/design-system/ez-ui/-/wikis/Diretrizes-de-codifica%C3%A7%C3%A3o)
- [Diretrizes de componentização](https://gitlab.sankhya.com.br/dti/design-system/ez-ui/-/wikis/Diretrizes-de-componentiza%C3%A7%C3%A3o)
- [Diretrizes de documentação](https://gitlab.sankhya.com.br/dti/design-system/ez-ui/-/wikis/Diretrizes-de-documenta%C3%A7%C3%A3o)
- [Link ente projetos](https://gitlab.sankhya.com.br/dti/design-system/ez-ui/-/wikis/Link-ente-projetos)
- [Definindo bons data-element-id de testabilidade no design system](https://gitlab.sankhya.com.br/dti/design-system/ez-ui/-/wikis/Definindo-bons-data-element-id-de-testabilidade-no-design-system)
- [Criando exemplos de componentes](https://gitlab.sankhya.com.br/dti/design-system/ez-ui/-/wikis/Criando-exemplos-de-componentes) 
