Assim, poderá criar padrões que facilitam a manutenção do código. Por exemplo, podemos mudar uma cor de todo o projeto em apenas um arquivo.

Neste artigo, você verá como é fácil e mais efetivo utilizar os temas globais do styled-components.

[adrotate banner=”4″]

Styled-components

­Styled-components é uma biblioteca para React e React Native, que permite a criação de componentes previamente estilizados. Isso não apenas com CSS, mas também é utilizado Javascript nele, para passar variáveis, propriedades e temas padrões.

Dessa forma, podemos passar esses temas através de um Theme Provider, que utiliza a context API para englobar toda a aplicação. Ou seja, ao criá-lo, todos os componentes filhos herdarão suas propriedades automaticamente.

Iniciando o projeto

Para iniciar, temos um projeto com React e styled-components. Para utilizá-lo, vamos precisar ter previamente instalado em nossa máquina o Node JS e o Git. Posteriormente, basta cloná-lo e executá-lo em sua máquina realizando os seguintes comandos em seu terminal e em um local da sua preferência:

• git clone https://github.com/XandZap/React-Styled-Components-Ts-Boilerplate.git

Após clonar, devemos abrir o local do projeto com:

• cd .\React-Styled-Components-Ts-Boilerplate\

Após abrir o local do projeto, devemos instalar as dependências do projeto com:

• npm install

E executá-lo com:

• npm start

Modificando os temas

Primeiramente, iremos modificar o arquivo de tema. Nele vamos declarar um objeto com as constantes que iremos utilizar no nosso projeto.

Por isso, vamos modificar o arquivo chamado “Theme.ts” e estruturar da melhor forma para atender o nosso projeto:

const Theme = {
  color: {
    background: "#141827",
    primary: {
      main: "#fffae3",
      contrastText: "#c1d9d0",
    },
    secundary: {
      main: "#736681",
      contrastText: "#62455b",
    },
  },

  border: {
    radius: "15px",
    style: "2px solid #736681",
  },

  font: {
    small: "0.5rem",
    default: "1rem",
    big: "2rem",
    bigger: "3rem",
  },
};

export default Theme;

Modificando o arquivo de declaração

Para utilizar os temas, precisamos modificar a interface padrão do styled-components, fazendo ele reconhecer as propriedades que colocamos no nosso arquivo.

Assim, vamos modificar o arquivo chamado “styled.d.ts”.

import 'styled-components';

import Theme from './Theme'

export type ITheme = typeof Theme

declare module 'styled-components' {
  export interface DefaultTheme extends ITheme {}
}

Aqui, importamos nosso tema criado anteriormente e estendemos sua interface ao tema padrão o DefaultTheme.

Theme Provider

Agora, para poder utilizá-lo em todos os componentes, iremos englobar toda a aplicação com o Theme Provider.

No arquivo “index.tsx”, iremos colocar o Theme Provider como componente pai do app:

import ReactDOM from "react-dom/client";
import App from "./App";

import { ThemeProvider } from "styled-components";
import Theme from "./styles/Theme";

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <ThemeProvider theme={Theme}>
    <App />
  </ThemeProvider>
);

É sua escolha onde deverá colocar. Entretanto, para um tema global, é recomendado que seja no arquivo “index.tsx” ou no “app.tsx” da raiz. Pois são neles que todos os componentes filhos herdarão suas propriedades.

Exemplos

Já está tudo preparado no nosso projeto. Então, podemos utilizar os temas na estilização de nossos componentes.

Criaremos três componentes “Button.ts”, “Container.ts”, “Title.ts”:

Button.ts:

import styled from "styled-components";
export const ButtonWithTheme = styled.button`
  color: ${(props) => props.theme.color.secundary.main};
  background-color: ${(props) => props.theme.color.secundary.contrastText};

  border: ${(props) => props.theme.border.style};
  border-radius: ${(props) => props.theme.border.radius};

  font-size: ${(props) => props.theme.font.big};
`;

Container.ts:

import styled from "styled-components";

export const ContainerTheme = styled.div`
  padding: 15px;
  background-color: ${(props) => props.theme.color.background};
  border-radius: ${props=>props.theme.border.radius};
`;
export const Container = styled.div`
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100vh;
`;

Title.ts:

import styled from "styled-components";
export const TitleTheme = styled.h1`
  color: ${(props) => props.theme.color.primary.main};
  font-size: ${(props) => props.theme.font.bigger};
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color:
${props => props.theme.color.primary.contrastText}; 
`;

Como podemos ver, os temas são passados pelas props padrões do styled-components. Isso porque nós estendemos nossa interface ao DefaultTheme. Assim, permitindo usar em todos componentes criados.

Nosso código no “App.tsx”:

import {  ButtonWithTheme } from "./components/Button";
import { Container, ContainerTheme } from "./components/Container";
import {  TitleTheme } from "./components/Title";

function App() {
  return (
    <>
    <Container>
      <ContainerTheme>
        <TitleTheme>Título com Tema :D</TitleTheme>
        <ButtonWithTheme>Botão com Tema :D</ButtonWithTheme>
      </ContainerTheme>
      <div>
        <h1>Título sem tema :(</h1>
        <button>Botão sem tema :(</button>
      </div>
    </Container>
    </>
  );
}

export default App;

Temos como resultado:

Theme Provider com variáveis

Para finalizar, iremos criar uma variação do nosso tema. Então, faremos o tema claro apenas trocando a ordem de algumas cores.

Vamos criar um arquivo chamado “LightTheme.ts” e iremos fazer um novo objeto que contenha as mesmas propriedades do primeiro tema. Para isso, atribuímos o tipo DefaultTheme. Assim, ele dará erro se tiver alguma propriedade faltando:

import { DefaultTheme } from "styled-components";

const LightTheme: DefaultTheme = {};

export default LightTheme;

Neste momento, teremos que colocar as mesmas propriedades e atribuir da forma que preferirmos. Aqui no nosso projeto, vamos apenas inverter a ordem das cores já estabelecidas:

import Theme from "./Theme";

const LightTheme: DefaultTheme = {
  color: {
    background: Theme.color.primary.contrastText,
    primary: {
      main: Theme.color.background,
      contrastText: Theme.color.primary.main,
    },
    secundary: {
      main: Theme.color.secundary.contrastText,
      contrastText: Theme.color.secundary.main,
    },
  },

  border: {
    radius: "15px",
    style: "2px solid " + Theme.color.secundary.contrastText,
  },

  font: Theme.font,
};

Dessa forma, nosso projeto está pronto para ser utilizado em qualquer componente de nossa aplicação. Para o exemplo, vamos adicionar no “App.tsx” um novo Theme Provider.

Agora, temos dois provider, um externo com o tema antigo e um interno com o novo tema claro:

//Mantenha as importações anteriores e adicione o seguinte
import { ThemeProvider } from "styled-components";
import LightTheme from "./styles/LightTheme";

function App() {
  return (
    <>
      <Container>

        <ThemeProvider theme={LightTheme}>
          <ContainerTheme>
            <TitleTheme>Título com Tema Claro :D</TitleTheme>
            <ButtonWithTheme>Botão com Tema Claro!! :D</ButtonWithTheme>
          </ContainerTheme>
        </ThemeProvider>

        <ContainerTheme>
          <TitleTheme>Título com Tema Escuro :D</TitleTheme>
          <ButtonWithTheme>Botão com Tema Escuro :D</ButtonWithTheme>
        </ContainerTheme>
      </Container>
    </>
  );
}

export default App;

Também podemos fazer o uso da mudança de estado com useState, para deixar nosso tema dinâmico:

//Manter restante do código acima
import Theme from "./styles/Theme";
import { useState } from "react";

function App() {
  const [isDarkTheme, setIsDarkTheme] = useState(true);

  const handleButton = () => {
    setIsDarkTheme(!isDarkTheme);
  };

  return (
    <>
      <ThemeProvider theme={isDarkTheme ? Theme : LightTheme}>
        <Container>
          <ContainerTheme>
            <TitleTheme>Título com Tema Variável</TitleTheme>
            <ButtonWithTheme onClick={handleButton}>
              Click Para mudar o tema
            </ButtonWithTheme>
          </ContainerTheme>
        </Container>
      </ThemeProvider>
    </>
  );
}
//Manter restante do código abaixo

Leia também:
Saiba como fazer validação de formulário

Autor: Alexandre Roberto Lima da Silva.

[adrotate banner=”5″]

O post Saiba como utilizar Theme Provider com styled-components apareceu primeiro em Luby Software.

[adrotate banner=”4″]

Sendo assim, para poder otimizar o tempo de desenvolvimento de um projeto e entender em que ponto está esse desenvolvimento, os commits se fazem extremamente necessários. Por conta disso, eles precisam ser levados a sério e nomeados da melhor e mais clara maneira possível.

Assim, utilizar Padrões de Commits, também chamados de Conventional Commits ou Commits Semânticos, é uma excelente forma de melhorar os seus commits.

O que são commits e padrões de commits?

Os commits são basicamente o estado em que o projeto se encontra na linha do tempo. Ou seja, a versão do projeto naquele momento em que o commit foi criado.

Assim, os padrões de commits são uma série de convenções e boas práticas, que descrevem e dão uma boa noção para nomear as mensagens dos commits, de modo a deixá-los mais claros, bem estruturados e específicos. Em outras palavras, os padrões de commits auxiliam os desenvolvedores a nomear os commits para que eles digam exatamente qual foi a natureza da mudança e que mudança foi feita.

Vale ressaltar que essas regras, além de ajudar o desenvolvedor, irão também auxiliar o time, os novos membros da equipe, o público no geral, os clientes e todos os demais stakeholders. Isso porque, como todos os commits agora seguem uma regra específica e comunicam bem a natureza da sua alteração, todos conseguem entender exatamente o que aquela mudança faz, no que o time está trabalhando no
momento, em que estado se encontra o projeto, etc.

Como utilizar padrões de commits nos projetos?

Agora que já foi definido o que são commits semânticos, vamos entender como utilizá-lo na prática.

Basicamente, as regras são bem simples de compreender, como mostra o exemplo abaixo:

Essa estrutura requer um tipo (obrigatório) para indicar qual foi a natureza da mudança, um escopo ou contexto do commit (opcional), uma descrição (obrigatório) para informar qual foi a mudança feita, um corpo para descrições mais detalhadas (opcional) e um rodapé (opcional).

Então, neste artigo, abordaremos apenas os pontos obrigatórios e o escopo, que são os mais utilizados no dia a dia.

Tipos de commits

Para indicar bem qual foi a mudança realizada no projeto, é importante conhecer os tipos de commits que podem ser aplicados. Dessa forma, eles seguem as regras da tabela a seguir:

Escopo de commits

O escopo de commit serve basicamente para contextualizar o commit, indicando quais pontos do sistema essa mudança irá afetar. Então, apesar de não ser obrigatório, o escopo é muito útil principalmente em projetos grandes, com diversas features e escopos diferentes.

Dessa forma, informar os impactos do trecho de código nos commits auxilia em todas as etapas de desenvolvimento do projeto.

Abaixo, segue um exemplo de utilização do escopo para informar a adição de uma nova feature que atualiza os dados do usuário.

Descrição do commit

A descrição precisa ser o mais curta, clara e objetiva possível. O recomendado é que ela inicie com algum verbo que indique a alteração e tenha entre 4 e 6 palavras (no máximo) que descreva o que – de fato – foi alterado no projeto.

Entretanto, para descrições mais detalhadas, tente manter o padrão de 4 a 6 palavras na primeira linha e utilize o corpo do commit para descrever em maiores detalhes o que foi alterado. Abaixo segue um exemplo para ilustrar melhor.

Então, o exemplo acima apresenta duas maneiras de nomear a adição de uma nova feature. Assim, ambas passam o mesmo significado. Porém, a primeira é mais clara e objetiva, enquanto a segunda apresenta mais informações que não são tão relevantes.

Conclusão

Utilizar os padrões de commits no dia a dia é, sem sombra de dúvidas, necessário. Principalmente em grandes projetos, em que existem inúmeras features que, com o passar do tempo, pode acabar ficando caótico navegar na linha do tempo dos commits.

Assim, utilizar o conjunto de regras apresentadas neste artigo permitirá que tanto desenvolvedores quanto todos os demais stakeholders consigam entender em que estado do desenvolvimento a aplicação se encontra, quais features já foram implementadas e em que escopo elas afetarão.

Dessa forma, quando for fazer um novo commit, lembre-se de aplicar essas regras.

Veja também:

Como Padronizar Códigos com Style Guides

Autor: Junior Vinicius Silva.

[adrotate banner=”5″]

O post Padrões de Commits: por que utilizar? apareceu primeiro em Luby Software.

[adrotate banner=”4″]

Nada é mais inconveniente do que desenvolver em um projeto com o código mal organizado e não padronizado. Isso gera grandes dificuldades para que outros programadores consigam compreender ou manter o código.

Nós programadores não devemos desenvolver sistemas pensando apenas em si. Mas também precisamos levar em consideração as pessoas que podem ter acesso ao nosso código.

E, para solucionar esse problema, surgiram as Styles Guides (ou guias de estilos), que definem regras que serão aplicadas em nossos códigos com auxílio de algumas ferramentas. Isso para manter os códigos padronizados e organizados, aumentando a produtividade entre todos os desenvolvedores.

O que são Style Guides?

Style Guides são guias que definem um conjunto de padrões que nos orientam a manter um código bem organizado e estruturado. Eles abordam questões como nomeação de arquivos e variáveis, sintaxe, comentários, importação de módulos, entre vários outros temas.

Veja um exemplo de uma das regras para formatação de estruturas em blocos:

Atualmente, existem alguns guias que são muito utilizados em diversos projetos como:

• Google Style Guides que abrange diversas linguagens de programação;
• Airbnb React/JSX Style Guide para a biblioteca React.

Cada guia define suas próprias convenções. Então, antes de escolher qualquer guia, é importante analisar qual melhor se adequa ao projeto e ao time de desenvolvimento.

Como aplicar um Style Guide em projetos?

Além de aplicar as convenções de um Style Guide durante a escrita do código, algumas dessas convenções são tarefas repetitivas. Dessa forma, podem ser automatizadas com o uso de algumas ferramentas como ESLint, EditorConfig e Prettier.

Neste artigo, vamos conhecer um pouco sobre cada uma delas.

ESLint

O ESLint é uma das ferramentas mais utilizadas para identificar e corrigir código JavaScript/Typescript que não segue os padrões estabelecidos. Essa ferramenta permite ser configurada com um Style Guide já consolidado ou de forma personalizada, de acordo com as regras disponíveis.

Assim, pode ser utilizado para identificar possíveis erros na lógica, na formatação ou sugestões de melhorias no código.

Para utilizar o ESLint, precisamos instalar a dependência no projeto com yarn add -D eslint, iniciar a configuração com yarn run eslint –init e definir as regras customizadas ou utilizar template já consolidado.

No arquivo criado na raiz do projeto com o nome .eslintrc.json, na propriedade “rules”, podemos adicionar, editar ou sobrescrever alguma regra. Como no exemplo a seguir, que define os nomes de funções e variável no estilo camelcase (não permite comentários na mesma linha do código, o ponto e vírgula deve ser inserido no final da linha e deve ser utilizado aspas duplas, consecutivamente):

Para quem utiliza o VS Code, poderá instalar o plugin ESLint, e quando um trecho de código não seguir essas regras, será apresentado um erro na linha como no exemplo abaixo, solicitando a correção:

O ESLint possui diversas outras regras e possibilidades de integração com outras ferramentas para tornar automática a aplicação dessas regras, como veremos em um tópico posterior.

Mais regras do SLint: https://eslint.org/docs/latest/rules/

EditorConfig

O EditorConfig é uma ferramenta utilizada para padronizar a formatação da estruturação do código independente do editor ou IDE, como definição de indentação, charset, remoção de espaços em branco no final da linha e quebra de linha no final do arquivo.

Várias IDEs e editores disponibilizam um plugin nativo para configurar e aplicar o EditorConfig. Então, basta criar um arquivo com nome .editorconfig na raiz do projeto, e logo adicionar as regras de formatação, como no exemplo abaixo:

Uma das peculiaridades do EditorConfig é permitir criar este arquivo de configurações em diretórios específicos. Com isso, precisamos utilizar a propriedade root = true para definir qual é o arquivo principal de configurações.

Além disso, podemos definir propriedades de acordo com a extensão do arquivo. No exemplo, definimos a codificação de caracteres como charset = utf-8 para todos os arquivos, e configurações diferentes para arquivos que terminam com .ts e .tsx em relação a arquivos que terminam com .json.

Outras propriedades que podemos configurar são:

• indent_style: para definir o estilo de indentação do código;
• indent_size: para definir a quantidade de espaços ou tabulação da indentação;
• trim_trailing_whitespace: para definir se haverá remoção de espaços em branco no final da linha;
• insert_final_newline: para definir se haverá uma linha vazia no final do arquivo.

Mais sobre EditorConfig: https://editorconfig.org/

Prettier

O Prettier é um formatador de código automático, ou seja, ele garante que o código esteja formatado de acordo com as regras estabelecidas.

Ainda que essa ferramenta aceite um arquivo de configuração contendo as regras de formatação, ela pode ser configurada para trabalhar em conjunto com o ESLint. Para quem utiliza o editor VS Code, basta instalar o plugin Prettier – Code formatter e, no arquivo JSON de configuração do VS Code, adicionar as seguintes linhas:

Com isso, conseguimos integrar o Prettier para utilizar as regras de formatação estabelecidas no ESLint, além de aplicar essas regras automaticamente toda vez que salvamos o arquivo que contém o código.

Mais sobre Prettier: https://prettier.io/

Conclusão

O uso dos Style Guides deixam nossos projetos bem organizados e estruturados, facilitando a compreensão do código por todo o time de desenvolvimento ou até mesmo por outros programadores.

Com o uso de ferramentas que automatizam a aplicação desses guias, conseguimos melhorar nossa produtividade, além de possibilitar a obrigatoriedade dessas regras para todos que manipulam o código.

Autor: Igor Pimentel Gusmão Fragôso de Souza.

[adrotate banner=”5″]

O post Como Padronizar Códigos com Style Guides e ESlint, EditorConfig e Prettier apareceu primeiro em Luby Software.