@becompliancebr/shared-components

📚 Biblioteca de Componentes Compartilhados

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
  • 📖 Índice
  • 🚀 Instalação
  • 🔄 Atualizando a Biblioteca
  • ✨ Como Usar
  • 🧩 Componentes Disponíveis
  • 💻 Desenvolvimento
    • 🧪 Testando Localmente com yarn link
  • ✅ Qualidade de Código
  • 🤝 Como Contribuir

🚀 Instalação

Para usar estes componentes em seu projeto, instale o pacote via Yarn.

yarn add @becompliancebr/shared-components

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:

import SharedComponents from '@becompliancebr/shared-components';

Vue.use(SharedComponents);

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:

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);

🔄 Atualizando a Biblioteca

Para garantir que você está usando a versão mais recente da biblioteca, execute o seguinte comando no seu projeto:

yarn upgrade @becompliancebr/shared-components

✨ 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:

<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
• BeCountCardSmall
• 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
• BeTimePicker
• BeTitleBar
• BeViewTitle

💻 Desenvolvimento

Para rodar o projeto localmente para desenvolvimento e testes:

1. Clone o repositório:

   git clone <repository-url>
   cd shared-components
   

2. Instale as dependências:

   yarn install
   

3. Inicie o servidor de desenvolvimento:

   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:

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:

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:

yarn build

⚠️ 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:

yarn unlink "@becompliancebr/shared-components"

E para remover o link global, execute no diretório shared-components:

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:

yarn lint

🤝 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.

   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.