pge-front-common v11.0.2

🖼️ Biblioteca de componentes da PGE

Essa biblioteca consiste de componentes reutilizáveis entre os diversos projetos da PGE-RJ. Oferecendo componentes reutilizáveis e testados para ajudar a acelerar o desenvolvimento de interfaces de usuário.

Você pode visitá-la nesse link

Índice

• Instalação
• Uso
• Desenvolvimento
• Template Pull Request

🛠️ Instalação

Instale a biblioteca usando npm:

npm i pge-front-common

📦 Uso

import React from "react";
import { Button } from "pge-front-common";

const App = () => {
  const handleClick = () => {
    alert("Button clicked!");
  };

  return (
    <div>
      <h1>Hello, World!</h1>
      <Button variant="secondary" text="Text" />
    </div>
  );
};

export default App;

🧑‍💻 Desenvolvimento

Instale as dependências do projeto:

npm install

Executando o Storybook Inicie o Storybook para visualizar e desenvolver componentes:

npm run storybook

O Storybook estará disponível em http://localhost:6006.

🖌️ FIGMA

https://www.figma.com/design/DNUPKVvvLGx5oMEJ721Ukj/V1--Design-system-PGE?node-id=0-1&p=f&t=RIFLXN7wyH6Q4Bd4-0

🚀 Contribuição

Para contribuir com o projeto, siga as diretrizes abaixo para atualizar a versão do package.json, respeitando a Semantic Versioning (SEMVER):

Criando novo componente e testando localmente

Após criar um novo componente é ideal que seja feito o teste em sua aplicação localmente. Para isso basta rodar, na raiz do a biblioteca, o comando:

npm run build

Esse comando será responsável por fazer build do projeto e como output uma pasta chamada lib será criada na raíz da biblioteca.

Vá até o package.json da sua aplicação react ou next e substitua a versão da biblioteca pge-front-common pelo caminho da sua máquina até a pasta lib que acabou de ser criada, exemplo:

"pge-front-common": "C:\Users\Colaborador\Documents\EDS\componentes\lib"

Após isso rode o comando npm install na raiz do projeto react ou next e o node_modules será atualizado localmente com o conteúdo da pasta lib da biblioteca. Teste sua aplicação para garantir que todos os cenários de uso do componente estão conforme esperado e após isso prossiga com o processo de pull request e atualização da biblioteca para uma versão estável.

Atualizando a versão do package.json

A versão segue o formato MAJOR.MINOR.PATCH:

• PATCH (X.X.☝️): Para pequenas correções, ajustes ou melhorias que não quebram compatibilidade. Exemplo: adicionar uma props opcional, ajustar um estilo, corrigir um bug.
• MINOR (X.☝️.0): Para novas funcionalidades que mantêm compatibilidade com a versão anterior. Exemplo: adicionar um novo componente, expandir funcionalidades existentes.
• MAJOR (☝️.0.0): Para alterações que quebram compatibilidade com versões anteriores. Exemplo: grandes refatorações, remoção de funcionalidades ou mudanças disruptivas na API.

Exemplo de alteração no package.json:

"version": "10.2.1"

📤 Publicação no NPM

Após o processo normal (Code review) - chamar César Sturmer, para gerar nova versao na NPM

🔄 Change log

Dentro da pasta src há uma subpasta com nome docs, para mantermos registro de alterações ao longo do tempo é ideal que a cada nova versão um novo arquivo com a data e a versão gerada seja criado e que o desenvolvedor relate nesse arquivo as alterações feitas nessa versão, seguindo um padrão descritivo com tópicos como:

• Ajustes: mudanças feitas em componentes já existentes, com intuito de consertar algum erro ou bug
• Adições: relatando novos componentes adicionados
• Alterações: mudanças feitas com intuito de modificar algum componente já existente, que não seja por motivo de bug ou erro
• Remoções: relato sobre remoção de algum componente e o motivo para sua remoção

• Futuras features: comentários abertos sobre possíveis alterações futuras que serão implementadas em novas versões mais a frente

obs: apenas escreva "não se aplica" para os tópicos que não têm o que descrever

Tente ser o mais descritivo possível acerca de suas alterações para facilitar o registro a longo prazo e mantermos uma boa documentação.