Grazziotin React Components Library

Biblioteca de componentes React reutilizáveis para o projeto Grazziotin, construída com TypeScript, Tailwind CSS, Material UI e Mantine.

Instalação

npm install @grazziotin/react-components-next

Instale também as peer dependencies necessárias:

npm install @mui/material @mui/x-data-grid @emotion/react @emotion/styled @mantine/core @mantine/hooks use-immer

Para usar o Drawer (shadcn/Base UI), instale também:

npm install @base-ui/react

Para usar useQueryAuth, instale também:

npm install @tanstack/react-query

Requisitos

• React >= 18
• Material UI (@mui/material, @mui/x-data-grid) e Emotion
• Mantine (@mantine/core, @mantine/hooks)
• GrazziotinProviders (ou ThemeProvider do MUI + MantineProvider) envolvendo a aplicação

Configuração no projeto consumidor

Configure os providers na raiz da aplicação. Os estilos Tailwind da biblioteca são carregados automaticamente ao importar componentes de /ui ou do entry point raiz.

Carregue também a fonte Poppins e os estilos do Mantine:

import "@mantine/core/styles.css";

import { GrazziotinProviders } from "@grazziotin/react-components-next/providers";

No HTML ou CSS global do projeto consumidor:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
/>

:root {
  --primary-color: #00b2a6;
  --font-family: "Poppins", sans-serif;
}

export function AppProviders({ children }: { children: React.ReactNode }) {
  return <GrazziotinProviders>{children}</GrazziotinProviders>;
}

Atenção: a biblioteca referencia Poppins via variáveis CSS, mas não embute o arquivo da fonte — o projeto consumidor precisa carregá-la. Os estilos do Mantine (@mantine/core/styles.css) também são obrigatórios.

Componentes disponíveis

| Componente | Descrição | | ---------------- | --------------------------------------------------------------- | | Card | Container com cabeçalho colorido, título, ícone e tooltip | | Dialog | Modal baseado no MUI com título, conteúdo e ações opcionais | | DataTable | Tabela de dados com MUI DataGrid, filtros e textos em português | | Tab/Tabs | Abas estilizadas com indicador e tipografia customizáveis | | Input | Campo de texto com máscaras e estilização MUI | | InputSelect | Select com grid de opções | | Filter | Drawer de filtros com campos configuráveis | | ButtonQuantity | Controle de quantidade (− / input / +) | | Drawer | Bottom/side sheet composto (Base UI), com floating ou snap |

No iOS Safari, o overlay do Drawer exige no CSS global do app:

body {
  position: relative;
}

Os estilos Tailwind do Drawer vêm injetados com o bundle /ui — não precisa configurar Tailwind nem CSS extra no consumidor (além do body acima, se for iOS).

Acessibilidade

| Export | Descrição | | -------- | ------------------------------------- | | Say | Componente de leitura de tela (toast) | | useSay | Hook para disparar feedback por voz |

Funções utilitárias

| Função | Descrição | | -------------------- | ------------------------------------------------ | | cn | Mescla classes CSS com clsx e tailwind-merge | | nvl | Retorna valor padrão quando null/undefined | | formatCpfCnpj | Formata CPF ou CNPJ | | formatPhoneBr | Formata telefone brasileiro | | formatPriceBrl | Formata valor monetário em BRL | | formatItem170 | Formata item 170 | | formatItem150 | Formata item 150 | | shortName | Extrai o primeiro e o último nome | | removeDigits | Mantém apenas dígitos | | removeNonDigits | Remove todos os dígitos | | removeTextOnly | Mantém apenas letras | | formatElapsedSince | Formata tempo decorrido como d HH:MM:SS | | formatDateBr | Formata data como DD/MM/YYYY | | formatDateTimeBr | Formata data/hora como DD/MM/YYYY HH:MM:SS |

Hooks

| Hook | Descrição | | -------------- | ----------------------------------------------------- | | useNow | Retorna o timestamp atual atualizado a cada intervalo | | useDebounce | Retorna o valor com debounce | | useQueryAuth | useQuery que só roda quando autenticado |

Uso

import {
  Card,
  DataTable,
  cn,
  formatCpfCnpj,
} from "@grazziotin/react-components-next";
import type { GridColDef } from "@mui/x-data-grid";

const colunas: GridColDef[] = [
  { field: "id", headerName: "ID", width: 80 },
  { field: "nome", headerName: "Nome", flex: 1 },
  { field: "documento", headerName: "CPF/CNPJ", width: 180 },
];

const linhas = [
  { id: 1, nome: "Ana Silva", documento: formatCpfCnpj("12345678901") },
];

