@grazziotin/react-components-next 0.1.0 → 1.0.1

package/README.md

@@ -1,174 +1,266 @@
-# React Components Library
-
-Biblioteca de componentes React reutilizáveis, construída com TypeScript e Tailwind CSS.
-
-## Instalação
-
-```bash
-npm install react-components-next
-```
-
-> **Atenção:** esta biblioteca usa classes do Tailwind CSS. Certifique-se de que o Tailwind esteja configurado no seu projeto.
-
-## 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 |
-
-## Uso
-
-```tsx
-import { Button, Card, CardHeader, CardTitle, CardContent, Input, Badge, Avatar } from "react-components-next";
-
-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>
-  );
-}
-```
-
-## Componentes
-
-### Button
-
-```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
->
-  Clique aqui
-</Button>
-```
-
-### Input
-
-```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}
-/>
-```
-
-### Card
-
-```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>
-```
-
-### Badge
-
-```tsx
-<Badge
-  variant="success"  // "default" | "primary" | "success" | "warning" | "danger" | "info"
-  dot={false}        // boolean - exibe um ponto colorido
->
-  Online
-</Badge>
-```
-
-### Avatar
-
-```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"
-/>
-```
-
-## Desenvolvimento
-
-```bash
-# Instalar dependências
-npm install
-
-# Rodar servidor de desenvolvimento com showcase
-npm run dev
-
-# 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
-```
-
-## Publicar no npm
-
-```bash
-# Fazer login no npm
-npm login
-
-# Publicar (executa build:lib automaticamente via prepublishOnly)
-npm publish
-```
-
-## Estrutura do projeto
-
-```
-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
-│   └── ui/
-│       ├── Button/
-│       ├── Input/
-│       ├── Card/
-│       ├── Badge/
-│       └── Avatar/
-└── lib/
-    └── utils.ts           # Utilitário cn() para classes CSS
-```
-
-## Licença
-
-MIT
+# 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
+
+```bash
+npm install @grazziotin/react-components-next
+```
+
+### 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                                                       |
+| ------------ | --------------------------------------------------------------- |
+| `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 {
+  Card,
+  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 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
+
+### Card
+
+```tsx
+<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
+
+```tsx
+<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`.
+
+```tsx
+<DataTable
+  rows={dados}
+  columns={colunas}
+  loading={carregando}
+  pageSizeOptions={[10, 20, 50]}
+/>
+```
+
+### Tab / Tabs
+
+```tsx
+const [value, setValue] = useState(0);
+
+<Tabs
+  value={value}
+  onChange={(_, newValue) => setValue(newValue)}
+  color="var(--primary-color)"
+>
+  <Tab label="Geral" />
+  <Tab label="Detalhes" />
+</Tabs>;
+```
+
+## Funções
+
+### cn
+
+```tsx
+cn("px-4 py-2", condicao && "bg-teal-500", "px-6");
+```
+
+### nvl
+
+```tsx
+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
+
+```bash
+# Instalar dependências
+npm install
+
+# 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
+
+# Verificar tipos TypeScript
+npm run type-check
+
+# Lint
+npm run lint
+```
+
+## Publicar no npm
+
+```bash
+# Fazer login no npm
+npm login
+
+# Publicar (executa build:lib automaticamente via prepublishOnly)
+npm publish
+```
+
+## Estrutura do projeto
+
+```
+src/
+├── 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/
+│       ├── 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
+
+MIT

package/dist/chunk-4DIPDYEU.mjs

@@ -0,0 +1,79 @@
+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;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  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));
+}
+
+// src/functions/nvl/nvl.ts
+function nvl(value, defaultValue) {
+  return value != null ? value : defaultValue;
+}
+
+// src/core/remove-digits.ts
+function removeDigits(value) {
+  return value.replace(/\D/g, "");
+}
+
+// src/functions/format-cpf-cnpj/format-cpf-cnpj.ts
+function formatCpfCnpj(data) {
+  if (!data) return "";
+  const value = removeDigits(data);
+  if (!value) return "";
+  if (value.length <= 11) {
+    const cpf = value.slice(0, 11);
+    return cpf.replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d{1,2})$/, "$1-$2");
+  }
+  const cnpj = value.slice(0, 14);
+  return cnpj.replace(/^(\d{2})(\d)/, "$1.$2").replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3").replace(/\.(\d{3})(\d)/, ".$1/$2").replace(/(\d{4})(\d)/, "$1-$2");
+}
+
+// src/functions/format-phone-br/format-phone-br.ts
+function formatPhoneBr(phone) {
+  if (!phone) return "";
+  const digits = removeDigits(phone).slice(0, 11);
+  if (!digits) return "";
+  if (digits.length <= 2) return digits;
+  if (digits.length <= 6) {
+    return digits.replace(/(\d{2})(\d+)/, "($1) $2");
+  }
+  if (digits.length <= 10) {
+    return digits.replace(/(\d{2})(\d{4})(\d+)/, "($1) $2-$3");
+  }
+  return digits.replace(/(\d{2})(\d{5})(\d+)/, "($1) $2-$3");
+}
+
+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"]}