Add reusable UI components and refactor utilities for clarity

[pedrolucasvsr]

Criação base do componentes reutilizáveis sem o design final

[oEnzoRibas]

Criação base do componentes reutilizáveis sem o design final

Recomendação: Coloque uma descrição mais detalhada do PR. Pode até usar o github Copilot.

Primeiro vem o título. Ele precisa resumir a mudança em uma frase curta e específica. Algo como “Add JWT authentication to login endpoint” comunica muito mais que “update backend”.

Depois entra o contexto ou problema. Aqui você explica por que o PR existe. Muitas vezes o código faz sentido apenas quando se entende o problema original: bug reportado, melhoria de performance, refatoração necessária, requisito novo, dívida técnica, etc.

Em seguida vem a descrição das mudanças. É a parte central. Você explica o que foi alterado no código: arquivos principais modificados, novas funcionalidades, refatorações, mudanças de arquitetura, endpoints criados ou removidos, alterações de dependências.

Depois aparece a justificativa técnica. Nem sempre é obrigatório, mas em mudanças mais complexas é importante explicar por que essa solução foi escolhida. Pode envolver trade-offs, decisões de arquitetura, bibliotecas escolhidas ou limitações do sistema.

Outro item importante é como testar. Aqui você explica passo a passo como alguém pode validar o PR: comandos para rodar

[oEnzoRibas]

Adiconar Testes com @testing-library/react para cada componente conforme exemplo feito como o component Button.

Ex: Button.test.tsx

import { render, screen } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
import { describe, it, expect, vi } from "vitest"
import { Button } from "./Button"

describe("Button component",
() => {

    /**
     * Testa se o botão renderiza o texto corretamente
     * 
     *  */ 
    it("renders button text", () => {
        render(<Button>Click</Button>)

        const btn = screen.getByRole("button")

        expect(btn).toBeInTheDocument()
        expect(btn).toHaveTextContent("Click")
    })

    /**
     * Testa se a variante primária é aplicada por padrão
     */
    it("applies primary variant by default", () => {
    render(<Button>Click</Button>)

    const btn = screen.getByRole("button")

    expect(btn.className).toContain("bg-blue-600")
    })

    /**
     * Testa se a variante secundária é aplicada quando especificada
     */
    it("applies secondary variant", () => {
    render(<Button variant="secondary">Click</Button>)

    const btn = screen.getByRole("button")

    expect(btn.className).toContain("bg-gray-200")
    })

    /**
     * Testa se o evento onClick é disparado corretamente
     */
    it("fires onClick", async () => {
    const user = userEvent.setup()
    const handleClick = vi.fn()

    render(<Button onClick={handleClick}>Click</Button>)

    const btn = screen.getByRole("button")

    await user.click(btn)

    expect(handleClick).toHaveBeenCalledTimes(1)
    })

})

Também adicionar Documentação nos testes.

Para rodar os testes:

npx vitest