O projeto consiste na utilização de regras de design pré definidas para a criação de variáveis de estilos que serão utilizadas na construção de componentes.
Utilizando o style guide foi possível definir as propriedades em um arquivo JSON e a partir disso, utilizando o Style Dictionary, foram criadas as variáveis para as diversas plataformas (neste projeto foi definido somente para Web, ou seja, as variáveis são geradas somente no formato de SCSS).
Utilizando a documentação do Style Dictionary pude compreender como funciona o framework e quais eram os seus objetivos. Para a parte de padronização do mesmo, procurei me guiar pelos projetos modelos que estão contidos no github. Não consegui obter muitas informações de boas práticas quanto a este framework, então parti de alguns pressupostos baseando-se em boas práticas de programação no geral.
Por default, o framework gera os arquivos na raiz do projeto, contudo, para uma melhor organização e manutenção do código resolvi criar um diretório style-dictionary que iria conter todos arquivos gerados, configurações e regras.
Na definição da estruturação das regras, resolvi separar pela propria categorização pré definida no JSON base: color, height, level e size. Agrupei os elementos que eram iguais e que mudavam somente a variação (ex: spacing) para que assim ficasse melhor identificar/alterar alguma propriedade.
No que diz respeito ao projeto como um todo, escolhi o Vite por ser um framework leve e prático, suficiente para o projeto. Para estruturação de pastas optei por criar um diretório components que contem cada componente e dentro de cada um desses suas respectivas sub-categorias (ex: Button/Primary).
Para a criação dos arquivos dos componentes segui a linha de separação de contextos, no qual cada diretório possui somente os arquivos respectivos a ele mesmo e que seguem a estrutura abaixo, pois assim conseguimos isolar e dar manutenção de forma mais específica.
- index.jsx
- style.scss (quando houver)
- **.stories.js
Utilizei o Prettier e as regras pré-definidas do Vite no ESlint para conseguir ter uma boa organização e qualidade de código.
Para executar o projeto basta utilizar o comando abaixo:
yarn devAbra http://localhost:5173/ com o seu navegador para visualizar o projeto.