Evergreen UI
Olá, estou fazendo um desafio e estou escolhendo diversas variações para treinar, e neste desafio estou usando o Evergreen como biblioteca React UI para disposição dos elementos. Esse post faz parte do processo de Learn in Public, então estou aprendendo e comunicando o que aprendo.
A Evergreen é um design system construído e mantido como open source pela Segment, o foco deles é manter um sistema de layout fluido, robusto e com construções inteligentes de componentes para facilitar a manutenção ou alteração futura.
Instalação da biblioteca
Como a maioria dos pacotes web hoje em dia você vai usar apenas um comando:
$ yarn add evergreen-ui
# ou
$ npm install --save evergreen-ui
E para aplicá-lo dentro de seu projeto basta importar os componentes que deseja utilizar:
import React from 'react'
import ReactDOM from 'react-dom'
import { Button } from 'evergreen-ui'
ReactDOM.render(
<Button>Segredo do Evergreen!🌲</Button>,
document.getElementById('root')
)
Layout Primitives
O Evergreen trabalha com dois componentes principais <Pane />
e <Card />
para fazer a estruturação do layout, na maioria dos casos você pode utilizar um Pane
ao invés de uma div
.
Os componenetes de estruturação de layout possuem props
que recebem valores para fazer o controle, então a biblioteca indica que você estruture o seu layout baseado nas props, como:
<Pane
height={120}
width={240}
display="flex"
alignItems="center"
justifyContent="center"
border="default"
>
<Text>Pane</Text>
</Pane>
O ideal é que seja evitado a utilização de className
e que seja aproveitado todos os elementos da biblioteca, segundo a documentação
Então para seguir o padrão deles basta ir concatenando esses componentes para criar um layout de acordo com o que você precisa:
<Pane
data-testid="event-list"
clearfix
display="flex"
alignItems="center"
justifyContent="center"
>
<Pane height={120} width={450} border="default">
E ai :D
</Pane>
</Pane>
Tá, cadê o <Card />
? O component de Card possui as mesmas propriedades e funções do Pane, a única diferença é que ele possui uma bordinha arredondada chique.
Então no meu caso como estou construindo uma lista de elementos que vão possuir informações e botões internos, ficou inicialmente algo como:
<Pane
data-testid="event-list"
clearfix
display="flex-collumn"
alignItems="center"
justifyContent="center"
margin="auto"
marginTop={30}
width={450}
>
<Card height={120} marginTop={20} width={450} border="default">
E ai :D
</Card>
</Pane>
Bem tranquilo de configurar, é só se acostumar um pouco com o padrão.
Até o momento eu usei apenas esses componentes, irei atualizando conforme vou descobrindo mais coisas na construção do projeto.