Bibliteca de componentes EzUI

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.

O EzUI foi baseado no UiKit 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.

• 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
• Diretrizes de codificação
• Diretrizes de componentização
• Diretrizes de documentação
• Link ente projetos
• Definindo bons data-element-id de testabilidade no design system
• Criando exemplos de componentes