export function Example() {
  return (
    <Card title="Colaboradores" toolTip className={cn("max-w-3xl")}>
      <DataTable rows={linhas} columns={colunas} pageSizeOptions={[10, 20]} />
    </Card>
  );
}

Entry points

A biblioteca expõe múltiplos pontos de entrada:

| Import | Conteúdo | | ------------------------------------------------- | ----------------------------------------------------------------------------- | | @grazziotin/react-components-next | Componentes, funções, hooks, acessibilidade e providers | | @grazziotin/react-components-next/ui | Apenas componentes de UI | | @grazziotin/react-components-next/functions | Apenas funções utilitárias | | @grazziotin/react-components-next/hooks | Hooks (useNow, useDebounce, useQueryAuth) | | @grazziotin/react-components-next/accessibility | Componentes de acessibilidade (Say, useSay) | | @grazziotin/react-components-next/providers | GrazziotinProviders, AuthProvider, NavigationProvider | | @grazziotin/react-components-next/styles | CSS compilado da biblioteca (opcional — já incluído ao importar /ui ou .) |

Componentes

Card

<Card
  title="Título do card"
  toolTip={false}
  width="100%"
  height="auto"
  titleColor="var(--primary-color)"
  borderRadius="10px"
  borderTitle="10px 10px 0 0"
  icon={<Icon />}
  onClick={() => {}}
  className="text-sm"
>
  Conteúdo do card
</Card>

Dialog

<Dialog
  open={open}
  title="Confirmar exclusão"
  onClose={() => setOpen(false)}
  maxWidth="sm"
  blurBackdrop={false}
  actions={<button onClick={() => setOpen(false)}>OK</button>}
>
  Deseja realmente excluir este item?
</Dialog>

DataTable

Wrapper sobre o MUI DataGrid com estilização, textos em português e operador de filtro "entre" automático para colunas string e number. Aceita todas as props do DataGrid.

<DataTable
  rows={dados}
  columns={colunas}
  loading={carregando}
  pageSizeOptions={[10, 20, 50]}
/>

Tab / Tabs

const [value, setValue] = useState(0);

<Tabs
  value={value}
  onChange={(_, newValue) => setValue(newValue)}
  color="var(--primary-color)"
>
  <Tab label="Geral" />
  <Tab label="Detalhes" />
</Tabs>;

ButtonQuantity

import { ButtonQuantity } from "@grazziotin/react-components-next/ui";

const [qty, setQty] = useState(1);

<ButtonQuantity
  quantity={qty}
  minValue={0}
  maxValue={99}
  size="lg"
  model="soft"
  radius={10}
  onChangeQuantity={setQty}
/>;

Funções

cn

cn("px-4 py-2", condicao && "bg-teal-500", "px-6");

nvl

nvl(valor, "padrão"); // retorna "padrão" se valor for null/undefined

formatCpfCnpj

formatCpfCnpj("12345678901"); // "123.456.789-01"
formatCpfCnpj("12345678000199"); // "12.345.678/0001-99"

formatPhoneBr

formatPhoneBr("11987654321"); // "(11) 98765-4321"
formatPhoneBr("1133334444"); // "(11) 3333-4444"

shortName

shortName("flavia roseane alves de souza"); // "flavia souza"
shortName("João Silva"); // "João Silva"
shortName("Maria"); // "Maria"

removeDigits / removeNonDigits / removeTextOnly

removeDigits("(11) 98765-4321"); // "11987654321"
removeNonDigits("ABC-12.34"); // "ABC-."
removeTextOnly("João 123!"); // "João"

formatElapsedSince

formatElapsedSince(
  "2026-08-06T10:00:00.000Z",
  Date.parse("2026-08-06T11:01:05.000Z"),
);
// "0 01:01:05"

formatDateBr / formatDateTimeBr

formatDateBr("2026-09-10T15:30:45"); // "10/09/2026"
formatDateTimeBr("2026-09-10T15:30:45"); // "10/09/2026 15:30:45"

useNow

import { useNow } from "@grazziotin/react-components-next/hooks";
import { formatElapsedSince } from "@grazziotin/react-components-next/functions";

const now = useNow();
formatElapsedSince(order.createdAt, now);

useDebounce

import { useDebounce } from "@grazziotin/react-components-next/hooks";

const debouncedSearch = useDebounce(search, 300);

useQueryAuth

import { useQueryAuth } from "@grazziotin/react-components-next/hooks";
import { AuthProvider } from "@grazziotin/react-components-next/providers";

<AuthProvider token={sessionToken}>
  <App />
</AuthProvider>;

const { data } = useQueryAuth({
  queryKey: ["orders"],
  queryFn: fetchOrders,
});

Licença

MIT