@aidron/aidron-ds v0.1.28
Aidron Design System
Seguimos uma metodologia baseada em componentes começando com componentes atômicos e modulares reutilizando-os para os mais complexos e robustos.
Depois de clonar o repositório:
npm install
npm run storybook
Acesse em http://localhost:6006/
Design Tokens
São a menor parte de um design system e são responsáveis por manter a consistência visual de um produto. Pequenas constantes que são usados em todo sistema, como cores, espaçamentos, larguras, tipografia e padrões visuais.
Eles estão no projeto em uma arquitetura de arquivos .yml com variáveis descritivas; usando o theo
essas variáveis são convertidas em um arquivo SASS(tokens.scss), que por sua vez é convertido, juntamente com o tema (theme.scss), para um arquivo CSS (theme.css), este é o arquivo que deve ser importado no sistema que usará os componentes.
Engine
Toda a aplicação é construída em Nodejs e os componentes usando React.
(aqui precisamos de mais detalhes sobre a exportação do projeto como um pacote)
Documentação
Usamos o Storybook para gerar uma documentação interativa dos componentes do projeto, passando por todas suas variações e usos; a plataforma ainda oferece um modo Design onde todas as opções podem ser exploradas.
Testes
Jest é responsável pelos testes que devem ser escritos para cada componente, esses testes vão rodar sempre que um push
é feito, em caso de falha o push
não é concluído, fazendo com que nada vá para o projeto principal com bugs ou mal testado.
Componentização
A estrutura principal consiste em adicionar classes que alteram o visual esperado de acordo com o que foi planejado pelo Visual Designer e os design tokens
do projeto. O comportamento foi planejado pela equipe juntamente com o Product Designer que levantou a necessidade do componente; comportamento esse que determina como serão os testes, critérios de aceite e etc.
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago