🚀 Sobre o Berry

O Berry é um Design System desenvolvido em React + TypeScript que serve como base para todos os projetos front-end da Room Company. Construído com foco em composição, acessibilidade e performance, o Berry oferece uma coleção abrangente de componentes reutilizáveis e tokens de design.

📦 Instalação

# Usando npm
npm install @room-company/berry

# Usando yarn
yarn add @room-company/berry

# Usando pnpm
pnpm add @room-company/berry

🎯 Principais Características

• Composition Pattern: Arquitetura baseada em composição para maior flexibilidade e reusabilidade
• TypeScript: Tipagem forte para melhor DX e prevenção de erros
• SCSS Modules: Estilização modular e encapsulada
• Acessibilidade: Componentes seguindo WCAG 2.1
• Design Tokens: Sistema completo de tokens para consistência visual
• Temas: Suporte nativo a temas claro e escuro
• Zero Dependencies: Mínimo de dependências externas
• Tree-shaking: Otimizado para bundle final

🛠️ Tecnologias

• React 18+
• TypeScript 5
• Vite
• SCSS Modules
• Storybook 7
• Vitest
• ESLint
• Prettier

📚 Uso

import { Button } from '@room-company/berry'

function App() {
  return (
    <Button variant="filled" color="#7C3AED">
      Click me
    </Button>
  )
}

🎨 Design Tokens

O Berry utiliza um sistema de design tokens para garantir consistência visual:

// Cores
$brand-60: #7257FF;
$brand-70: #5336E2;

// Tipografia
$font-family-primary: 'Inter', sans-serif;
$font-size-sm: 0.875rem;

// Espaçamentos
$spacing-4: 1rem;
$spacing-8: 2rem;

🏗️ Arquitetura

O Berry utiliza o Composition Pattern para criar componentes flexíveis e reutilizáveis:

// Exemplo de composição
<Accordion.Root>
  <Accordion.Title>Título</Accordion.Title>
  <Accordion.Content>Conteúdo</Accordion.Content>
</Accordion.Root>

⚡ Performance

• Bundle size otimizado com tree-shaking
• Code-splitting automático
• Lazy loading de componentes
• Mínimo de dependências externas
• CSS-in-JS evitado em favor de SCSS Modules

🧪 Testes

# Executar testes unitários
npm test

# Executar testes com coverage
npm test:coverage

📖 Documentação

A documentação completa está disponível através do Storybook:

# Iniciar Storybook
npm run storybook

🤝 Contribuição

O Berry é um projeto interno da Room Company. Para contribuir:

1. Siga os padrões de código
2. Adicione testes para novas features
3. Atualize a documentação
4. Mantenha a compatibilidade com versões anteriores

📄 Licença

Este projeto é propriedade da Room Company.

🔍 Por que Berry?

• Consistência: Design system unificado para todos os projetos
• Produtividade: Componentes prontos e bem documentados
• Manutenibilidade: Código limpo e bem testado
• Flexibilidade: Composition pattern para maior adaptabilidade
• Performance: Bundle otimizado e boas práticas
• Acessibilidade: WCAG 2.1 como padrão

🔗 Links Úteis

• Documentação
• Figma
• NPM Package
• Changelog