Qual melhor forma de reutilizar components button? | React

ola pessoal, tenho uma duvida em relacao a componentes reutilizável.

em um projeto grande (40paginas , aproximadamente) seria melhor criar um componente de botao unico ou separado?

digo no sentido de existir 1 botao diferente (com estilos diferentes) em cada pagina.

no meu caso eu criei 10 estilizacoes diferentes no styled-components (com algumas adicoes consegui transforma los em 40) e no componente em si eu criei apenas 3 props :

para receber a estilizacao; para receber o texto do botao (ex: adicionar conta); e receber a função onclick relacionada ao botao.

achei que dessa forma seria mais simples e facil de utilizar pois me foi passado que nao se altera o figma em nada.

contudo a pessoa responsável pelo projeto (projeto voluntario) disse que não se faz componente reutilizável assim e que deve se criar apenas um styled-components e quando usar o botao colocar todas as props necessarias.

mesmo com essa explicacao fiquei com duvida. do por que e como posso alcançar o melhor resultado. obrigado

Exemplo de como deixei meu componente de botao (para receber todos os tipos de botoes que um site deve ter)

import React from "react";
import * as C from "./styles";

interface ButtonProps {
    buttonText: string;
    variant?: "NavIcon" | "NavHome" | "NavItem" | "NavItemSub" | "ShareIconLinkedin" | "ShareIconEmail" | "ShareIconWhatsapp" | "ShareIconTelegram" | "ShareIconFacebook" | "ForgotPassword" | "ConvideSuaEquipeIcon" | "VerDetalhes" | "MyProfileLoginPassword" | "IconSlAdd" | "Cancelar" | "IconLinkedin" | "IconInsta" | "IconTwitter" | "IconFacebook" | "OutraRedeSocial" | "Trash" | "PreVisualizarIcon" | "IconGreatAdd" | "RedButton";
    onClickAction?: React.MouseEventHandler<HTMLButtonElement>;
}

export const Btn: React.FC<ButtonProps> = ( { buttonText, variant = "RedButton", onClickAction }) => {
    const ButtonComponent = {
        NavIcon: C.NavIcon,
        NavHome: C.NavHome,
        NavItem: C.NavItem,
        NavItemSub: C.NavItemSub,
        ShareIconLinkedin: C.ShareSocialMedia,
        ShareIconEmail: C.ShareSocialMedia,
        ShareIconWhatsapp: C.ShareSocialMedia,
        ShareIconTelegram: C.ShareSocialMedia,
        ShareIconFacebook: C.ShareSocialMedia,
        ForgotPassword: C.ForgotPassword,
        ConvideSuaEquipeIcon: C.ConvideSuaEquipeIcon,
        VerDetalhes: C.VerDetalhes,
        MyProfileLoginPassword: C.MyProfileLoginPassword,
        IconSlAdd: C.IconSlAdd,
        Cancelar: C.Cancelar,
        IconLinkedin: C.IconLinkedin,
        IconInsta: C.IconInsta,
        IconTwitter: C.IconTwitter,
        IconFacebook: C.IconFacebook,
        OutraRedeSocial: C.OutraRedeSocial,
        Trash: C.Trash,
        PreVisualizarIcon: C.PreVisualizarIcon,
        IconGreatAdd: C.IconGreatAdd,
        RedButton: C.RedButton
    } [variant] || C.RedButton;

    const IconAfterText = 
        variant === "ShareIconLinkedin" ? <C.IconShareLinkedin /> : (
        variant === "IconLinkedin" ? <C.IconMediaLinkedin /> : (
        variant === "IconInsta" ? <C.IconMediaInsta /> : (
        variant === "IconTwitter" ? <C.IconMediaTwitter/> : (
        variant === "IconFacebook" ? <C.IconMediaFacebook /> : (
        variant === "ShareIconEmail" ? <C.IconShareMail /> : (
        variant === "ShareIconWhatsapp" ? <C.IconShareWhats /> : (
        variant === "ShareIconTelegram" ? <C.IconShareTele /> : (
        variant === "ShareIconFacebook" ? <C.IconShareFace /> : (
        variant === "Trash" ? <C.IconTrash /> : (
        variant === "ConvideSuaEquipeIcon" ? <C.IconComponent /> : (
        variant === "NavIcon" ? <C.IconNav /> : (
        variant === "PreVisualizarIcon" ? <C.IconFileFind /> : null
        )))))))))))
    );

    const FirstIconComponent = variant === "IconGreatAdd" || variant === "IconSlAdd" ? <C.IconMore /> : null;

    return (
        <ButtonComponent onClick={onClickAction}>
            {FirstIconComponent} {buttonText} {IconAfterText}
        </ButtonComponent>
    );
};

e aqui ele esta sendo usado com apenas 3 props :

<Btn buttonText="entrar" variant="RedButton" onClickAction={() => {
    alert("acao");
  }} />

aguardando uma orientação. valeu!

Oi, Conrado, tudo bem?

Entendo a sua dúvida e a complexidade de um projeto grande com muitos botões diferentes. A abordagem que você escolheu, de criar um componente de botão reutilizável com diferentes variantes, é uma prática comum e válida, especialmente em projetos grandes onde a consistência e a reutilização de código são importantes.

No entanto, a pessoa responsável pelo projeto sugeriu uma abordagem diferente, que também é válida. Vamos analisar as duas abordagens:

Sua abordagem: Você criou um componente de botão que aceita diferentes variantes e estilos por meio de props. Isso permite que você reutilize o mesmo componente em diferentes partes do projeto, apenas mudando as props. Aqui estão alguns pontos positivos dessa abordagem:

Reutilização: você tem um único componente que pode ser usado em todo o projeto.
Manutenção: se precisar fazer uma alteração, você só precisa atualizar um componente.
Consistência: garante que todos os botões sigam um padrão consistente.

Abordagem sugerida: A pessoa responsável pelo projeto sugeriu criar um único styled-component e passar todas as props necessárias diretamente no uso do componente. Isso pode significar que você terá um componente mais genérico e flexível. Aqui estão alguns pontos positivos dessa abordagem:

Flexibilidade: cada botão pode ser altamente customizado diretamente onde é usado.
Simplicidade: pode ser mais simples para desenvolvedores que preferem ver todas as props diretamente no uso do componente.

Exemplo da Abordagem sugerida:

import styled from 'styled-components';

const Button = styled.button`
  /* Estilos base aqui */
  ${(props) => props.variant === 'primary' && `
    background-color: blue;
    color: white;
  `}
  ${(props) => props.variant === 'secondary' && `
    background-color: gray;
    color: black;
  `}
  /* Adicione mais variantes conforme necessário */
`;

const App = () => (
  <Button variant="primary" onClick={() => alert("Ação!")}>
    Entrar
  </Button>
);

Ambas as abordagens têm seus méritos e a escolha entre elas pode depender de fatores como a preferência da equipe, a complexidade do projeto e a necessidade de flexibilidade versus consistência. A sua abordagem é bastante robusta e facilita a manutenção e consistência, enquanto a abordagem sugerida pode oferecer mais flexibilidade para customizações específicas.

Todavia, vale ressaltar que como não tenho acesso ao cenário completo do projeto outros testes terão de ser feitos a fim de obter o resultado esperado, mas espero que esta resposta seja um bom ponto de partida para a resolução do seu problema.

Espero ter ajudado. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!