# 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: ``` (): │ │ │ │ │ └─⫸ 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)