@grazziotin/react-components-next 1.0.0 → 1.0.1

package/README.md

@@ -1,132 +1,205 @@
-# React Components Library
+# Grazziotin React Components Library
 
-Biblioteca de componentes React reutilizáveis, construída com TypeScript e Tailwind CSS.
+Biblioteca de componentes React reutilizáveis para o projeto Grazziotin, construída com TypeScript, Tailwind CSS, Material UI e Mantine.
 
 ## Instalação
 
 ```bash
-npm install react-components-next
+npm install @grazziotin/react-components-next
 ```
 
-> **Atenção:** esta biblioteca usa classes do Tailwind CSS. Certifique-se de que o Tailwind esteja configurado no seu projeto.
+### Requisitos
+
+- React `>= 18`
+- Tailwind CSS v4 configurado no projeto consumidor
+- `ThemeProvider` do MUI e `MantineProvider` do Mantine envolvendo a aplicação
+
+### Configuração no projeto consumidor
+
+Importe os estilos da biblioteca e configure as variáveis CSS do tema:
+
+```tsx
+import "@grazziotin/react-components-next/styles";
+
+import { CssBaseline, ThemeProvider, createTheme } from "@mui/material";
+import { MantineProvider } from "@mantine/core";
+import "@mantine/core/styles.css";
+
+const theme = createTheme({
+  typography: { fontFamily: "var(--font-family, inherit)" },
+});
+
+export function AppProviders({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <MantineProvider>{children}</MantineProvider>
+    </ThemeProvider>
+  );
+}
+```
+
+```css
+:root {
+  --primary-color: #00b2a6;
+  --font-family: "Poppins", sans-serif;
+}
+```
+
+> **Atenção:** vários componentes usam classes do Tailwind CSS e dependem do MUI/Mantine. Certifique-se de que o Tailwind esteja configurado e os providers estejam na raiz da aplicação.
 
 ## Componentes disponíveis
 
-| Componente | Descrição                                        |
-| ---------- | ------------------------------------------------ |
-| `Button`   | Botão com variantes, tamanhos, loading e ícones  |
-| `Input`    | Campo de entrada com label, hint, erro e addons  |
-| `Card`     | Container com header, content e footer compostos |
-| `Badge`    | Etiqueta colorida para status e categorias       |
-| `Avatar`   | Foto de perfil com fallback de iniciais          |
+| 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       |
+
+## 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                      |
 
 ## Uso
 
 ```tsx
 import {
-  Button,
   Card,
-  CardHeader,
-  CardTitle,
-  CardContent,
-  Input,
-  Badge,
-  Avatar,
-} from "react-components-next";
+  Dialog,
+  DataTable,
+  Tab,
+  Tabs,
+  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>
-      <CardHeader>
-        <CardTitle>Perfil</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="flex items-center gap-3">
-          <Avatar fallback="João Silva" size="md" />
-          <div>
-            <p>João Silva</p>
-            <Badge variant="success" dot>
-              Online
-            </Badge>
-          </div>
-        </div>
-        <Input label="E-mail" type="email" placeholder="joao@exemplo.com" />
-        <Button variant="primary" fullWidth>
-          Salvar
-        </Button>
-      </CardContent>
+    <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 e funções (export principal) |
+| `@grazziotin/react-components-next/ui`        | Apenas componentes de UI                 |
+| `@grazziotin/react-components-next/functions` | Apenas funções utilitárias               |
+| `@grazziotin/react-components-next/styles`    | CSS compilado da biblioteca              |
+
 ## Componentes
 
-### Button
+### Card
 
 ```tsx
-<Button
-  variant="primary" // "primary" | "secondary" | "outline" | "ghost" | "destructive"
-  size="md" // "sm" | "md" | "lg"
-  loading={false} // boolean
-  fullWidth={false} // boolean
-  leftIcon={<Icon />} // ReactNode
-  rightIcon={<Icon />} // ReactNode
+<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"
 >
-  Clique aqui
-</Button>
+  Conteúdo do card
+</Card>
 ```
 
-### Input
+### Dialog
 
 ```tsx
