@becompliancebr/shared-components 1.0.0 → 1.0.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 +214 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,24 +1,229 @@
|
|
|
1
|
-
#
|
|
1
|
+
# 📚 Biblioteca de Componentes Compartilhados
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Esta é uma biblioteca de componentes Vue.js compartilhados, utilizada nos projetos da Be.compliance. O objetivo é promover o reuso de código, manter a consistência de UI/UX e agilizar o desenvolvimento.
|
|
4
|
+
|
|
5
|
+
## 📖 Índice
|
|
6
|
+
|
|
7
|
+
- [📚 Biblioteca de Componentes Compartilhados](#-biblioteca-de-componentes-compartilhados)
|
|
8
|
+
- [📖 Índice](#-índice)
|
|
9
|
+
- [🚀 Instalação](#-instalação)
|
|
10
|
+
- [🔄 Atualizando a Biblioteca](#-atualizando-a-biblioteca)
|
|
11
|
+
- [✨ Como Usar](#-como-usar)
|
|
12
|
+
- [🧩 Componentes Disponíveis](#-componentes-disponíveis)
|
|
13
|
+
- [💻 Desenvolvimento](#-desenvolvimento)
|
|
14
|
+
- [🧪 Testando Localmente com `yarn link`](#-testando-localmente-com-yarn-link)
|
|
15
|
+
- [✅ Qualidade de Código](#-qualidade-de-código)
|
|
16
|
+
- [🤝 Como Contribuir](#-como-contribuir)
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## 🚀 Instalação
|
|
21
|
+
|
|
22
|
+
Para usar estes componentes em seu projeto, instale o pacote via Yarn.
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
yarn add @becompliancebr/shared-components
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
**Passo 2: Configure o `main.js`**
|
|
29
|
+
|
|
30
|
+
Para que os componentes sejam registrados globalmente na sua aplicação, você precisará importar e usar a biblioteca no seu arquivo `main.js`:
|
|
31
|
+
|
|
32
|
+
```javascript
|
|
33
|
+
import SharedComponents from 'shared-components';
|
|
34
|
+
|
|
35
|
+
Vue.use(SharedComponents);
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
**Passo 3: Configure o `vuetify.js`**
|
|
39
|
+
|
|
40
|
+
Para que os componentes compartilhados funcionem corretamente com o Vuetify, você precisa mesclar as opções do Vuetify da biblioteca compartilhada. Modifique seu arquivo `src/plugins/vuetify.js` da seguinte forma:
|
|
41
|
+
|
|
42
|
+
```javascript
|
|
43
|
+
import Vue from "vue";
|
|
44
|
+
import Vuetify from "vuetify";
|
|
45
|
+
import pt from "vuetify/es5/locale/pt";
|
|
46
|
+
import SharedComponents from "shared-components"; // <-- Adicione esta linha
|
|
47
|
+
|
|
48
|
+
Vue.use(Vuetify);
|
|
49
|
+
|
|
50
|
+
const opts = {
|
|
51
|
+
lang: {
|
|
52
|
+
locales: { pt },
|
|
53
|
+
current: "pt",
|
|
54
|
+
},
|
|
55
|
+
...SharedComponents.vuetifyOpts, // <-- Adicione esta linha
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
export default new Vuetify(opts);
|
|
4
59
|
```
|
|
5
|
-
|
|
60
|
+
|
|
61
|
+
## 🔄 Atualizando a Biblioteca
|
|
62
|
+
|
|
63
|
+
Para garantir que você está usando a versão mais recente da biblioteca, execute o seguinte comando no seu projeto:
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
yarn upgrade shared-components
|
|
6
67
|
```
|
|
7
68
|
|
|
8
|
-
|
|
69
|
+
## ✨ Como Usar
|
|
70
|
+
|
|
71
|
+
Os componentes são registrados globalmente, então você pode usá-los diretamente nos seus templates Vue sem a necessidade de importação local.
|
|
72
|
+
|
|
73
|
+
**Exemplo:**
|
|
74
|
+
|
|
75
|
+
```vue
|
|
76
|
+
<template>
|
|
77
|
+
<div>
|
|
78
|
+
<BeBtn>Clique Aqui</BeBtn>
|
|
79
|
+
<BeCardWrapper title="Meu Card">
|
|
80
|
+
<p>Este é um card compartilhado.</p>
|
|
81
|
+
</BeCardWrapper>
|
|
82
|
+
</div>
|
|
83
|
+
</template>
|
|
9
84
|
```
|
|
10
|
-
|
|
85
|
+
|
|
86
|
+
## 🧩 Componentes Disponíveis
|
|
87
|
+
|
|
88
|
+
Abaixo está a lista de todos os componentes disponíveis na biblioteca:
|
|
89
|
+
|
|
90
|
+
- `BeActionMenu`
|
|
91
|
+
- `BeAutocompleteMultiple`
|
|
92
|
+
- `BeAutocompleteSingle`
|
|
93
|
+
- `BeBarChart`
|
|
94
|
+
- `BeBreadcrumbs`
|
|
95
|
+
- `BeBtn`
|
|
96
|
+
- `BeCardItem`
|
|
97
|
+
- `BeCardWrapper`
|
|
98
|
+
- `BeCheckbox`
|
|
99
|
+
- `BeChip`
|
|
100
|
+
- `BeCombobox`
|
|
101
|
+
- `BeContainer`
|
|
102
|
+
- `BeCountCard`
|
|
103
|
+
- `BeDatePicker`
|
|
104
|
+
- `BeDefaultCard`
|
|
105
|
+
- `BeFileActions`
|
|
106
|
+
- `BeFileField`
|
|
107
|
+
- `BeFileMultiple`
|
|
108
|
+
- `BeFileSingle`
|
|
109
|
+
- `BeFormExpansionPanel`
|
|
110
|
+
- `BeFormSection`
|
|
111
|
+
- `BeHelper`
|
|
112
|
+
- `BeHelperTooltip`
|
|
113
|
+
- `BeIconTooltip`
|
|
114
|
+
- `BeLineChart`
|
|
115
|
+
- `BeListCard`
|
|
116
|
+
- `BeMenuPopover`
|
|
117
|
+
- `BeModalBase`
|
|
118
|
+
- `BeModalConfirm`
|
|
119
|
+
- `BeModalMessage`
|
|
120
|
+
- `BePageTitle`
|
|
121
|
+
- `BePagination`
|
|
122
|
+
- `BePaginationChip`
|
|
123
|
+
- `BePieChart`
|
|
124
|
+
- `BeProgressCircular`
|
|
125
|
+
- `BeScatterChart`
|
|
126
|
+
- `BeSelectField`
|
|
127
|
+
- `BeSwitch`
|
|
128
|
+
- `BeTableFilter`
|
|
129
|
+
- `BeTableHeader`
|
|
130
|
+
- `BeTextArea`
|
|
131
|
+
- `BeTextInfoIcon`
|
|
132
|
+
- `BeTextTruncate`
|
|
133
|
+
- `BeTextfield`
|
|
134
|
+
- `BeTitleBar`
|
|
135
|
+
- `BeViewTitle`
|
|
136
|
+
|
|
137
|
+
## 💻 Desenvolvimento
|
|
138
|
+
|
|
139
|
+
Para rodar o projeto localmente para desenvolvimento e testes:
|
|
140
|
+
|
|
141
|
+
1. **Clone o repositório:**
|
|
142
|
+
|
|
143
|
+
```bash
|
|
144
|
+
git clone <repository-url>
|
|
145
|
+
cd shared-components
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
2. **Instale as dependências:**
|
|
149
|
+
|
|
150
|
+
```bash
|
|
151
|
+
yarn install
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
3. **Inicie o servidor de desenvolvimento:**
|
|
155
|
+
|
|
156
|
+
```bash
|
|
157
|
+
yarn serve
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
Isso iniciará um servidor local (normalmente em `http://localhost:8080`) onde você pode ver os componentes em ação.
|
|
161
|
+
|
|
162
|
+
### 🧪 Testando Localmente com `yarn link`
|
|
163
|
+
|
|
164
|
+
Para testar as alterações dos componentes compartilhados diretamente em outros projetos (como `compliance` ou `lgpd`) sem precisar publicar uma nova versão, você pode usar o `yarn link`.
|
|
165
|
+
|
|
166
|
+
**Passo 1: No diretório `shared-components`**
|
|
167
|
+
|
|
168
|
+
Crie um link simbólico global para a sua biblioteca de componentes. Execute este comando na raiz do projeto `shared-components`:
|
|
169
|
+
|
|
170
|
+
```bash
|
|
171
|
+
yarn link
|
|
11
172
|
```
|
|
12
173
|
|
|
13
|
-
|
|
174
|
+
**Passo 2: No diretório do projeto de destino (ex: `compliance`)**
|
|
175
|
+
|
|
176
|
+
Agora, vá para o diretório do projeto onde você deseja usar a versão local da biblioteca e vincule-o ao pacote que você acabou de linkar globalmente:
|
|
177
|
+
|
|
178
|
+
```bash
|
|
179
|
+
yarn link "@becompliancebr/shared-components"
|
|
14
180
|
```
|
|
181
|
+
|
|
182
|
+
Agora, o projeto de destino usará a sua versão local de `shared-components`.
|
|
183
|
+
|
|
184
|
+
**Importante:** Para que as alterações tenham efeito no projeto de destino, você precisará compilar a biblioteca após cada mudança. Rode o comando abaixo no `shared-components`:
|
|
185
|
+
|
|
186
|
+
```bash
|
|
15
187
|
yarn build
|
|
16
188
|
```
|
|
17
189
|
|
|
18
|
-
|
|
190
|
+
> ⚠️ **Atenção:** Não comite os arquivos gerados pelo processo de build (como a pasta `dist`) no seu branch de feature. Esses arquivos são destinados apenas para o processo de publicação e não devem fazer parte do controle de versão do dia a dia.
|
|
191
|
+
|
|
192
|
+
**Para remover o link:**
|
|
193
|
+
|
|
194
|
+
Quando terminar de testar, você pode remover o link executando o seguinte comando no projeto de destino:
|
|
195
|
+
|
|
196
|
+
```bash
|
|
197
|
+
yarn unlink "@becompliancebr/shared-components"
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
E para remover o link global, execute no diretório `shared-components`:
|
|
201
|
+
|
|
202
|
+
```bash
|
|
203
|
+
yarn unlink
|
|
19
204
|
```
|
|
205
|
+
|
|
206
|
+
## ✅ Qualidade de Código
|
|
207
|
+
|
|
208
|
+
Este projeto usa **ESLint** para análise estática de código e **Prettier** para formatação. As regras são aplicadas automaticamente a cada commit usando Husky e lint-staged.
|
|
209
|
+
|
|
210
|
+
Para rodar o linter manualmente:
|
|
211
|
+
|
|
212
|
+
```bash
|
|
20
213
|
yarn lint
|
|
21
214
|
```
|
|
22
215
|
|
|
23
|
-
|
|
24
|
-
|
|
216
|
+
## 🤝 Como Contribuir
|
|
217
|
+
|
|
218
|
+
Contribuições são muito bem-vindas! Por favor, siga os passos abaixo:
|
|
219
|
+
|
|
220
|
+
1. **Crie uma nova branch** para sua feature ou correção a partir da `main`.
|
|
221
|
+
|
|
222
|
+
```bash
|
|
223
|
+
git checkout -b feature/meu-novo-componente
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
2. **Faça suas alterações.** Adicione seu novo componente ou corrija um bug.
|
|
227
|
+
3. **Adicione documentação** para qualquer componente novo ou mudança significativa.
|
|
228
|
+
4. **Garanta que todos os testes passem** e que o linter não aponte erros.
|
|
229
|
+
5. **Envie sua branch** e abra um Pull Request para a `main`.
|