🧩 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

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
• 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:

// 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:

// ❌ 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:

// 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

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:

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:

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:

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.