@grazziotin/react-components

Biblioteca de componentes React em TypeScript para uso em projetos Grazziotin.

Instalação

npm install @grazziotin/react-components

Dependências (peer dependencies)

A biblioteca não inclui React nem MUI; o projeto que a consome deve tê-los instalados:

npm @mui/material @mui/icons-material

• react e react-dom >= 17
• @mui/material e @mui/icons-material >= 7

Importar o CSS do tema

Componentes que usam classes do tema (como bg-grzprimary, text-system-900) precisam do CSS da lib no seu app. No ponto de entrada da aplicação (ex.: main.tsx, App.tsx ou _app.tsx), adicione:

import '@grazziotin/react-components/dist/theme.css'

Sem essa importação, classes como bg-grzprimary e bg-grzsecondary não terão efeito no cliente.

Storybook

Documentação visual dos componentes:

https://grazziotinsa.github.io/react-components/

Lá você encontra Input, Dialog, InputSelectMultiple, Filtro, BarcodeDialog e demais componentes, com exemplos e controles para testar as props.

Resumo dos exports (pacote npm)

| Exportado | Descrição | | ----------------- | ---------------------------------------------- | | Input | Campo de texto com máscaras e Enter | | InputProps | Tipo das props do Input | | Dialog | Modal com título, conteúdo e ações | | DialogProps | Tipo das props do Dialog | | Card | Card com título opcional, bordas e ações | | CardProps | Tipo das props do Card | | DataTable | Tabela de dados (Data Grid) com filtros e paginação pt-BR | | DataTableProps | Tipo das props do DataTable (DataGridProps) | | Tabs | Abas de navegação baseadas no MUI Tabs (cor padrão #00b2a6) | | TabsProps | Tipo das props do componente Tabs | | InputSelectMultiple | Select (simples ou múltiplo, Autocomplete + Input) | | InputSelectProps | Tipo das props do InputSelectMultiple |

No repositório (Storybook): Filtro e BarcodeDialog existem no código-fonte e aparecem no Storybook (veja a seção Storybook acima). Eles não são publicados no npm por dependerem de Mantine, exceljs, etc.

Licença

MIT © GrazziotinSA