@govbr-ds/webcomponents 2.0.0-alpha.1 → 2.0.0-next.2
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 +108 -67
- package/dist/webcomponents.common.js +20207 -27323
- package/dist/webcomponents.common.js.map +1 -1
- package/dist/webcomponents.umd.js +20204 -27320
- package/dist/webcomponents.umd.js.map +1 -1
- package/dist/webcomponents.umd.min.js +7 -1
- package/dist/webcomponents.umd.min.js.map +1 -1
- package/package.json +68 -81
package/README.md
CHANGED
|
@@ -1,70 +1,119 @@
|
|
|
1
|
-
# Web Components
|
|
1
|
+
# Web Components GovBR-DS
|
|
2
2
|
|
|
3
|
-
Biblioteca
|
|
4
|
-
|
|
5
|
-
## Objetivo
|
|
6
|
-
|
|
7
|
-
Construir uma biblioteca de componentes que faça uso das tecnologias de Web Components e que seja reutilizável em vários frameworks, bibliotecas e browsers.
|
|
3
|
+
Biblioteca baseada no [GovBR-DS](https://gov.br/ds 'GovBR-DS') e construída usando Web Components para ser independente de frameworks.
|
|
8
4
|
|
|
9
5
|
## Tecnologias
|
|
10
6
|
|
|
11
7
|
Esse projeto é desenvolvido usando:
|
|
12
8
|
|
|
13
|
-
1. [
|
|
14
|
-
|
|
15
|
-
|
|
9
|
+
1. [GovBR-DS](https://gov.br/ds/ 'GovBR-DS')
|
|
10
|
+
2. [Font Awesome](https://fontawesome.com/ 'Font Awesome')
|
|
11
|
+
3. [Fonte Rawline](https://www.cdnfonts.com/rawline.font/ 'Fonte Rawline')
|
|
12
|
+
4. [VueJS 3](https://v3.vuejs.org/ 'VueJS 3')
|
|
13
|
+
5. [Storybook](https://storybook.js.org/ 'Storybook')
|
|
14
|
+
6. [Jest](https://jestjs.io/ 'Jest')
|
|
16
15
|
|
|
17
|
-
Para saber mais detalhes sobre Web Components sugerimos que consulte o [MDN](https://developer.mozilla.org/pt-BR/docs/Web/Web_Components 'Web Components | MDN').
|
|
16
|
+
> Para saber mais detalhes sobre Web Components sugerimos que consulte o [MDN](https://developer.mozilla.org/pt-BR/docs/Web/Web_Components 'Web Components | MDN').
|
|
18
17
|
|
|
19
|
-
|
|
18
|
+
## Documentações Complementares
|
|
20
19
|
|
|
21
|
-
|
|
20
|
+
Consulte nossa a seção sobre Web Componente na nossa [Wiki](https://govbr-ds.gitlab.io/tools/wiki/hugo-cms/desenvolvimento/web-components) para obter mais informações.
|
|
22
21
|
|
|
23
|
-
|
|
22
|
+
## Uso
|
|
24
23
|
|
|
25
|
-
|
|
24
|
+
Existem 2 maneiras de usar nossos Web Components:
|
|
26
25
|
|
|
27
|
-
|
|
26
|
+
- Pacote NPM
|
|
28
27
|
|
|
29
|
-
|
|
28
|
+
```bash
|
|
29
|
+
npm install --save @govbr-ds/webcomponents
|
|
30
|
+
```
|
|
30
31
|
|
|
31
|
-
|
|
32
|
+
Depois de instalada, importe a biblioteca de dentro da pasta *node_modules*:
|
|
32
33
|
|
|
33
|
-
|
|
34
|
+
```javascript
|
|
35
|
+
@import "node_modules/@govbr-ds/webcomponents/dist/webcomponents.umd.min.js"
|
|
36
|
+
```
|
|
34
37
|
|
|
35
|
-
|
|
38
|
+
- CDN
|
|
36
39
|
|
|
37
|
-
|
|
40
|
+
```html
|
|
41
|
+
<script src="https://unpkg.com/@govbr-ds/webcomponents@VERSÃO/dist/webcomponents.umd.min.js"></script>
|
|
42
|
+
```
|
|
38
43
|
|
|
39
|
-
|
|
44
|
+
> Troque **versão** pela versão do pacote que deseja
|
|
40
45
|
|
|
41
|
-
|
|
46
|
+
**Importante**: O CDN <https://unpkg.com/> não é mantido por nossa equipe e portanto não podemos garantir um SLO. Considere importar os arquivos necessários para uma infraestrutura interna caso isso seja um impedimento para seu projeto.
|
|
42
47
|
|
|
43
|
-
|
|
44
|
-
npm install --save @govbr-ds/webcomponents
|
|
45
|
-
```
|
|
48
|
+
### Font Awesome e Fonte Rawline
|
|
46
49
|
|
|
47
|
-
|
|
50
|
+
Nossos componentes usam a [Fonte Rawline](https://www.cdnfonts.com/rawline.font/ 'Fonte Rawline') juntamente com a [Font Awesome](https://fontawesome.com/ 'Font Awesome') padrão do DS.
|
|
48
51
|
|
|
49
|
-
|
|
52
|
+
Consulte a documentação no site do [GovBR-DS](https://www.gov.br/ds/como-comecar/instalacao 'GovBR-DS') para mais detalhes sobre como importá-los de seus respectivos CDNs.
|
|
50
53
|
|
|
51
|
-
|
|
52
|
-
|
|
54
|
+
### Exemplos de uso
|
|
55
|
+
|
|
56
|
+
Disponibilizamos alguns exemplos de como usar esse projeto com algumas tecnologias. Consulte o [nosso grupo aqui no gitlab](https://gitlab.com/govbr-ds/dev/wbc 'GovBR-DS/DEV/WBC') e procure pelos projetos de 'Quickstart' para mais detalhes.
|
|
57
|
+
|
|
58
|
+
## Estrutura de pastas
|
|
59
|
+
|
|
60
|
+
> Vamos explicar apenas as pastas/arquivos que são importantes para o entendimento do projeto e contribuição.
|
|
61
|
+
|
|
62
|
+
```markdown
|
|
63
|
+
/raiz
|
|
64
|
+
└───public
|
|
65
|
+
│ └───index.html
|
|
66
|
+
└───src
|
|
67
|
+
│ │───App.vue
|
|
68
|
+
│ │───main.js
|
|
69
|
+
│ │
|
|
70
|
+
│ │───library
|
|
71
|
+
│ │ │───lib.js
|
|
72
|
+
│ │ │───components
|
|
73
|
+
│ │ │───mixins
|
|
74
|
+
│ │ └───util
|
|
75
|
+
│ │───pages
|
|
76
|
+
│ │───router
|
|
77
|
+
│ └───stories
|
|
53
78
|
```
|
|
54
79
|
|
|
55
|
-
|
|
80
|
+
- **public/index.html**: página inicial da aplicação Vue que faz uso dos componentes da biblioteca.
|
|
81
|
+
- **src**
|
|
82
|
+
- **App.vue** e **main.js**: arquivos da aplicação Vue.
|
|
83
|
+
- **library**
|
|
84
|
+
- **lib.js**: inicializa todos os custom elements e define o que faz parte da biblioteca. É usado para fazer o build final.
|
|
85
|
+
- **components**: pasta com os componentes da biblioteca, seus testes e stories do storybook.
|
|
86
|
+
- **mixins**: mixins que são usados em vários componentes.
|
|
87
|
+
- **util**: funções criadas para facilitar ações dentro dos componentes
|
|
88
|
+
- **pages**: páginas da aplicação Vue. São os exemplos que usamos para testar
|
|
89
|
+
- **router**: arquivo com as rotas apontando para as páginas (pages) da aplicação Vue
|
|
90
|
+
- **stories**: Arquivos com as stories gerais do storybook
|
|
56
91
|
|
|
57
|
-
|
|
92
|
+
> Aplicação Vue é uma aplicação criada para testar rapidamente nossos componentes. Ela não é disponibilizada no build e nem disponibilizamos um site com ela.
|
|
58
93
|
|
|
59
|
-
##
|
|
94
|
+
## Rodar o projeto na máquina local
|
|
60
95
|
|
|
61
|
-
|
|
96
|
+
Clone o projeto:
|
|
97
|
+
|
|
98
|
+
```bash
|
|
99
|
+
git clone git@gitlab.com:govbr-ds/dev/wbc/govbr-ds-wbc.git
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
Entre no diretório do projeto:
|
|
62
103
|
|
|
63
|
-
|
|
104
|
+
```bash
|
|
105
|
+
cd govbr-ds-wbc
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
Instale as dependências:
|
|
109
|
+
|
|
110
|
+
```bash
|
|
111
|
+
npm install
|
|
112
|
+
```
|
|
64
113
|
|
|
65
114
|
Para executar a nossa biblioteca a partir do código-fonte você tem 2 opções:
|
|
66
115
|
|
|
67
|
-
### Executar como VueJS
|
|
116
|
+
### Executar como VueJS Components
|
|
68
117
|
|
|
69
118
|
Nessa visualização você executa o projeto em uma página auxiliar (fora do storybook) e sem compilar o resultado para Web Components.
|
|
70
119
|
|
|
@@ -84,39 +133,23 @@ npm run storybook
|
|
|
84
133
|
|
|
85
134
|
Essa compilação pode demorar para refletir as alterações na página. Assim, recomendamos que utilizem primeiro a execução como VueJS durante o desenvolvimento e quando considerarem as alterações maduras o suficiente façam os testes como Web Components.
|
|
86
135
|
|
|
87
|
-
##
|
|
88
|
-
|
|
89
|
-
Gera o build da biblioteca dentro da pasta **dist**.
|
|
90
|
-
|
|
91
|
-
```node
|
|
92
|
-
npm run build
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
## Testes unitários
|
|
96
|
-
|
|
97
|
-
Executa os testes unitários e sava os resultados na pasta coverage.
|
|
98
|
-
|
|
99
|
-
```node
|
|
100
|
-
npm run test:unit
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
## Lints
|
|
136
|
+
## Documentação
|
|
104
137
|
|
|
105
|
-
|
|
138
|
+
Nossa documentação está disponível em <https://gov.br/ds/webcomponents/>.
|
|
106
139
|
|
|
107
|
-
|
|
108
|
-
npm run lint
|
|
109
|
-
```
|
|
140
|
+
## Contribuindo
|
|
110
141
|
|
|
111
|
-
|
|
142
|
+
Antes de abrir um Merge Request tenha em mente algumas informações:
|
|
112
143
|
|
|
113
|
-
|
|
144
|
+
- Esse é um projeto opensource e contribuições são bem-vindas.
|
|
145
|
+
- Para facilitar a aprovação da sua contribuição, escolha um título curto, simples e explicativo para o MR, e siga os padrões da nossa [wiki](https://gov.br/ds/wiki/ 'Wiki').
|
|
146
|
+
- Quer contribuir com o projeto? Confira o nosso guia [como contribuir](./CONTRIBUTING.md 'Como contribuir?').
|
|
114
147
|
|
|
115
|
-
|
|
148
|
+
### Reportar bugs/necessidades
|
|
116
149
|
|
|
117
150
|
Você pode usar as [issues](https://gitlab.com/govbr-ds/dev/wbc/govbr-ds-wbc/-/issues/new) para nos informar os problemas que tem enfrentado ao usar nossa biblioteca ou mesmo o que gostaria que fizesse parte do projeto. Por favor use o modelo que mais se encaixa na sua necessidade e preencha com o máximo de detalhes possível.
|
|
118
151
|
|
|
119
|
-
Nos comprometemos a responder a todas as issues
|
|
152
|
+
Nos comprometemos a responder a todas as issues.
|
|
120
153
|
|
|
121
154
|
## Precisa de ajuda?
|
|
122
155
|
|
|
@@ -124,21 +157,29 @@ Nos comprometemos a responder a todas as issues
|
|
|
124
157
|
|
|
125
158
|
Use nossos canais abaixo para obter tirar suas dúvidas:
|
|
126
159
|
|
|
127
|
-
-
|
|
160
|
+
- Site do GovBR-DS <http://gov.br/ds>
|
|
128
161
|
|
|
129
|
-
-
|
|
162
|
+
- Web Components <https://gov.br/ds/webcomponents/>
|
|
130
163
|
|
|
131
|
-
-
|
|
164
|
+
- Pelo nosso email <govbr-ds@serpro.gov.br>
|
|
132
165
|
|
|
133
|
-
-
|
|
166
|
+
- Usando nosso canal no discord <https://discord.gg/U5GwPfqhUP>
|
|
134
167
|
|
|
135
|
-
|
|
168
|
+
## Commits
|
|
136
169
|
|
|
137
|
-
Nesse projeto usamos um padrão para branches e commits. Por favor observe a documentação na nossa [wiki](https://
|
|
170
|
+
Nesse projeto usamos um padrão para branches e commits. Por favor observe a documentação na nossa [wiki](https://gov.br/ds/wiki/ 'Wiki') para aprender sobre os nossos padrões.
|
|
171
|
+
|
|
172
|
+
## Apêndice
|
|
173
|
+
|
|
174
|
+
### Polyfill
|
|
175
|
+
|
|
176
|
+
Caso os requisitos do seu projeto incluam navegadores que não suportam completamente os Web Components, adicione os [polyfills](https://www.webcomponents.org/polyfills) ao seu projeto.
|
|
177
|
+
|
|
178
|
+
Para aprender com instalar, consulte a [documentação oficial](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs 'Polyfills')
|
|
138
179
|
|
|
139
180
|
## Créditos
|
|
140
181
|
|
|
141
|
-
Os Web Components do [
|
|
182
|
+
Os Web Components do [GovBR-DS](https://gov.br/ds/ 'GovBR-DS') são criados pelo [SERPRO](https://www.serpro.gov.br/ 'SERPRO | Serviço Federal de Processamento de Dados') e [Dataprev](https://www.dataprev.gov.br/ 'Dataprev | Empresa de Tecnologia e Informações da Previdência') juntamente com a participação da comunidade.
|
|
142
183
|
|
|
143
184
|
## Licença
|
|
144
185
|
|