DEV Community: Wesley Rodrigues

Como enviar somente novos commits em uma branch que já foi mesclada.

Wesley Rodrigues — Tue, 07 Jan 2025 17:49:31 +0000

Ao trabalhar no desenvolvimento de software é normal ter alguns problemas para subir nosso código para codebase, neste artigo vou deixar uma dica de como enviar somente os novos commits que você fez em uma determinada branch que já foi mesclada em outra.

Nesse caso você pode ajustar seu Pull Request para conter apenas seus novos commits fazendo o seguinte:

Navegue e atualize sua branch local:

git checkout main  # branch em que mesclou seu Pull Request
git pull origin main

Volte para sua branch em que criou seu Pull Request:

git checkout minha-branch

Faça o rebase:

git rebase main

Force o push:

git push --force

E pronto sua branch de Pull Request vai trazer somente os novos commits que ainda não foram mesclados na sua branch principal.

Dicas para escrever Tailwind CSS de forma limpa

Wesley Rodrigues — Sat, 14 Sep 2024 02:26:19 +0000

Tailwind é uma ótima opção de escolha de estilização para seu projeto se você deseja ter uma ótima produtividade no desenvolvimento e um design flexível em suas aplicações, no entanto, conforme você vai trabalhando em seu projeto vai aumentando de complexidade você pode notar alguns pontos negativos na experiência de desenvolvimento. Sobre isso, resolvi escrever esse artigo para informar dicas para escrever seu código tailwind de forma de "clean".

1. Use o plugin prettier

Para garantir a padronização de código em nossos projetos frontend geralmente utilizamos o conjunto de ferramento eslint + prettier para definir os padrões desejados em nosso código.

Usando tailwind existe um pacote chamado prettier-plugin-tailwindcss ele basicamente vai pegar as classes do tailwind adicionadas no HTML e vai setar um padrão automático e recomendado para manter a consistência em toda a parte do código.

2. Composition Pattern

O design pattern composition é um pattern que basicamente serve para criar estruturas complexas a partir de estruturas mais simples. Em projetos frontend seria criar pequenos componentes que juntos possam formar um componente maior, com isso, é possível criar componentes altamente customizáveis evitando “prop drilling” deixando seu código tailwind mais simples de se ler com essa divisão em pequenos arquivos.

3. TwMerge

O twMerge é uma biblioteca que aumenta o poder do Tailwind, ela serve para mesclar e compor classes do Tailwind e consegue lidar com conflitos de classes que possam gerar em sua aplicação. É bastante útil para aplicações frontend onde podemos ter muitos estilos, funções e interações dinâmicas baseadas em estados.

4. clsx

clsx é uma biblioteca de manipulação de classes CSS que permite combinar, condicionar e de duplicar nomes de classes de forma simples e eficiente.

5. Combinando TwMerge + clsx

Você pode combinar as duas bibliotecas também para criar wrapper e utilizar as duas funcionalidades em conjunto.

import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export const cn = (...inputs: ClassValue[]) => {
  return twMerge(clsx(inputs))
}

6. CVA

Outra biblioteca fantástica para você que sente saudade de utilizar CSS-in-JS é o CVA com ela você consegue criar variantes para seus componentes. E você também pode combinar e utilizar o wrapper cn que criamos anteriormente. Exemplo abaixo de um componente de botão simples:

// components/button.tsx
import { cva, VariantProps } from 'class-variance-authority'
import { ComponentProps } from 'react'
import { cn } from '@/lib/utils'

const buttonStyles = cva('font-semibold border rounded ', {
  variants: {
    variant: {
      primary: [
        'bg-blue-500',
        'text-white',
        'border-transparent',
        'hover:bg-blue-600',
      ],
      secondary: [
        'bg-white',
        'text-gray-800',
        'border-gray-400',
        'hover:bg-gray-100',
      ],
    },
    size: {
      small: ['text-sm', 'py-1', 'px-2'],
      medium: ['text-base', 'py-2', 'px-4'],
    },
  },
  defaultVariants: {
    variant: 'primary',
    size: 'medium',
  },
})

type buttonProps = VariantProps<typeof buttonStyles> & ComponentProps<'button'>

export const Button = ({ variant, size, className, ...props }: buttonProps) => {
  return (
    <button
      {...props}
      className={cn(buttonStyles({ variant, size }), className)}
    />
  )
}

//App.tsx

import { Button } from './button'

export const App = () => {
  <>
    <Button variant={'primary'} size={'medium'}>Primary</Button>
    <Button variant={'secondary'} size={'small'}>Secondary</Button> 
  </>
}

7. Outros

Existem outras bibliotecas semelhantes ao CVA como windstitch e Tawild variants entre outras. Eu tenho pessoalmente gostado de utilizar Tawild variants e creio que vale a pena você testar também.

Conclusão

