react atomic design
1.0.0
Este é um modelo com a metodologia Atomic Design usando algumas coisas legais, como Storybook, Flow e Módulos CSS. Fique à vontade para testar, alterar e adaptar tudo.
Leia o artigo completo
Popularmente conhecido no mundo do design, o Atomic Design ajuda a construir sistemas de design consistentes, sólidos e reutilizáveis. Além disso, no mundo do React, Vue e frameworks que estimulam a componenteização, o Atomic Design é usado inconscientemente; mas quando usado da maneira certa, torna-se um poderoso aliado para os desenvolvedores.
O nome Atomic Design vem da ideia de separar os componentes em átomos, moléculas, organismos, templates e páginas, como na imagem acima. Mas quais são as responsabilidades de cada parte separada?
Átomos são os menores componentes possíveis, como botões, títulos, entradas ou paletas de cores de eventos, animações e fontes. Eles podem ser aplicados em qualquer contexto, globalmente ou dentro de outros componentes e templates, além de possuírem diversos estados, como neste exemplo de botão: desativado, passar o mouse, tamanhos diferentes, etc.
Eles são a composição de um ou mais componentes de átomos. Aqui começamos a compor componentes complexos e a reutilizar alguns desses componentes. As moléculas podem ter propriedades próprias e criar funcionalidades a partir de átomos, que não possuem função ou ação por si próprios.
Organismos são a combinação de moléculas que trabalham juntas ou mesmo com átomos que compõem interfaces mais elaboradas. Neste nível, os componentes começam a ter a forma final, mas continuam a garantir que são independentes, portáteis e reutilizáveis o suficiente para serem reutilizáveis em qualquer conteúdo.
Neste estado paramos de compor componentes e começamos a definir seu contexto. Além disso, os templates criam relações entre os organismos e outros componentes através de posições, posicionamentos e padrões das páginas, mas não possuem nenhum estilo, cor ou componente renderizado. É por isso que parece um wireframe.
As páginas são as partes de navegação do aplicativo e é onde os componentes são distribuídos em um modelo específico. Os componentes obtêm conteúdo real e estão conectados com todo o aplicativo. Nesta fase, podemos testar a eficiência do design system para analisar se todos os componentes são suficientemente independentes ou se precisamos dividi-los em partes menores.
Quando começamos a usar o Atomic Design dentro do React tivemos que ajustar algumas regras da metodologia para garantir que os componentes fossem reutilizados o máximo possível, que fossem stateless, sem estilos de posições e margens muito específicas para evitar quaisquer efeitos colaterais no páginas do aplicativo.
Portanto, com cada novo componente nos perguntamos: “Esses componentes são genéricos o suficiente para evitar especificidade e/ou código repetido em qualquer contexto em que sejam usados?”
Então, conseguimos escrever algumas regras:
| Roteiro | Descrição |
|---|---|
$ yarn start | Inicie um servidor webpack simples |
$ yarn dev | Crie um servidor para desenvolvimento na porta 5000 |
$ yarn storybook | Inicie o Storybook com as histórias importadas |
$ yarn flow | Valide os tipos de fluxo |
@danilowoz
@dleitee
MIT
