Processo de criação de componentes no Front-end

Saiba como acontece um processo de criação de componentes do Front-end.

________________________________________________________________________________________________________

Parece um pouco estranho misturar as palavras “criatividade” com “processo”. Porém, a nossa criatividade muitas vezes é “criativa demais” e acaba mais nos atrapalhando do que ajudando, pois muitas vezes nos faz sair do nosso foco principal.

Devido a isso, é importante que pensemos em como estabelecer uma linha de pensamento. Até para processos que em são em si criativos, ter um guia é sempre bom! Qualquer processo de design e criação tem suas metodologias, que ajudam, e muito, a te orientar para já saber o que fazer.

Neste conteúdo, voê irá conferir um breve exemplo de metodologia para criação de componentes no Front-end.

Criando nosso processo

Primeiramente, o que o nosso processo vai fazer?

Basicamente, vamos elaborar algumas etapas do que fazer e em que ordem fazer. É claro que isso pode variar mas, via de regra, vai nos ajudar bastante a parar de ficar olhando para a tela do computador, sem saber o que fazer e se perguntando “por onde eu começo?”.

Escolhendo as ferramentas

Neste exemplo, irei criar um componente em React, usando styled-components na estilização, typescript para a tipagem, o storybook para prototipar, e o jest para testar.

Atenção! Não se atente muitos aos códigos, eles são meramente ilustrativos e para nos orientar nos processos, o importante é entender a metodologia e como estabelecer uma linha de pensamento produtiva.

1º Passo – Visualizar o componente

Pense no que você vai fazer, pegue inspirações, designs, faça um esboço, etc. Mas tenha em mente o que será o seu componente.

2º Passo – Defina o que ele vai receber

Com o componente visualizado e sabendo o que ele vai fazer, é fácil saber o que ele precisa receber. Já aproveite e faça isso direto na typagem.

// index.tsx
export type BannerProps = {
  img: string
  title: string
  subtitle: string
  buttonLabel: string
  buttonLink: string
}

3º Passo – Test-driven development (TDD)

Agora que já sabemos o que o nosso componente irá receber, vamos fazer os testes do que vamos esperar que aconteça quando o nosso componente receber cada uma dessas propriedades. Isso irá nos guiar para sabermos o que vamos implementar mais para frente.

Se você não utiliza testes, não se preocupe, você pode apenas pular essa etapa. Mas, se ainda não tem o hábito de fazer testes, dê uma olhada! Testes são ótimos para manter boas práticas, aplicações escaláveis, e garantir de que nada vai quebrar de repente nas suas aplicações.

Lembrando que o “TDD” em si, significa fazer os testes antes de qualquer outra coisa, mas eu, particularmente, acabo variando um pouco a esse respeito no frontend, pois criar a estrutura de dados inicial às vezes me ajuda a ter uma ideia melhor e mais “prática” do que eu realmente tenho que testar, e me evita alguns retrabalhos. Porém, isso é bem variável, e dependendo do componente, essa etapa pode ser facilmente a etapa 7º, ou qualquer outra.

// test.tsx
import { screen } from '@testing-library/react'
import { renderWithTheme } from 'utils/tests/helpers'

import Banner from '.'

const props = {
  img: '<https://images.unsplash.com/photo-1504630083234>',
  title: 'ATP Coffee',
  subtitle: '<p>The <strong>best</strong> coffee in the world',
  buttonLabel: 'Compre agora',
  buttonLink: '/products/atp-coffee'
}

describe('<Banner />', () => {
  it('should render correctly', () => {
    renderWithTheme(<Banner {...props} />)

    expect(
      screen.getByRole('heading', { name: /ATP Coffee/i })
    ).toBeInTheDocument()

    expect(
      screen.getByRole('heading', { name: /The best coffee in the world/i })
    ).toBeInTheDocument()

    expect(screen.getByRole('img')).toHaveAttribute(
      'src',
      '<https://images.unsplash.com/photo-1504630083234>'
    )

		expect(screen.getByText(/compre agora/i).parentElement).toHaveAttribute(
      'href',
      '/producs/vassoura-coletora'
    )
  })
})

4º Passo – Criando os elementos do componente

Agora vamos criar cada elemento do nosso componente para que ele fique com os estilos bem escopados e definidos. No nosso caso, vamos usar o styled-components:

