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.

$3

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.

``bash
📂 ...
📂 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:
`bash
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:
`bash
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:
`bash
npm adduser --registry http://localhost:4873/
`

Feito isto, precisamos de publicar a nossa lib, para isso, na raiz da lib usamos o seguinte comando:
`bash
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:
`bash
npm install --save df-styles@0.0.1 --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:

`bash
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.