mblabs-roccato-frontend-commons 0.2.2 → 0.2.3

package/README.md

@@ -1,241 +1,241 @@
-# 🧩 mblabs-roccato-frontend-commons
-
-Uma coleção de componentes e utilitários de front-end reutilizáveis, desenvolvidos com tecnologias modernas como React 19, TailwindCSS, Radix UI e muito mais. Criado para ser compartilhado entre projetos dentro do ecossistema MB Labs Roccato.
-
----
-
-## 📦 Instalação
-
-Utilize o [pnpm](https://pnpm.io/) como gerenciador de pacotes (Node.js 22+):
-
-```bash
-pnpm add mblabs-roccato-frontend-commons
-```
-
-Certifique-se de instalar também as dependências peer:
-
-```bash
-pnpm add react@^19.0.0 react-dom@^19.0.0 react-hook-form@^7.55.0
-```
-
----
-
-## 🚀 Como usar
-
-Importe os componentes ou utilitários diretamente do pacote:
-
-```tsx
-import { MeuComponente } from 'mblabs-roccato-frontend-commons';
-import 'mblabs-roccato-frontend-commons/css'; // estilos padrões
-```
-
----
-
-## ✨ Destaques
-
-- ✅ Suporte ao React 19
-- 🎨 TailwindCSS 4 com variantes dinâmicas
-- ⚙️ Componentes acessíveis via Radix UI
-- 🧰 Drag & drop com DnD Kit
-- 📊 Visualizações com Recharts
-- 🧪 Totalmente tipado com TypeScript
-- 📚 Documentação interativa com Storybook
-- ⚡ Build otimizado com Vite
-
----
-
-## 📂 Estrutura do Projeto
-
-```
-📁 src/
- ┣ 📦 components/
- ┣ ┣ 📦 atoms/
- ┣ ┣ 📦 molecules/
- ┣ ┣ 📦 organisms/
- ┣ ┣ 📄 index.ts
- ┣ 📦 hooks/
- ┣ 📦 utils/
- ┗ 📄 index.ts
-```
-
----
-
-## 🧪 Scripts
-
-| Comando                | Descrição                                         |
-| ---------------------- | ------------------------------------------------- |
-| `pnpm build`           | Compila a lib com TypeScript e Vite               |
-| `pnpm lint`            | Lint no projeto com ESLint                        |
-| `pnpm storybook`       | Inicia o Storybook em ambiente de desenvolvimento |
-| `pnpm build-storybook` | Gera versão estática do Storybook                 |
-
----
-
-## 📦 Adicionando novos ícones
-
-Para adicionar novos ícones ao projeto, siga este processo passo a passo:
-
-### 1. Copiar nome do ícone do Figma
-- Identifique o nome exato do ícone no design do Figma
-- Exemplo: `check-circle`, `info-circle`, `user-01`
-
-### 2. Buscar ícone no Untitled UI
-- Acesse [https://www.untitledui.com/free-icons](https://www.untitledui.com/free-icons)
-- Use a barra de pesquisa para encontrar o ícone pelo nome
-- Certifique-se de que é o ícone correto visualmente
-
-### 3. Copiar SVG
-- Clique no ícone desejado
-- Copie o código SVG fornecido
-- O SVG deve ter viewBox="0 0 24 24" e ser otimizado
-
-### 4. Criar componente reutilizável
-Crie um novo arquivo em `src/components/icons/` seguindo o padrão:
-
-```tsx
-// src/components/icons/nome-do-icone.tsx
-import { ComponentProps } from 'react';
-
-export function NomeDoIcone(props: ComponentProps<'svg'>) {
-  return (
-    <svg 
-      width="100%" 
-      height="100%" 
-      viewBox="0 0 24 24" 
-      fill="none" 
-      xmlns="http://www.w3.org/2000/svg" 
-      {...props}
-    >
-      {/* Cole o conteúdo SVG aqui */}
-    </svg>
-  );
-}
-```
-
-### 5. Corrigir propriedades CSS
-Converta propriedades kebab-case para camelCase:
-
-```tsx
-// ❌ Incorreto
-stroke-width="2" → strokeWidth="2"
-stroke-linecap="round" → strokeLinecap="round"
-stroke-linejoin="round" → strokeLinejoin="round"
-fill-rule="evenodd" → fillRule="evenodd"
-clip-rule="evenodd" → clipRule="evenodd"
-
-// ✅ Correto
-strokeWidth="2"
-strokeLinecap="round"
-strokeLinejoin="round"
-fillRule="evenodd"
-clipRule="evenodd"
-```
-
-### 6. Adicionar ao index.ts
-Adicione a exportação no arquivo `src/components/icons/index.ts`:
-
-```tsx
-// Adicione no final do arquivo, em ordem alfabética
-export * from './nome-do-icone';
-```
-
-### Exemplo Completo
-
-**Nome do ícone:** `check-circle`
-
-**Arquivo criado:** `src/components/icons/check-circle.tsx`
-
-```tsx
-import { ComponentProps } from 'react';
-
-export function CheckCircle(props: ComponentProps<'svg'>) {
-  return (
-    <svg 
-      width="100%" 
-      height="100%" 
-      viewBox="0 0 24 24" 
-      fill="none" 
-      xmlns="http://www.w3.org/2000/svg" 
-      {...props}
-    >
-      <path
-        d="M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-```
-
-**Adicionado ao index.ts:**
-```tsx
-export * from './check-circle';
-```
-
-### Boas Práticas
-
-- ✅ Use `currentColor` para stroke/fill para permitir customização
-- ✅ Mantenha viewBox="0 0 24 24" para consistência
-- ✅ Use width="100%" height="100%" para responsividade
-- ✅ Nomeie o componente em PascalCase
-- ✅ Nomeie o arquivo em kebab-case
-- ✅ Mantenha ordem alfabética no index.ts
-- ✅ Teste o ícone no Storybook após adicionar
-
-### Uso do Ícone
-
-Após adicionar, o ícone estará disponível para uso:
-
-```tsx
-import { CheckCircle } from '@/components/icons';
-
-// Uso básico
-<CheckCircle />
-
-// Com customização
-<CheckCircle className="w-6 h-6 text-blue-500" />
-```
-
----
-
-## 📚 Storybook
-
-Explore e teste os componentes interativamente:
-
-```bash
-pnpm storybook
-```
-
-Ou gere a versão estática:
-
-```bash
-pnpm build-storybook
-```
-
----
-
-## 🧩 Tecnologias Utilizadas
-
-- React 19
-- TailwindCSS
-- Radix UI
-- DnD Kit
-- Tanstack react-table
-- Tabler icons-react
-- Date fns
-- Recharts
-- React Hook Form
-- Zod
-- Storybook
-- Vite
-- TypeScript
-- ESLint
-
----
-
-## 📝 Licença
-
-MIT © Roccato — Feito com ❤️ pelo time MB Labs.
+# 🧩 mblabs-roccato-frontend-commons
+
+Uma coleção de componentes e utilitários de front-end reutilizáveis, desenvolvidos com tecnologias modernas como React 19, TailwindCSS, Radix UI e muito mais. Criado para ser compartilhado entre projetos dentro do ecossistema MB Labs Roccato.
+
+---
+
+## 📦 Instalação
+
+Utilize o [pnpm](https://pnpm.io/) como gerenciador de pacotes (Node.js 22+):
+
+```bash
+pnpm add mblabs-roccato-frontend-commons
+```
+
+Certifique-se de instalar também as dependências peer:
+
+```bash
+pnpm add react@^19.0.0 react-dom@^19.0.0 react-hook-form@^7.55.0
+```
+
+---
+
+## 🚀 Como usar
+
+Importe os componentes ou utilitários diretamente do pacote:
+
+```tsx
+import { MeuComponente } from 'mblabs-roccato-frontend-commons';
+import 'mblabs-roccato-frontend-commons/css'; // estilos padrões
+```
+
+---
+
+## ✨ Destaques
+
+- ✅ Suporte ao React 19
+- 🎨 TailwindCSS 4 com variantes dinâmicas
+- ⚙️ Componentes acessíveis via Radix UI
+- 🧰 Drag & drop com DnD Kit
+- 📊 Visualizações com Recharts
+- 🧪 Totalmente tipado com TypeScript
+- 📚 Documentação interativa com Storybook
+- ⚡ Build otimizado com Vite
+
+---
+
+## 📂 Estrutura do Projeto
+
+```
+📁 src/
+ ┣ 📦 components/
+ ┣ ┣ 📦 atoms/
+ ┣ ┣ 📦 molecules/
+ ┣ ┣ 📦 organisms/
+ ┣ ┣ 📄 index.ts
+ ┣ 📦 hooks/
+ ┣ 📦 utils/
+ ┗ 📄 index.ts
+```
+
+---
+
+## 🧪 Scripts
+
+| Comando                | Descrição                                         |
+| ---------------------- | ------------------------------------------------- |
+| `pnpm build`           | Compila a lib com TypeScript e Vite               |
+| `pnpm lint`            | Lint no projeto com ESLint                        |
+| `pnpm storybook`       | Inicia o Storybook em ambiente de desenvolvimento |
+| `pnpm build-storybook` | Gera versão estática do Storybook                 |
+
+---
+
+## 📦 Adicionando novos ícones
+
+Para adicionar novos ícones ao projeto, siga este processo passo a passo:
+
+### 1. Copiar nome do ícone do Figma
+- Identifique o nome exato do ícone no design do Figma
+- Exemplo: `check-circle`, `info-circle`, `user-01`
+
+### 2. Buscar ícone no Untitled UI
+- Acesse [https://www.untitledui.com/free-icons](https://www.untitledui.com/free-icons)
+- Use a barra de pesquisa para encontrar o ícone pelo nome
+- Certifique-se de que é o ícone correto visualmente
+
+### 3. Copiar SVG
+- Clique no ícone desejado
+- Copie o código SVG fornecido
+- O SVG deve ter viewBox="0 0 24 24" e ser otimizado
+
+### 4. Criar componente reutilizável
+Crie um novo arquivo em `src/components/icons/` seguindo o padrão:
+
+```tsx
+// src/components/icons/nome-do-icone.tsx
+import { ComponentProps } from 'react';
+
+export function NomeDoIcone(props: ComponentProps<'svg'>) {
+  return (
+    <svg 
+      width="100%" 
+      height="100%" 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg" 
+      {...props}
+    >
+      {/* Cole o conteúdo SVG aqui */}
+    </svg>
+  );
+}
+```
+
+### 5. Corrigir propriedades CSS
+Converta propriedades kebab-case para camelCase:
+
+```tsx
+// ❌ Incorreto
+stroke-width="2" → strokeWidth="2"
+stroke-linecap="round" → strokeLinecap="round"
+stroke-linejoin="round" → strokeLinejoin="round"
+fill-rule="evenodd" → fillRule="evenodd"
+clip-rule="evenodd" → clipRule="evenodd"
+
+// ✅ Correto
+strokeWidth="2"
+strokeLinecap="round"
+strokeLinejoin="round"
+fillRule="evenodd"
+clipRule="evenodd"
+```
+
+### 6. Adicionar ao index.ts
+Adicione a exportação no arquivo `src/components/icons/index.ts`:
+
+```tsx
+// Adicione no final do arquivo, em ordem alfabética
+export * from './nome-do-icone';
+```
+
+### Exemplo Completo
+
+**Nome do ícone:** `check-circle`
+
+**Arquivo criado:** `src/components/icons/check-circle.tsx`
+
+```tsx
+import { ComponentProps } from 'react';
+
+export function CheckCircle(props: ComponentProps<'svg'>) {
+  return (
+    <svg 
+      width="100%" 
+      height="100%" 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg" 
+      {...props}
+    >
+      <path
+        d="M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+```
+
+**Adicionado ao index.ts:**
+```tsx
+export * from './check-circle';
+```
+
+### Boas Práticas
+
+- ✅ Use `currentColor` para stroke/fill para permitir customização
+- ✅ Mantenha viewBox="0 0 24 24" para consistência
+- ✅ Use width="100%" height="100%" para responsividade
+- ✅ Nomeie o componente em PascalCase
+- ✅ Nomeie o arquivo em kebab-case
+- ✅ Mantenha ordem alfabética no index.ts
+- ✅ Teste o ícone no Storybook após adicionar
+
+### Uso do Ícone
+
+Após adicionar, o ícone estará disponível para uso:
+
+```tsx
+import { CheckCircle } from '@/components/icons';
+
+// Uso básico
+<CheckCircle />
+
+// Com customização
+<CheckCircle className="w-6 h-6 text-blue-500" />
+```
+
+---
+
+## 📚 Storybook
+
+Explore e teste os componentes interativamente:
+
+```bash
+pnpm storybook
+```
+
+Ou gere a versão estática:
+
+```bash
+pnpm build-storybook
+```
+
+---
+
+## 🧩 Tecnologias Utilizadas
+
+- React 19
+- TailwindCSS
+- Radix UI
+- DnD Kit
+- Tanstack react-table
+- Tabler icons-react
+- Date fns
+- Recharts
+- React Hook Form
+- Zod
+- Storybook
+- Vite
+- TypeScript
+- ESLint
+
+---
+
+## 📝 Licença
+
+MIT © Roccato — Feito com ❤️ pelo time MB Labs.