prover-components

Biblioteca de componentes UI da Prover — construída com React, TypeScript, Tailwind CSS v4 e Radix UI.

Instalação

npm install prover-components

yarn add prover-components

Peer Dependencies

Certifique-se de que os seguintes pacotes estão instalados no projeto consumidor:

npm install react@^19 react-dom@^19 next@^15 tailwindcss@^4 radix-ui lucide-react class-variance-authority @tanstack/react-table

Uso

import { Button, Input, Select, DataTable, TitlePage } from 'prover-components';

Nota: O Button exportado é o componente UI com variantes (Radix UI). O Button simples está disponível como StoryButton.

Componentes

UI

Button

Botão com variantes e tamanhos configuráveis.

import { Button } from 'prover-components';

<Button variant="default">Salvar</Button>
<Button variant="destructive">Excluir</Button>
<Button variant="outline" size="sm">Cancelar</Button>

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | variant | default | destructive | outline | secondary | ghost | link | default | Estilo visual | | size | default | xs | sm | lg | icon | icon-xs | icon-sm | icon-lg | default | Tamanho | | asChild | boolean | false | Renderiza como elemento filho (Slot) | | disabled | boolean | false | Desabilita o botão |

Input

Campo de texto com suporte a todos os tipos HTML.

import { Input } from 'prover-components';

<Input type="text" placeholder="Nome completo" />
<Input type="email" placeholder="[email protected]" />
<Input type="password" placeholder="Senha" disabled />

| Prop | Tipo | Descrição | |------|------|-----------| | type | string | Tipo HTML do input | | placeholder | string | Texto placeholder | | disabled | boolean | Desabilita o campo | | aria-invalid | boolean | Aplica estilo de erro |

Textarea

Área de texto com redimensionamento automático.

import { Textarea } from 'prover-components';

<Textarea placeholder="Escreva sua mensagem..." />

Label

Label acessível para associar a campos de formulário.

import { Label, Input } from 'prover-components';

<Label htmlFor="email">E-mail</Label>
<Input id="email" type="email" />

Checkbox

Checkbox com suporte ao estado indeterminado.

import { Checkbox } from 'prover-components';

<Checkbox defaultChecked />
<Checkbox checked="indeterminate" />
<Checkbox disabled />

| Prop | Tipo | Descrição | |------|------|-----------| | checked | boolean | indeterminate | Estado controlado | | defaultChecked | boolean | Estado inicial | | disabled | boolean | Desabilita o checkbox | | onCheckedChange | (checked: boolean) => void | Callback de mudança |

Select

Dropdown de seleção baseado em Radix UI.

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from 'prover-components';

<Select defaultValue="op1">
  <SelectTrigger className="w-48">
    <SelectValue placeholder="Selecione..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="op1">Opção 1</SelectItem>
    <SelectItem value="op2">Opção 2</SelectItem>
  </SelectContent>
</Select>

InputGroup

Wrapper que combina Input com ícones, texto ou botões.

import {
  InputGroup,
  InputGroupInput,
  InputGroupAddon,
} from 'prover-components';
import { SearchIcon } from 'lucide-react';

<InputGroup>
  <InputGroupInput placeholder="Buscar..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

| Componente | Descrição | |------------|-----------| | InputGroup | Container wrapper | | InputGroupInput | Campo de texto interno | | InputGroupTextarea | Textarea interna | | InputGroupAddon | Addon com ícone ou texto (align: inline-start | inline-end | block-start | block-end) | | InputGroupButton | Botão interno | | InputGroupText | Texto estático interno |

DropdownMenu

Menu dropdown com suporte a checkbox, radio e submenus.

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
} from 'prover-components';
import { Button } from 'prover-components';

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Opções</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Editar</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">Excluir</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

BackButton

Link de navegação com ícone opcional, usando Next.js Link.

import { BackButton } from 'prover-components';
import { ArrowLeft } from 'lucide-react';

<BackButton href="/dashboard" label="Voltar" icon={<ArrowLeft size={16} />} />

| Prop | Tipo | Descrição | |------|------|-----------| | href | string | URL de destino | | label | string | Texto do botão | | icon | ReactNode | Ícone opcional | | className | string | Classes CSS adicionais |

TitlePage

Cabeçalho de página com título e subtítulo.

import { TitlePage } from 'prover-components';

<TitlePage title="Usuários" subtitle="Gerencie os usuários do sistema" />

| Prop | Tipo | Descrição | |------|------|-----------| | title | string | Título principal | | subtitle | string | Subtítulo opcional |

Layout

Table

Primitivas de tabela semântica.

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
  TableCaption,
} from 'prover-components';

<Table>
  <TableCaption>Lista de usuários</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Nome</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Ana Silva</TableCell>
      <TableCell>Ativo</TableCell>
    </TableRow>
  </TableBody>
</Table>

Pagination

Componentes de paginação compostos.

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
} from 'prover-components';

<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
    <PaginationItem><PaginationLink href="#" isActive>1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationNext href="#" /></PaginationItem>
  </PaginationContent>
</Pagination>

PaginationRender

Paginação completa com seletor de itens por página e contador.

import { PaginationRender } from 'prover-components';

<PaginationRender
  currentPage={1}
  totalPages={10}
  allPages={5}
  setPageNumber={setPage}
  setPageSize={setSize}
/>

| Prop | Tipo | Descrição | |------|------|-----------| | currentPage | number | Página atual | | totalPages | number | Itens por página (10, 25, 50, 100) | | allPages | number | Total de páginas | | setPageNumber | Dispatch<SetStateAction<number>> | Muda a página | | setPageSize | Dispatch<SetStateAction<number>> | Muda o tamanho |

DataTable

Tabela completa com filtro, ordenação, paginação e visibilidade de colunas.

import { DataTable } from 'prover-components';
import type { ColumnDef } from '@tanstack/react-table';

type User = { id: number; name: string; email: string };

const columns: ColumnDef<User>[] = [
  { accessorKey: 'id', header: 'ID' },
  { accessorKey: 'name', header: 'Nome' },
  { accessorKey: 'email', header: 'Email' },
];

const CreateButton = () => <button>Novo</button>;

<DataTable
  data={users}
  columns={columns}
  pageNumber={1}
  pageSize={10}
  totalPages={5}
  hasNextPage={true}
  hasPreviousPage={false}
  loading={false}
  ButtonCreate={CreateButton}
  setPageNumber={setPage}
  setPageSize={setSize}
  setFilter={setFilter}
/>

| Prop | Tipo | Descrição | |------|------|-----------| | data | any[] | Dados da tabela | | columns | ColumnDef<any>[] | Definição das colunas | | loading | boolean | Exibe spinner no lugar da tabela | | pageNumber | number | Página atual | | pageSize | number | Itens por página | | totalPages | number | Total de páginas | | hasNextPage | boolean | Existe próxima página | | hasPreviousPage | boolean | Existe página anterior | | ButtonCreate | FC | Componente de criação | | setPageNumber | Dispatch | Muda a página | | setPageSize | Dispatch | Muda o tamanho | | setFilter | Dispatch | Muda o filtro |

Feedback

Spinner

Indicador de carregamento animado.

import { Spinner } from 'prover-components';

<Spinner />
<Spinner className="size-8 text-blue-500" />

| Prop | Tipo | Descrição | |------|------|-----------| | className | string | Classes CSS — use size-* para tamanho |

Desenvolvimento

# Instalar dependências
npm install

# Rodar o Storybook
npm run storybook

# Compilar o pacote
npm run build:lib

# Atualizar a versão (patch)
npm version patch

# Publicar
npm publish --access public

Licença

ISC