Utilizando essas dicas em seu projeto frontend com Tailwind CSS você pode aumentar a flexibilidade, legibilidade, reutilização e trazer mais facilidade ao gerenciar suas classes no Tailwind CSS. Facilitando seus possíveis testes end two end trazendo mais facilidade na integração de novas pessoas nos projetos. Com isso, o processo de criação de interfaces modernas, responsivas e interativas fica melhor, aumentando a qualidade do seu código e do seu produto final.

Criando variantes de botões com Styled Components e React Native

Wesley Rodrigues — Tue, 13 Sep 2022 12:17:20 +0000

Nesse artigo, quero mostrar um dos poderes de se utilizar styled components em suas aplicações irei mostrar como criar variações de estilos aos seus botões usando React Native e styled components.

Primeiro criaremos nosso componente Button, com os arquivos index.tsx e styles.ts

Em nosso styles, primeiro criaremos uma tipagem chamada de “ButtonVariant” onde passaremos os nomes das variantes e adicionamos esse export pois aproveitaremos essa tipagem para usar mais a frente em nosso index.tsx, após isso criaremos mais duas tipagem uma chamada de ButtonContainerProps e outra de ColorTextProps as duas vão ser responsáveis de passar a prop variant para os nossos estilos.



export type ButtonVariant = 'primary' | 'secondary' | 'outline';

type ButtonContainerProps = {
  variant: ButtonVariant
}

type ColorTextProps = {
  variant: ButtonVariant
}

Logo após isso criaremos dois objetos o “backgroundVariant” e a “textVariant” esses dois objetos irão receber as cores de cada variação sendo que o “backgroundVariant” mudará a cor de fundo e o “textVariant” mudará a cor do texto do nosso botão.



const backgroundVariant = {
  primary: '#16003B',
  secondary: '#006E7F',
  outline: 'tranparent',
}
const textVariant = {
  primary: '#fcda3c',
  secondary: '#fff',
  outline: '#000',
}

Vamos no nosso index.tsx, adicionaremos uma nova tipagem chamada de ButtonProps ela vai receber uma “variant” do tipo ButtonVariant que é aquela mesma que criamos em nosso style, por isso colocamos aquele export nela para ser possível fazermos o import da mesma aqui no index.tsx. Dentro da função de Button devemos passar como parâmetro a variant vinda do ButtonProps, além disso eu coloquei como default a variante “primary” para caso o button não receba uma “variant” o botão inicie com as cores de “primary”.

As tags ButtonContainer e Title vão vir dos nossos styles, é importante que passamos para essas tags o variant para que a mudança de cor ocorra com sucesso.



import { ButtonContainer, ButtonVariant, Title } from './styles';

type ButtonProps = {
  variant: ButtonVariant;
};

export function Button({ variant = 'primary' }: ButtonProps) {
  return (
    <ButtonContainer variant={variant}>
      <Title variant={variant}>Enviar</Title>
    </ButtonContainer>
  );
}

Agora voltando em nosso styles.ts, iremos estilar nosso botão e capturar os valores das nossas variantes.

A sintaxe do styled components tem essa cara como podemos ver abaixo, primeiro dizemos que elemento que queremos é um TouchableOpacity do react native e passamos a nossa tipagem de ButtonConatainerProps para ele também. Para saber qual variante foi passada para o botão é que veem uma das vantagens de usar o styled components, utilizando “${}” podemos escrever javascript e assim acessar nossas props, nesse exemplo para definir o background-color utilizei o o objeto de backgroundVariant que criamos anteriormente para pegar o valor hexadecimal da cor. Somado isso, com a utilização de javascript podemos fazer condições que estamos acostumados e assim definir novas propriedades para cada variação, no exemplo usei o operador ternário para definir a cor do border do botão para cada variante.



export const ButtonContainer = styled.TouchableOpacity<ButtonContainerProps>`
 width: 80%;
 border-radius:5px;
 padding: 18px;
 margin-top: 50px;

 ${props => {
 return css`
    background-color:${backgroundVariant[props.variant]};

    border: solid 1px ${props.variant === 'primary' ?
    backgroundVariant[props.variant] : props.variant === 'secondary' ?
          '#006E7F' : '#000'};
`
  }}
`;

Para definir a cor do texto segue os mesmos princípios e funcionamentos citados anteriormente, a diferença é que aqui usaremos a tipagem de ColorTextProps e o objeto que passamos é o textVariant.



export const Title = styled.Text<ColorTextProps>`
  text-align: center;
  font-size: 14px;
  font-weight: 700;

  ${props => {
    return css`color:${textVariant[props.variant]};`
  }}

`;

Por fim podemos usar nossos Buttons passando qual variação queremos, aqui está o resultado final:

Conclusão

Sendo assim, vimos um pouco dos poderes e benefícios da utilização do Styled Components em conjunto com React Native, e como as duas ferramentas são aliadas na construção de interfaces escaláveis e reutilizáveis. Espero que tenham gostado valeu e fui.