// styles.ts
import styled from 'styled-components'

export const Wrapper = styled.main``

export const Image = styled.div``

export const Caption = styled.div``

export const Title = styled.h2``

export const Subtitle = styled.h3``

export const Button = styled.a``

5º Passo – Preparando o protótipo

Já temos nossos argumentos e nossos elementos, está na hora de preparar nosso código para começarmos o design e a prototipação. Para isso, vamos colocar alguns valores defaults na nossa story:

// stories.tsx
import { Story, Meta } from '@storybook/react'
import Banner, { BannerProps } from '.'

export default {
  title: 'Banner',
  component: Banner
} as Meta

export const Default: Story<BannerProps> = (args) => <Banner {...args} />

Default.args = {
  img: '<https://images.unsplash.com/photo-1504630083234>',
  title: 'ATP Coffee',
  subtitle: '<p>The <strong>best</strong> coffee in the world',
  buttonLabel: 'Compre agora',
  buttonLink: '/products/atp-coffee'
}

6º Passo – Incluindo os elementos

Com o protótipo recebendo nossos argumentos e nossos elementos criados, agora vamos criar a estrutura dos nossos elementos no nosso componente:

// index.tsx
const Banner = ({
  img,
  title,
  subtitle,
  buttonLabel,
  buttonLink
}: BannerProps) => (
  <S.Wrapper>
    <S.Image src={img} role="img" aria-label="title" />

    <S.Caption>
      <S.Title>{title}</S.Title>
      <S.Subtitle>{subtitle}</S.Subtitle>
      <S.Button href={buttonLink}>
        {buttonLabel}
      </S.Button>
    </S.Caption>
  </S.Wrapper>
)

7º Passo – Estilizando

Finalmente chegamos aos ajustes finais, os estilos! Agora vamos dar aquela cara que tanto desejamos no nosso componente e fazer cada um dos estilos:

// styles.ts
import styled, { css } from 'styled-components'
import media from 'styled-media-query'

export const Wrapper = styled.main`
  position: relative;

  ${media.greaterThan('medium')`
    box-shadow: 0 0.4rem 0.5rem 0 rgba(0, 0, 0, 0.2);
  `}
`

type ImageProps = {
  src: string
}

export const Image = styled.div<ImageProps>`
  ${({ theme, src }) => css`
    width: 100%;
    height: 23rem;
    background-color: ${theme.colors.lightGray};
    background-image: url(${src});
    background-position: center center;
    background-size: cover;

    ${media.greaterThan('medium')`
      height: 58rem;
    `}
  `}
`

export const Caption = styled.div`
  ${({ theme }) => css`
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    padding: ${theme.spacings.small};

    ${media.greaterThan('medium')`
      border-radius: 0 0 ${theme.border.radius} ${theme.border.radius};
      padding: ${theme.spacings.large};
      position: absolute;
      bottom: 0;
      left: 0;
    `}
  `}
`

export const Title = styled.h2`
  ${({ theme }) => css`
    font-size: ${theme.font.sizes.large};
    font-weight: ${theme.font.bold};
    color: ${theme.colors.white};

    ${media.greaterThan('medium')`
      font-size: ${theme.font.sizes.xxlarge};
    `}
  `}
`

export const Subtitle = styled.h3`
  ${({ theme }) => css`
    color: ${theme.colors.white};
    font-size: ${theme.font.sizes.small};
    font-weight: ${theme.font.normal};
    margin-bottom: ${theme.spacings.xsmall};

    strong {
      color: ${theme.colors.primary};
      font-weight: ${theme.font.bold};
    }

    ${media.greaterThan('medium')`
      font-size: ${theme.font.sizes.large};
    `}
  `}
`

Finalizando

Pronto, finalizamos o nosso processo de criação e já temos nosso componente pronto:

Concluindo

Esta é a metodologia que eu normalmente utilizo para criar meus componentes no Front-end, onde eu crio uma linha de pensamento para orientar a minha mente, saber exatamente qual é o próximo passo e no que eu preciso pensar. Mas tudo isso varia bastante de pessoa para pessoa e a minha sugestão é que você adapte da melhor maneira para você, e que este método te guie como exemplo.

Até a próxima!