Aplicando Design System com Styled Components em ReactJS

Revista com paleta de cores e desenhos em ipad | Foto de Balázs Kétyi na Unsplash

Ser uma Desenvolvedora Front End em uma empresa de grande porte, que possui várias marcas, como o Grupo Boticário, é um grande desafio.

Falando nisso, recentemente tivemos o desafio de aplicar o Design System para uma aplicação Web com React, que seria utilizada pelas marcas, ou seja, precisaríamos criar uma única aplicação Web que fosse capaz de estilizar (cores, ícones e imagens) conforme o Design System da marca selecionada.

Além disso, era super importante entender como estruturar a aplicação Web, tendo em vista que ela precisaria ser sustentável e, acima de tudo, fácil de dar manutenção.

E é sobre isso que iremos falar, em como podemos aplicar o Design System em aplicações React usando a lib Styled Components.

Eu sou a Jay Jay, Dev Full Stack no Grupo Boticário, e junto comigo neste post está o Nicolas Troles, Dev Front end no Grupo Boticário.

Antes de falarmos sobre o tema, queremos reforçar a importância dos conhecimentos básicos sobre os pré requisitos, para um melhor aproveitamento de conteúdo.

PRÉ-REQUISITOS

1. React
2. JavaScript
3. HTML
4. CSS

O que é Design System?

Essa é uma pergunta difícil, mas gosto de pensar que Design System é um padrão desenvolvido que contém todo o Design da sua aplicação mapeado e documentado. Ele é como se fosse a API do Design, em que você consome os componentes e estilos para montar suas telas, facilitando demais a vida dos desenvolvedores na construção do seu produto.

O que é React?

React é uma fantástica biblioteca JavaScript de código aberto com foco em criar interfaces de usuário para páginas Web. Sua estrutura é voltada para criação e reutilização de componentes, o que nos permite uma boa abstração de interface.

React foi desenvolvido pelo Facebook e lançado em 2013 e, além de ser uma biblioteca super popular no mundo Javascript, ele tem sido usada por grandes companhias ao redor do mundo, como Netflix, Airbnb e WhatsApp.

Afinal, o que é Styled component?

Styled Components é uma biblioteca que nos permite criar componentes utilizando “css-in-js”, que é uma técnica de escrever códigos CSS com Javascript.Em outras palavras, quando esse javascript for analisado, o CSS é gerado e anexado ao DOM.

E quais são as vantagens?

1. Criação de Temas: uma grande vantagem é a facilidade e simplicidade de adaptar o estilo de um componente com base a um tema, com isso podemos criar um único código que recebe estilos diferentes.
2. CSS-IN-JS: criar componentes utilizando CSS com Javascript flexibiliza a estilização dos componentes.
3. Redução de Bugs: a lib é responsável por criar os nomes de classe para os estilos gerados do componente, isto nos evita alguns bugs, como: duplicação, sobreposição ou erro ortográfico.
4. Reutilização de código: os componentes criados com Styled Components são como qualquer outro componente, podendo ser reutilizados em qualquer lugar.
5. Herança: essa é uma funcionalidade incrível, em é possível criar um Styled Components e utilizá-lo para englobar um componente importado de outra biblioteca, alterando a estilização da forma que desejarmos do componente importado.
6. Documentação: A biblioteca possui uma documentação muito completa e fácil de entender.

Além de todas essas vantagens, existem vários cases legais de grandes empresas que utilizam essa lib, conforme mostrado abaixo.

Cases

• Spotify
• Wish
• Coinbase
• Blablacar

E quais são as desvantagens de aplicar vários Design Systems com os temas do Styled Components?

1. Criação de Temas: pensando na criação de diferentes temas para utilizar diferentes marcas com o mesmo código, corremos o risco de que, no longo prazo, cada uma das marcas necessite de algumas implementações específicas no código, gerando muitos IF’s para separar o que cada marca deve exibir, deixando o código cada vez maior.

Caso tenha interesse em obter mais informações sobre lib Styled Components, acesse aqui e veja a documentação completa.

MÃO NA MASSA

Para criar uma aplicação React, utilizaremos o comando create-react-app, e em seguida instalaremos as libs necessárias para implementação do nosso exemplo.

npx create-react-app my-app
cd my-app
yarn add styled-components --save
yarn add react-bootstrap bootstrap --save

Depois disso, dentro da pasta src, crie uma pasta chamada themes e em seguida adicione 2 arquivos JS com o nome de estilo1.js e estilo2.js .

Estilo1

const theme = {
   color: {
      primary: '#007E78',
   },
   padding: {
       pd4:"16px",
},
   fontFamily: {
     primary: 'Comic Sans MS'
}
}
export default theme;

Estilo2

const theme = {
  color: {
      primary: '#472D75',
   },
  padding: {
     pd4:"16px",
},
  fontFamily: {
     primary: 'Arial'
}
}
export default theme;

Esses arquivos de temas são responsáveis por mapear toda a informação do seu Design System, mas para este exemplo iremos estruturar algumas informações de estilo (cor, padding e fonte).

Criando Componentes

Com os temas criados, é a hora de criar os componentes dentro da pasta src. Crie um arquivo com o nome styled.js.

Note que os valores da variável theme correspondem aos valores configurados em nossos arquivos de temas.

Styled.js

import styled from 'styled-components'; 
export const Wrapper = styled.div`
   ${({ theme }) => `
       width: 100%;
       box-sizing: border-box;
       background: ${theme.color.primary};
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      font-family:${theme.fontFamily.primary};
     .container {
       display: flex;
       width: 960px;
       margin:0 auto;
       padding-top:${theme.padding.pd4};
      }
`}
`;

Implementando componentes

Para implementar a renderização de temas com Styled Components precisamos importar o ThemeProvider, passando o tema da aplicação para a propriedade theme.

Copie o código abaixo e substitua no seu arquivo App.js

// Modules
import React, { useState } from 'react';
import { ThemeProvider } from 'styled-components'
import Form from 'react-bootstrap/Form';
// Themes
import estilo1 from './themes/estilo1';
import estilo2 from './themes/estilo2';
// Styled
import * as Styled from './Styled';
import './App.css';

function App() {
const [currentTheme, setCurrentTheme] = useState(estilo1);
return (
<ThemeProvider theme={currentTheme}>
      <Styled.Wrapper>
          <div className="container">
              <Form>
                   <Form.Check
                   custom
                   type={'radio'}
                   id={`estilo-1`}
                   label={`Estilo 1`}
                   name="theme"
                   checked={currentTheme === estilo1}
                   value={estilo1}
                   onClick={() => setCurrentTheme(estilo1)}
                   />
                   <Form.Check
                   custom
                   type={'radio'}
                   label={'Estilo 2'}
                   id={`estilo-2`}
                   value={estilo2}
                   checked={currentTheme === estilo2}
                   name="theme"
                   onClick={() => setCurrentTheme(estilo2)}
                   />
</Form>
</div>
</Styled.Wrapper>
</ThemeProvider>);
}
export default App;

Agora execute o comando abaixo para rodar a aplicação:

yarn start

Neste exemplo, criamos um simples componente chamado Wrapper que irá trocar a cor de fundo e a fonte do texto conforme o tema selecionado.

Estilo 1

Estilo 2

Gostou? então acesse aqui e veja a versão completa do código de como aplicar Design System com Styled Components em ReactJS.