-<Input
-  label="Nome"
-  placeholder="Digite..."
-  hint="Texto de ajuda"
-  error="Mensagem de erro"
-  size="md" // "sm" | "md" | "lg"
-  leftAddon={<Icon />} // ReactNode
-  rightAddon={<Icon />} // ReactNode
-  fullWidth={false}
-/>
+<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>
 ```
 
-### Card
+### 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`.
 
 ```tsx
-<Card shadow="sm" padding="md" hoverable bordered>
-  <CardHeader>
-    <CardTitle>Título</CardTitle>
-    <CardDescription>Descrição</CardDescription>
-  </CardHeader>
-  <CardContent>Conteúdo</CardContent>
-  <CardFooter>
-    <Button>Ação</Button>
-  </CardFooter>
-</Card>
+<DataTable
+  rows={dados}
+  columns={colunas}
+  loading={carregando}
+  pageSizeOptions={[10, 20, 50]}
+/>
 ```
 
-### Badge
+### Tab / Tabs
 
 ```tsx
-<Badge
-  variant="success" // "default" | "primary" | "success" | "warning" | "danger" | "info"
-  dot={false} // boolean - exibe um ponto colorido
+const [value, setValue] = useState(0);
+
+<Tabs
+  value={value}
+  onChange={(_, newValue) => setValue(newValue)}
+  color="var(--primary-color)"
 >
-  Online
-</Badge>
+  <Tab label="Geral" />
+  <Tab label="Detalhes" />
+</Tabs>;
+```
+
+## Funções
+
+### cn
+
+```tsx
+cn("px-4 py-2", condicao && "bg-teal-500", "px-6");
 ```
 
-### Avatar
+### nvl
 
 ```tsx
-<Avatar
-  src="https://..." // URL da imagem (opcional)
-  alt="Nome do usuário"
-  fallback="João Silva" // usado para gerar as iniciais
-  size="md" // "xs" | "sm" | "md" | "lg" | "xl"
-/>
+nvl(valor, "padrão"); // retorna "padrão" se valor for null/undefined
+```
+
+### formatCpfCnpj
+
+```tsx
+formatCpfCnpj("12345678901"); // "123.456.789-01"
+formatCpfCnpj("12345678000199"); // "12.345.678/0001-99"
+```
+
+### formatPhoneBr
+
+```tsx
+formatPhoneBr("11987654321"); // "(11) 98765-4321"
+formatPhoneBr("1133334444"); // "(11) 3333-4444"
 ```
 
 ## Desenvolvimento
