Design systems Flutter baseado no Jota Design Tokens da Meiuca
A primeira coisa feita foi analisar o json de design tokens e mapeá-lo para ser usado como uma classe Dart, separando em algumas classes:
- MeiucaThemeBorderSize: propriedades de espessura da borda
- MeiucaThemeBrandColor: cores da marca
- MeiucaThemeColorIntensity: intensidade de cores
- MeiucaThemeFontFamily: tipos de fontes
- MeiucaThemeFontSize: tamanhos de fontes
- MeiucaThemeFontWeight: pesos de fontes
- MeiucaThemeLineHeight: tamanho de linha de texto
- MeiucaThemeOpacityLevel: nível de opacidade
- MeiucaThemeRadiusSize: tamanho de curvatura
- MeiucaThemeSpacingSize: espaçamentos
- MeiucaThemeSpacingSquishSize: conjunto de espaçamentos
A partir das classes das propriedades criadas foi feita a criação desse agrupamento de propriedades que é o tema em si MeiucaTheme.
Depois disso comecei a criação do gerenciador de temas. Nele eu gerencio qual o tem aativo no momento e qual ThemeMode ele deve ser usado. Nele eu consigo setar o tema atrvés de um arquivo Map, que deve ter a mesma estrutura do Jota Design Tokens, ou através da criação das classes manualmente.
Com o gerenciador e o tema funcionando comecei a criação dos componentes:
e estilos de textos:
Os componentes eu utilizei o prefixo Meiuca no nome para não dar conflito com nenhuma outra classe do flutter e os textos eu criei como estilos ao invés de componentes para que possam ser utilizados em diferentes componentes de texto como: Text, RichText, etc.
Depois da criação dos componentes criei um projeto example para fazer o storybook utilizando a biblioteca storybook_flutter e adicionei um workflow do Github Actions para sempre que for feita uma alteração na main ele irá fazer o deploy desse storybook no Github Pages do repositório
Para a evolução do projeto eu pretendo tentar automatizar/otimizar de alguma forma a criação dos testes unitários básicos, pois é um processo importante porém pode se tornar repetitivo conforme o projeto vá crescendo, e otimizando isso de alguma forma faz com que o dev se preocupe mais com pontos chaves daquele componente do que ficar testando coisas que ele possui em comum com algum outro componente.
Outro ponto que eu acho importante, é melhorar a atribuição e criação de temas. Pode ser interessante criar um método .copyWith em cada classe de propriedade ou talvez fazendo um método desse geral na classe do tema para ajudar na mudança de propriedades do tema em runtime. Além disso melhorar algumas partes do código um tanto quanto repetitivas na criação das classes de propriedades e evoluir isso para um script que le o arquivo de tokens e cria a classe de estrutura do tema sozinho.
- Acesse o storybook dos componentes neste link
- 1.0.0 (Acesse o changelog para visualizar todas mudanças)
Adicionar a seguinte dependência (com base em como você vai utilizar) no seu arquivo pubspec.yaml e logo após rodar o comando flutter pub get para baixar a dependência
- Versão do Github:
meiuca_components:
git:
url: git@github.com:phillipiLino/meiuca-case.git
ref: {nome_da_branch}- Versão local:
meiuca_components:
path: {caminho_do_pacote}