DF Style Lib 🚀

Introdução

O DF Style Lib é uma biblioteca de estilos desenvolvida para os sistemas Doutor Finanças, com a missão de oferecer um suporte essencial aos desenvolvedores em suas atividades cotidianas. Seu foco principal é assegurar a uniformidade visual entre os sistemas, simplificando assim a manutenção contínua e promovendo a evolução fluida dessas plataformas.

Como Funciona?

Essa biblioteca está integrada ao FIGMA para otimizar a comunicação entre desenvolvedores e designers, visando prevenir possíveis erros de implementação. No ficheiro design-tokens.json, estão concentrados todos os tokens fundamentais do sistema de design, mantidos atualizados diretamente no Figma por meio do plugin Token Studio.

Para converter esses tokens em variáveis CSS ou SCSS, conforme necessário, utilizamos o Style Dictionary, cuja configuração está definida no arquivo style-dictionary-config.js.

Nota: A execução desse ficheiro é automatica por meio do script postinstall do package.json

Posteriormente, todas as variáveis geradas pelo Style Dictionary serão transformadas em classes com estilos específicos previamente definidos no sistema de design.

📂 ...
📂 src
📂 variables               
   _variables.css
   _variables.scss

Como iniciar localmente

1. Instale as dependências npm install ou yarn

Para procedermos a geração de todas as classes precisamos de correr o seguinte comando:

npm run build

Este processo vai fazer com que todo o css e classes geradas anteriormente sejam minificadas e colocadas na diretoria dist/. Seguindo todos estes passos temos a nossa biblioteca em condições de ser publicada. Para publicar a lib localmente, usamos o verdaccio, que é um repositório para pacotes npm, que nos permite publicar a nossa lib e testar a mesma localmente. Primeiramente precisamos de executar um container docker com a imagem do verdaccio para isso usamos o seguinte comando:

docker run -it --rm --name verdaccio -p 4873:4873 verdaccio/verdaccio

Depois de termos o container a correr, precisamos de criar um user para podermos publicar a nossa lib, para isso, na raiz da lib usamos o seguinte comando:

npm adduser --registry http://localhost:4873/

Feito isto, precisamos de publicar a nossa lib, para isso, na raiz da lib usamos o seguinte comando:

npm publish --registry http://localhost:4873

Feito isto, podemos usar a nossa biblioteca em qualquer projeto, para isso precisamos de instalar a lib de forma a podermos importar o css gerado no projeto, e usar as classes geradas. Para isso devemos de usar o seguinte comando:

npm install --save [email protected] --registry http://localhost:4873

Publicação da lib LIVE

Sempre que pretendermos atualizar a lib, precisamos de criar uma branch a partir da master, a nomenclatura do nome da branch deverá seguir o padrão Semantic Versioning (https://semver.org/), ou seja, por exemplo Branch: v1.0.0

Depois de termos a branch criada, e feitas todas as alterações que pretendemos, para que seja feito o versionamento automático e adição de todos os commits entre releases ao CHANGELOG.mg, precisamos de correr localemente o comando:

npm run release

Posto isto criamos um PR para a master, depois de aprovado o PR, precisamos de criar uma tag com o mesmo nome da branch, e fazer o push da tag para o repositório remoto, depois de termos a tag criada e pushed, precisamos de criar um novo release no github, com o mesmo nome da tag, e com a descrição do que foi feito.

Após estes passos, irá correr uma Action no github que irá publicar a lib no npm automaticamente.