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.