🧩 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 como gerenciador de pacotes (Node.js 22+):

pnpm add mblabs-roccato-frontend-commons

Certifique-se de instalar também as dependências peer:

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:

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

Ícones Untitled UI vivem em src/components/icons/ (arquivo kebab-case, componente PascalCase, export no index.ts).

Processo completo: skill Cursor .cursor/skills/implementation/add-icons (SVG → componente React + export). Fonte: Untitled UI icons.

import { CheckCircle } from 'mblabs-roccato-frontend-commons'

📚 Storybook

Explore e teste os componentes interativamente:

pnpm storybook

Ou gere a versão estática:

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.