@@ -135,17 +208,20 @@ export function Example() {
 # Instalar dependências
 npm install
 
-# Rodar servidor de desenvolvimento com showcase
-npm run dev
+# Storybook (visualização e documentação dos componentes)
+npm run storybook
+
+# Build estático do Storybook
+npm run build-storybook
 
 # Build da biblioteca para npm
 npm run build:lib
 
-# Build completo (biblioteca + Next.js)
-npm run build:all
-
 # Verificar tipos TypeScript
 npm run type-check
+
+# Lint
+npm run lint
 ```
 
 ## Publicar no npm
@@ -162,24 +238,27 @@ npm publish
 
 ```
 src/
-├── app/                   # Next.js App Router (showcase)
-│   ├── page.tsx           # Página inicial com lista de componentes
-│   └── showcase/          # Páginas de demonstração
-│       ├── button/
-│       ├── input/
-│       ├── card/
-│       ├── badge/
-│       └── avatar/
-├── components/            # Biblioteca de componentes (publicada no npm)
-│   ├── index.ts           # Entrypoint principal
+├── app/                        # Next.js App Router (página inicial mínima)
+│   ├── globals.css             # Variáveis CSS e tema
+│   ├── layout.tsx              # Providers MUI + Mantine
+│   └── page.tsx
+├── components/
+│   ├── index.ts
 │   └── ui/
-│       ├── Button/
-│       ├── Input/
-│       ├── Card/
-│       ├── Badge/
-│       └── Avatar/
-└── lib/
-    └── utils.ts           # Utilitário cn() para classes CSS
+│       ├── card/
+│       ├── dialog/
+│       ├── data-table/
+│       └── tab/
+├── core/                       # Utilitários internos
+├── functions/
+│   ├── cn/
+│   ├── nvl/
+│   ├── format-cpf-cnpj/
+│   └── format-phone-br/
+├── providers/
+├── styles/
+│   └── index.css               # Entrada do Tailwind para o build CSS
+└── index.ts                    # Entrypoint principal da biblioteca
 ```
 
 ## Licença

package/dist/{chunk-NHHZBMJL.mjs → chunk-4DIPDYEU.mjs}

@@ -2,6 +2,8 @@ import { twMerge } from 'tailwind-merge';
 import { clsx } from 'clsx';
 
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -17,6 +19,19 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 function cn(...values) {
   return twMerge(clsx(values));
 }
@@ -59,6 +74,6 @@ function formatPhoneBr(phone) {
   return digits.replace(/(\d{2})(\d{5})(\d+)/, "($1) $2-$3");
 }
 
-export { __spreadValues, cn, formatCpfCnpj, formatPhoneBr, nvl };
-//# sourceMappingURL=chunk-NHHZBMJL.mjs.map
-//# sourceMappingURL=chunk-NHHZBMJL.mjs.map
+export { __objRest, __spreadProps, __spreadValues, cn, formatCpfCnpj, formatPhoneBr, nvl };
+//# sourceMappingURL=chunk-4DIPDYEU.mjs.map
+//# sourceMappingURL=chunk-4DIPDYEU.mjs.map

package/dist/chunk-4DIPDYEU.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/functions/cn/cn.ts","../src/functions/nvl/nvl.ts","../src/core/remove-digits.ts","../src/functions/format-cpf-cnpj/format-cpf-cnpj.ts","../src/functions/format-phone-br/format-phone-br.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;;;ACIO,SAAS,GAAA,CAAO,OAA6B,YAAA,EAAoB;AACtE,EAAA,OAAO,KAAA,IAAA,IAAA,GAAA,KAAA,GAAS,YAAA;AAClB;;;ACXO,SAAS,aAAa,KAAA,EAAuB;AAClD,EAAA,OAAO,KAAA,CAAM,OAAA,CAAQ,KAAA,EAAO,EAAE,CAAA;AAChC;;;ACOO,SAAS,cAAc,IAAA,EAAuB;AACnD,EAAA,IAAI,CAAC,MAAM,OAAO,EAAA;AAClB,EAAA,MAAM,KAAA,GAAQ,aAAa,IAAI,CAAA;AAE/B,EAAA,IAAI,CAAC,OAAO,OAAO,EAAA;AACnB,EAAA,IAAI,KAAA,CAAM,UAAU,EAAA,EAAI;AACtB,IAAA,MAAM,GAAA,GAAM,KAAA,CAAM,KAAA,CAAM,CAAA,EAAG,EAAE,CAAA;AAC7B,IAAA,OAAO,GAAA,CACJ,OAAA,CAAQ,aAAA,EAAe,OAAO,CAAA,CAC9B,OAAA,CAAQ,aAAA,EAAe,OAAO,CAAA,CAC9B,OAAA,CAAQ,mBAAA,EAAqB,OAAO,CAAA;AAAA,EACzC;AAEA,EAAA,MAAM,IAAA,GAAO,KAAA,CAAM,KAAA,CAAM,CAAA,EAAG,EAAE,CAAA;AAC9B,EAAA,OAAO,IAAA,CACJ,OAAA,CAAQ,cAAA,EAAgB,OAAO,EAC/B,OAAA,CAAQ,uBAAA,EAAyB,UAAU,CAAA,CAC3C,QAAQ,eAAA,EAAiB,QAAQ,CAAA,CACjC,OAAA,CAAQ,eAAe,OAAO,CAAA;AACnC;;;ACnBO,SAAS,cAAc,KAAA,EAAwB;AACpD,EAAA,IAAI,CAAC,OAAO,OAAO,EAAA;AACnB,EAAA,MAAM,SAAS,YAAA,CAAa,KAAK,CAAA,CAAE,KAAA,CAAM,GAAG,EAAE,CAAA;AAE9C,EAAA,IAAI,CAAC,QAAQ,OAAO,EAAA;AACpB,EAAA,IAAI,MAAA,CAAO,MAAA,IAAU,CAAA,EAAG,OAAO,MAAA;AAC/B,EAAA,IAAI,MAAA,CAAO,UAAU,CAAA,EAAG;AACtB,IAAA,OAAO,MAAA,CAAO,OAAA,CAAQ,cAAA,EAAgB,SAAS,CAAA;AAAA,EACjD;AACA,EAAA,IAAI,MAAA,CAAO,UAAU,EAAA,EAAI;AACvB,IAAA,OAAO,MAAA,CAAO,OAAA,CAAQ,qBAAA,EAAuB,YAAY,CAAA;AAAA,EAC3D;AACA,EAAA,OAAO,MAAA,CAAO,OAAA,CAAQ,qBAAA,EAAuB,YAAY,CAAA;AAC3D","file":"chunk-4DIPDYEU.mjs","sourcesContent":["import { twMerge } from \"tailwind-merge\";\r\nimport { clsx } from \"clsx\";\r\nimport type { ClassValue } from \"./utils/interfaces\";\r\n\r\nexport function cn(...values: ClassValue[]): string {\r\n  return twMerge(clsx(values));\r\n}\r\n","/**\r\n * Função NVL (Null Value Logic) - retorna valor padrão se o valor for null/undefined\r\n * @param {T | null | undefined} value - Valor a ser verificado\r\n * @param {T} defaultValue - Valor padrão a ser retornado se value for null/undefined\r\n * @returns {T} Value se não for null/undefined, senão defaultValue\r\n * @template T - Tipo do valor\r\n * @example\r\n * nvl(null, 'padrão') // Retorna: 'padrão'\r\n * nvl('valor', 'padrão') // Retorna: 'valor'\r\n */\r\nexport function nvl<T>(value: T | null | undefined, defaultValue: T): T {\r\n  return value ?? defaultValue;\r\n}\r\n","/** Remove tudo que não for dígito. */\r\nexport function removeDigits(value: string): string {\r\n  return value.replace(/\\D/g, \"\");\r\n}\r\n","import { removeDigits } from \"../../core/remove-digits\";\r\n\r\n/**\r\n * Formata CPF (até 11 dígitos) ou CNPJ (12–14 dígitos) conforme o tamanho.\r\n * @param data - Valor com ou sem formatação\r\n * @returns CPF `000.000.000-00` ou CNPJ `00.000.000/0000-00`; string vazia se ausente\r\n * @example\r\n * formatCpfCnpj(\"12345678901\") // \"123.456.789-01\"\r\n * formatCpfCnpj(\"12345678000199\") // \"12.345.678/0001-99\"\r\n */\r\nexport function formatCpfCnpj(data?: string): string {\r\n  if (!data) return \"\";\r\n  const value = removeDigits(data);\r\n\r\n  if (!value) return \"\";\r\n  if (value.length <= 11) {\r\n    const cpf = value.slice(0, 11);\r\n    return cpf\r\n      .replace(/(\\d{3})(\\d)/, \"$1.$2\")\r\n      .replace(/(\\d{3})(\\d)/, \"$1.$2\")\r\n      .replace(/(\\d{3})(\\d{1,2})$/, \"$1-$2\");\r\n  }\r\n\r\n  const cnpj = value.slice(0, 14);\r\n  return cnpj\r\n    .replace(/^(\\d{2})(\\d)/, \"$1.$2\")\r\n    .replace(/^(\\d{2})\\.(\\d{3})(\\d)/, \"$1.$2.$3\")\r\n    .replace(/\\.(\\d{3})(\\d)/, \".$1/$2\")\r\n    .replace(/(\\d{4})(\\d)/, \"$1-$2\");\r\n}\r\n","import { removeDigits } from \"../../core/remove-digits\";\r\n\r\n/**\r\n * Formata telefone brasileiro (até 11 dígitos): fixo `(00) 0000-0000` ou celular `(00) 00000-0000`.\r\n * @param phone - Valor com ou sem formatação\r\n * @returns Telefone formatado ou string vazia se ausente\r\n * @example\r\n * formatPhoneBr(\"11987654321\") // \"(11) 98765-4321\"\r\n * formatPhoneBr(\"1133334444\") // \"(11) 3333-4444\"\r\n */\r\nexport function formatPhoneBr(phone?: string): string {\r\n  if (!phone) return \"\";\r\n  const digits = removeDigits(phone).slice(0, 11);\r\n\r\n  if (!digits) return \"\";\r\n  if (digits.length <= 2) return digits;\r\n  if (digits.length <= 6) {\r\n    return digits.replace(/(\\d{2})(\\d+)/, \"($1) $2\");\r\n  }\r\n  if (digits.length <= 10) {\r\n    return digits.replace(/(\\d{2})(\\d{4})(\\d+)/, \"($1) $2-$3\");\r\n  }\r\n  return digits.replace(/(\\d{2})(\\d{5})(\\d+)/, \"($1) $2-$3\");\r\n}\r\n"]}