@sankhyalabs/ezui 2.3.2 → 2.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -17
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://git.sankhya.com.br/sankhyalabs/ez-ui/-/commits/master)
|
|
4
4
|
|
|
5
|
-
Esse projeto é
|
|
5
|
+
Esse projeto é constituído por um monorepo com a seguinte hierarquia:
|
|
6
6
|
|
|
7
7
|
```
|
|
8
8
|
--ez-ui
|
|
@@ -15,18 +15,18 @@ Esse projeto é constituido por um monorepo com a seguinte hierarquia.
|
|
|
15
15
|
-- .gitlab-ci.yml
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
-
Observe que na raiz
|
|
19
|
-
Cada subpasta (component1,
|
|
18
|
+
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.
|
|
19
|
+
Cada subpasta (component1, component2) são componentes [Stencil](https://stenciljs.com/).
|
|
20
20
|
|
|
21
|
-
#### O EzUI foi baseado no UiKit
|
|
21
|
+
#### 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.
|
|
22
22
|
|
|
23
23
|
## Executando o projeto
|
|
24
|
-
Para iniciar o projeto, basta ir até a pasta do componente que deseja testar (ex: ez-ui/component1)
|
|
24
|
+
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`
|
|
25
25
|
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.
|
|
26
26
|
|
|
27
27
|
## Padrão de commit e merge request:
|
|
28
28
|
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).
|
|
29
|
-
* A
|
|
29
|
+
* A sintaxe pode ser observada logo abaixo:
|
|
30
30
|
```
|
|
31
31
|
<type>(<scope>): <short summary>
|
|
32
32
|
│ │ │
|
|
@@ -46,22 +46,24 @@ Hoje estamos utilizando o padrão de semantic release baseado no [angular](https
|
|
|
46
46
|
## Fontes notáveis
|
|
47
47
|
|
|
48
48
|
- **ez-ui/.storybook/***: Nessa pasta temos arquivos de configuração do storybook. Essa pasta é utilizada em ambiente de produção.
|
|
49
|
-
* **ez-ui/.storybook/preview-head.html**: Esse arquivo é
|
|
50
|
-
- **ez-ui/.storybook-dev/***: Nessa pasta temos arquivos de configuração do storybook.
|
|
51
|
-
* **ez-ui/.storybook-dev/preview-head.html**: Esse arquivo é
|
|
52
|
-
- **ez-ui/.diststorybook**: Esse diretório é gerado automáticamente pelo
|
|
53
|
-
- **ez-ui/.gitlab-ci.yml**: Esse é o arquivo
|
|
54
|
-
* Definição de stages: Por conta da
|
|
49
|
+
* **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.
|
|
50
|
+
- **ez-ui/.storybook-dev/***: Nessa pasta temos arquivos de configuração do storybook. Porém essa pasta é utilizada apenas em ambiente de desenvolvimento.
|
|
51
|
+
* **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.**
|
|
52
|
+
- **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.
|
|
53
|
+
- **ez-ui/.gitlab-ci.yml**: Esse é o arquivo responsável pelo pipeline do projeto, nele você vai encontrar:
|
|
54
|
+
* 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.
|
|
55
55
|
* Implementação dos jobs: build, test, deploy e storybook.
|
|
56
56
|
|
|
57
57
|
## Comandos NPM
|
|
58
|
-
- `npm run dev`: Esse comando foi criado com o intuito de facilitar a criação de novos componentes,
|
|
59
|
-
- `npm run storybook`: Esse comando inicia um servidor do storybook
|
|
58
|
+
- `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.
|
|
59
|
+
- `npm run storybook`: Esse comando inicia um servidor do storybook com os seguintes parâmetros:
|
|
60
|
+
- `.storybook-dev`: pasta onde estão as configurações do storybook.
|
|
61
|
+
- `.diststorybook`: pasta onde estão os arquivos estáticos utilizados pelo storybook.
|
|
60
62
|
- `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.
|
|
61
|
-
- `npm run gulp`: Utilizamos o gulp para automatizar as tarefas de desenvolvimento no projeto, essa task tem como principal tarefa
|
|
62
|
-
* `watch`:
|
|
63
|
+
- `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:
|
|
64
|
+
* `watch`: Monitora alterações no diretório /dist fazendo a cópia dos mesmos para a pasta .diststorybook/
|
|
63
65
|
* `watch-global-css`: Monitora depedência @sankhyalabs/ez-design e realiza a cópia dos arquivos pra a pasta .diststorybook/themes/
|
|
64
|
-
* `css-docs`: Monitora arquivos de CSS e SASS do projeto, quando houver alterações
|
|
66
|
+
* `css-docs`: Monitora arquivos de CSS e SASS do projeto e, quando houver alterações, é gerada a documentação referente a temas.
|
|
65
67
|
- `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:
|
|
66
68
|
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.
|
|
67
69
|
- `npm run build`
|
|
@@ -72,3 +74,5 @@ o build do ezui, link do react-output e ezui, build do react-output e a disponib
|
|
|
72
74
|
- [Diretrizes de codificação](https://git.sankhya.com.br/sankhyalabs/ez-ui/-/wikis/Diretrizes-de-codifica%C3%A7%C3%A3o)
|
|
73
75
|
- [Diretrizes de componentização](https://git.sankhya.com.br/sankhyalabs/ez-ui/-/wikis/Diretrizes-de-componentiza%C3%A7%C3%A3o)
|
|
74
76
|
- [Diretrizes de documentação](https://git.sankhya.com.br/sankhyalabs/ez-ui/-/wikis/Diretrizes-de-documenta%C3%A7%C3%A3o)
|
|
77
|
+
- [Link ente projetos](https://git.sankhya.com.br/sankhyalabs/ez-ui/-/wikis/Link-ente-projetos)
|
|
78
|
+
- [Definindo bons data-element-id de testabilidade no design system](https://git.sankhya.com.br/sankhyalabs/ez-ui/-/wikis/Definindo-bons-data-element-id-de-testabilidade-no-design-system)
|