As descobertas que faço e coisas que aprendo

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.

You've successfully subscribed to Segredo Dev
Welcome back! You've successfully signed in.
Great! You've successfully signed up.
Your link has expired
Success! Your account is fully activated, you now have access to all content.