@govbr-ds/webcomponents 2.0.0-alpha.1 → 2.0.0-next.1
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 +104 -67
- package/dist/webcomponents.common.js +17032 -26968
- package/dist/webcomponents.common.js.map +1 -1
- package/dist/webcomponents.umd.js +17029 -26965
- package/dist/webcomponents.umd.js.map +1 -1
- package/dist/webcomponents.umd.min.js +1 -1
- package/dist/webcomponents.umd.min.js.map +1 -1
- package/package.json +67 -81
package/README.md
CHANGED
|
@@ -1,70 +1,115 @@
|
|
|
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
|
+
## Uso
|
|
20
19
|
|
|
21
|
-
|
|
20
|
+
Existem 2 maneiras de usar nossos Web Components:
|
|
22
21
|
|
|
23
|
-
|
|
22
|
+
- Pacote NPM
|
|
24
23
|
|
|
25
|
-
|
|
24
|
+
```bash
|
|
25
|
+
npm install --save @govbr-ds/webcomponents
|
|
26
|
+
```
|
|
26
27
|
|
|
27
|
-
|
|
28
|
+
Depois de instalada, importe a biblioteca de dentro da pasta *node_modules*:
|
|
28
29
|
|
|
29
|
-
|
|
30
|
+
```javascript
|
|
31
|
+
@import "node_modules/@govbr-ds/webcomponents/dist/webcomponents.umd.min.js"
|
|
32
|
+
```
|
|
30
33
|
|
|
31
|
-
|
|
34
|
+
- CDN
|
|
32
35
|
|
|
33
|
-
|
|
36
|
+
```html
|
|
37
|
+
<script src="https://unpkg.com/@govbr-ds/webcomponents@VERSÃO/dist/webcomponents.umd.min.js"></script>
|
|
38
|
+
```
|
|
34
39
|
|
|
35
|
-
|
|
40
|
+
> Troque **versão** pela versão do pacote que deseja
|
|
36
41
|
|
|
37
|
-
|
|
42
|
+
**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.
|
|
38
43
|
|
|
39
|
-
###
|
|
44
|
+
### Font Awesome e Fonte Rawline
|
|
40
45
|
|
|
41
|
-
|
|
46
|
+
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.
|
|
42
47
|
|
|
43
|
-
|
|
44
|
-
npm install --save @govbr-ds/webcomponents
|
|
45
|
-
```
|
|
48
|
+
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.
|
|
46
49
|
|
|
47
|
-
###
|
|
50
|
+
### Exemplos de uso
|
|
48
51
|
|
|
49
|
-
|
|
52
|
+
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.
|
|
50
53
|
|
|
51
|
-
|
|
52
|
-
|
|
54
|
+
## Estrutura de pastas
|
|
55
|
+
|
|
56
|
+
> Vamos explicar apenas as pastas/arquivos que são importantes para o entendimento do projeto e contribuição.
|
|
57
|
+
|
|
58
|
+
```markdown
|
|
59
|
+
/raiz
|
|
60
|
+
└───public
|
|
61
|
+
│ └───index.html
|
|
62
|
+
└───src
|
|
63
|
+
│ │───App.vue
|
|
64
|
+
│ │───main.js
|
|
65
|
+
│ │
|
|
66
|
+
│ │───library
|
|
67
|
+
│ │ │───lib.js
|
|
68
|
+
│ │ │───components
|
|
69
|
+
│ │ │───mixins
|
|
70
|
+
│ │ └───util
|
|
71
|
+
│ │───pages
|
|
72
|
+
│ │───router
|
|
73
|
+
│ └───stories
|
|
53
74
|
```
|
|
54
75
|
|
|
55
|
-
|
|
76
|
+
- **public/index.html**: página inicial da aplicação Vue que faz uso dos componentes da biblioteca.
|
|
77
|
+
- **src**
|
|
78
|
+
- **App.vue** e **main.js**: arquivos da aplicação Vue.
|
|
79
|
+
- **library**
|
|
80
|
+
- **lib.js**: inicializa todos os custom elements e define o que faz parte da biblioteca. É usado para fazer o build final.
|
|
81
|
+
- **components**: pasta com os componentes da biblioteca, seus testes e stories do storybook.
|
|
82
|
+
- **mixins**: mixins que são usados em vários componentes.
|
|
83
|
+
- **util**: funções criadas para facilitar ações dentro dos componentes
|
|
84
|
+
- **pages**: páginas da aplicação Vue. São os exemplos que usamos para testar
|
|
85
|
+
- **router**: arquivo com as rotas apontando para as páginas (pages) da aplicação Vue
|
|
86
|
+
- **stories**: Arquivos com as stories gerais do storybook
|
|
56
87
|
|
|
57
|
-
|
|
88
|
+
> 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
89
|
|
|
59
|
-
##
|
|
90
|
+
## Rodar o projeto na máquina local
|
|
60
91
|
|
|
61
|
-
|
|
92
|
+
Clone o projeto:
|
|
93
|
+
|
|
94
|
+
```bash
|
|
95
|
+
git clone git@gitlab.com:govbr-ds/dev/wbc/govbr-ds-wbc.git
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
Entre no diretório do projeto:
|
|
99
|
+
|
|
100
|
+
```bash
|
|
101
|
+
cd govbr-ds-wbc
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
Instale as dependências:
|
|
62
105
|
|
|
63
|
-
|
|
106
|
+
```bash
|
|
107
|
+
npm install
|
|
108
|
+
```
|
|
64
109
|
|
|
65
110
|
Para executar a nossa biblioteca a partir do código-fonte você tem 2 opções:
|
|
66
111
|
|
|
67
|
-
### Executar como VueJS
|
|
112
|
+
### Executar como VueJS Components
|
|
68
113
|
|
|
69
114
|
Nessa visualização você executa o projeto em uma página auxiliar (fora do storybook) e sem compilar o resultado para Web Components.
|
|
70
115
|
|
|
@@ -84,39 +129,23 @@ npm run storybook
|
|
|
84
129
|
|
|
85
130
|
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
131
|
|
|
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
|
|
132
|
+
## Documentação
|
|
104
133
|
|
|
105
|
-
|
|
134
|
+
Nossa documentação está disponível em <https://gov.br/ds/webcomponents/>.
|
|
106
135
|
|
|
107
|
-
|
|
108
|
-
npm run lint
|
|
109
|
-
```
|
|
136
|
+
## Contribuindo
|
|
110
137
|
|
|
111
|
-
|
|
138
|
+
Antes de abrir um Merge Request tenha em mente algumas informações:
|
|
112
139
|
|
|
113
|
-
|
|
140
|
+
- Esse é um projeto opensource e contribuições são bem-vindas.
|
|
141
|
+
- 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').
|
|
142
|
+
- Quer contribuir com o projeto? Confira o nosso guia [como contribuir](./CONTRIBUTING.md 'Como contribuir?').
|
|
114
143
|
|
|
115
|
-
|
|
144
|
+
### Reportar bugs/necessidades
|
|
116
145
|
|
|
117
146
|
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
147
|
|
|
119
|
-
Nos comprometemos a responder a todas as issues
|
|
148
|
+
Nos comprometemos a responder a todas as issues.
|
|
120
149
|
|
|
121
150
|
## Precisa de ajuda?
|
|
122
151
|
|
|
@@ -124,21 +153,29 @@ Nos comprometemos a responder a todas as issues
|
|
|
124
153
|
|
|
125
154
|
Use nossos canais abaixo para obter tirar suas dúvidas:
|
|
126
155
|
|
|
127
|
-
-
|
|
156
|
+
- Site do GovBR-DS <http://gov.br/ds>
|
|
128
157
|
|
|
129
|
-
-
|
|
158
|
+
- Web Components <https://gov.br/ds/webcomponents/>
|
|
130
159
|
|
|
131
|
-
-
|
|
160
|
+
- Pelo nosso email <govbr-ds@serpro.gov.br>
|
|
132
161
|
|
|
133
|
-
-
|
|
162
|
+
- Usando nosso canal no discord <https://discord.gg/U5GwPfqhUP>
|
|
134
163
|
|
|
135
|
-
|
|
164
|
+
## Commits
|
|
136
165
|
|
|
137
|
-
Nesse projeto usamos um padrão para branches e commits. Por favor observe a documentação na nossa [wiki](https://
|
|
166
|
+
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.
|
|
167
|
+
|
|
168
|
+
## Apêndice
|
|
169
|
+
|
|
170
|
+
### Polyfill
|
|
171
|
+
|
|
172
|
+
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.
|
|
173
|
+
|
|
174
|
+
Para aprender com instalar, consulte a [documentação oficial](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs 'Polyfills')
|
|
138
175
|
|
|
139
176
|
## Créditos
|
|
140
177
|
|
|
141
|
-
Os Web Components do [
|
|
178
|
+
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
179
|
|
|
143
180
|
## Licença
|
|
144
181
|
|