@becompliancebr/shared-components 1.0.0 → 1.1.0

package/README.md

@@ -1,24 +1,235 @@
-# shared-components
+# 📚 Biblioteca de Componentes Compartilhados
 
-## Project setup
+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.
+
+## 📖 Índice
+
+- [📚 Biblioteca de Componentes Compartilhados](#-biblioteca-de-componentes-compartilhados)
+  - [📖 Índice](#-índice)
+  - [🚀 Instalação](#-instalação)
+  - [🔄 Atualizando a Biblioteca](#-atualizando-a-biblioteca)
+  - [✨ Como Usar](#-como-usar)
+  - [🧩 Componentes Disponíveis](#-componentes-disponíveis)
+  - [💻 Desenvolvimento](#-desenvolvimento)
+    - [🧪 Testando Localmente com `yarn link`](#-testando-localmente-com-yarn-link)
+  - [✅ Qualidade de Código](#-qualidade-de-código)
+  - [🤝 Como Contribuir](#-como-contribuir)
+
+---
+
+## 🚀 Instalação
+
+Para usar estes componentes em seu projeto, instale o pacote via Yarn.
+
+```bash
+yarn add @becompliancebr/shared-components
 ```
-yarn install
+
+**Passo 2: Configure o `main.js`**
+
+Para que os componentes sejam registrados globalmente na sua aplicação, você precisará importar e usar a biblioteca no seu arquivo `main.js`:
+
+```javascript
+import SharedComponents from '@becompliancebr/shared-components';
+
+Vue.use(SharedComponents);
 ```
 
-### Compiles and hot-reloads for development
+**Passo 3: Configure o `vuetify.js`**
+
+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:
+
+```javascript
+import Vue from "vue";
+import Vuetify from "vuetify";
+import pt from "vuetify/es5/locale/pt";
+import SharedComponents from "@becompliancebr/shared-components"; // <-- Adicione esta linha
+
+Vue.use(Vuetify);
+
+const opts = {
+  lang: {
+    locales: { pt },
+    current: "pt",
+  },
+  ...SharedComponents.vuetifyOpts, // <-- Adicione esta linha
+};
+
+export default new Vuetify(opts);
 ```
-yarn serve
+
+## 🔄 Atualizando a Biblioteca
+
+Para garantir que você está usando a versão mais recente da biblioteca, execute o seguinte comando no seu projeto:
+
+```bash
+yarn upgrade @becompliancebr/shared-components
 ```
 
-### Compiles and minifies for production
+## ✨ Como Usar
+
+Os componentes são registrados globalmente, então você pode usá-los diretamente nos seus templates Vue sem a necessidade de importação local.
+
+**Exemplo:**
+
+```vue
+<template>
+  <div>
+    <BeBtn>Clique Aqui</BeBtn>
+    <BeCardWrapper title="Meu Card">
+      <p>Este é um card compartilhado.</p>
+    </BeCardWrapper>
+  </div>
+</template>
 ```
+
+## 🧩 Componentes Disponíveis
+
+Abaixo está a lista de todos os componentes disponíveis na biblioteca:
+
+- `BeActionMenu`
+- `BeAutocompleteMultiple`
+- `BeAutocompleteSingle`
+- `BeBarChart`
+- `BeBreadcrumbs`
+- `BeBtn`
+- `BeCardItem`
+- `BeCardWrapper`
+- `BeCheckbox`
+- `BeChip`
+- `BeCombobox`
+- `BeContainer`
+- `BeCountCard`
+- `BeDatePicker`
+- `BeDefaultCard`
+- `BeFileActions`
+- `BeFileField`
+- `BeFileMultiple`
+- `BeFileSingle`
+- `BeFormExpansionPanel`
+- `BeFormSection`
+- `BeHelper`
+- `BeHelperTooltip`
+- `BeIconTooltip`
+- `BeLineChart`
+- `BeListCard`
+- `BeMenuPopover`
+- `BeModalBase`
+- `BeModalConfirm`
+- `BeModalMessage`
+- `BePageTitle`
+- `BePagination`
+- `BePaginationChip`
+- `BePieChart`
+- `BeProgressCircular`
+- `BeScatterChart`
+- `BeSelectField`
+- `BeSwitch`
+- `BeTab`
+- `BeTableFilter`
+- `BeTableHeader`
+- `BeTabs`
+- `BeTabItem`
+- `BeTabsItems`
+- `BeTabsSlider`
+- `BeTextArea`
+- `BeTextInfoIcon`
+- `BeTextTruncate`
+- `BeTextfield`
+- `BeTitleBar`
+- `BeViewTitle`
+
+
+## 💻 Desenvolvimento
+
+Para rodar o projeto localmente para desenvolvimento e testes:
+
+1. **Clone o repositório:**
+
+   ```bash
+   git clone <repository-url>
+   cd shared-components
+   ```
+
+2. **Instale as dependências:**
+
+   ```bash
+   yarn install
+   ```
+
+3. **Inicie o servidor de desenvolvimento:**
+
+   ```bash
+   yarn serve
+   ```
+
+   Isso iniciará um servidor local (normalmente em `http://localhost:8080`) onde você pode ver os componentes em ação.
+
+### 🧪 Testando Localmente com `yarn link`
+
+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`.
+
+**Passo 1: No diretório `shared-components`**
+
+Crie um link simbólico global para a sua biblioteca de componentes. Execute este comando na raiz do projeto `shared-components`:
+
+```bash
+yarn link
+```
+
+**Passo 2: No diretório do projeto de destino (ex: `compliance`)**
+
+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:
+
+```bash
+yarn link "@becompliancebr/shared-components"
+```
+
+Agora, o projeto de destino usará a sua versão local de `shared-components`.
+
+**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`:
+
+```bash
 yarn build
 ```
 
-### Lints and fixes files
+> ⚠️ **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.
+
+**Para remover o link:**
+
+Quando terminar de testar, você pode remover o link executando o seguinte comando no projeto de destino:
+
+```bash
+yarn unlink "@becompliancebr/shared-components"
+```
+
+E para remover o link global, execute no diretório `shared-components`:
+
+```bash
+yarn unlink
 ```
+
+## ✅ Qualidade de Código
+
+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.
+
+Para rodar o linter manualmente:
+
+```bash
 yarn lint
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+## 🤝 Como Contribuir
+
+Contribuições são muito bem-vindas! Por favor, siga os passos abaixo:
+
+1. **Crie uma nova branch** para sua feature ou correção a partir da `main`.
+
+   ```bash
+   git checkout -b feature/meu-novo-componente
+   ```
+
+2. **Faça suas alterações.** Adicione seu novo componente ou corrija um bug.
+3. **Adicione documentação** para qualquer componente novo ou mudança significativa.
+4. **Garanta que todos os testes passem** e que o linter não aponte erros.
+5. **Envie sua branch** e abra um Pull Request para a `main`.