RROC — React Remessa Online Components

Design System da Remessa Online baseado em Tailwind CSS, responsável por garantir consistência visual e técnica entre múltiplos produtos frontend.

Monorepo com tokens, componentes, preset Tailwind e configurações compartilhadas (ESLint, Prettier, Commitlint).

Estrutura do repositório

rroc/
├── packages/     # tokens, tailwind-preset, tooling, utils, ui
├── apps/docs/    # Storybook
└── package.json  # workspaces

Instalação

npm install @beetech/rroc

Dependências (Tailwind v4)

npm install -D tailwindcss @tailwindcss/postcss

Subpaths (pacote único)

• @beetech/rroc — entry principal (re-exporta UI)
• @beetech/rroc/ui — componentes React
• @beetech/rroc/tokens — design tokens e temas (CSS via /tokens/base.css, /tokens/themes/*.css)
• @beetech/rroc/tailwind-preset — preset Tailwind
• @beetech/rroc/tooling — ESLint, Prettier, Commitlint (ver packages/tooling)
• @beetech/rroc/utils — utilitários (ex.: cn)

Quando usar o RROC

Use o RROC quando:

• estiver construindo ou evoluindo interfaces frontend da Remessa Online
• precisar de consistência visual com outros produtos
• quiser reutilizar componentes e tokens oficiais

Evite:

• criar componentes fora do Design System sem necessidade
• duplicar estilos já existentes

Início rápido

Tailwind v4

postcss.config.js

module.exports = { plugins: { '@tailwindcss/postcss': {} } }

globals.css

@import 'tailwindcss';
@config "../../tailwind.config.js";

tailwind.config.js (CJS — use named do preset)

const path = require('path')
const { rrocPreset } = require('@beetech/rroc/tailwind-preset')

function getRrocContent() {
  try {
    const entry = require.resolve('@beetech/rroc/ui')
    const root = path.dirname(path.dirname(path.dirname(entry)))
    return [`${root}/**/*.{js,ts,tsx}`]
  } catch {
    return []
  }
}

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}', ...getRrocContent()],
  presets: [rrocPreset],
}

Em projeto ESM: import { rrocPreset } from '@beetech/rroc/tailwind-preset'.

React

import { ThemeProvider, ChevronDownIcon } from '@beetech/rroc/ui'
import '@beetech/rroc/tokens/base.css'
import '@beetech/rroc/tokens/themes/forcustomer.css'
;<ThemeProvider variant="forcustomer">
  <App />
</ThemeProvider>

Recomendado: importar diretamente de @beetech/rroc/ui para melhor tree-shaking.

Temas disponíveis: forcustomer (B2C), forbusiness (B2B), premium, dark.

Módulos publicados

| Módulo | Descrição | | ------------------------------- | ----------------------------------------- | | @beetech/rroc | Entry principal (re-exporta UI) | | @beetech/rroc/ui | Componentes React (ThemeProvider, ícones) | | @beetech/rroc/tokens | Design tokens, CSS e temas | | @beetech/rroc/tailwind-preset | Preset Tailwind | | @beetech/rroc/tooling | ESLint, Prettier, Commitlint, cz-config | | @beetech/rroc/utils | Funções utilitárias (ex: Formatação ) |

Configurações compartilhadas

ESLint, Prettier e Commitlint estão em @beetech/rroc/tooling. Exemplos e dependências: packages/tooling/README.md.

• ESLint: import { rrocEslintConfig } from '@beetech/rroc/tooling' → export default [...rrocEslintConfig]
• Prettier: prettier.config.mjs com export { rrocPrettierConfig as default } from '@beetech/rroc/tooling/prettier'
• Commitlint: extends: ['@beetech/rroc/tooling/commitlint']

Desenvolvimento local

npm install
npm run build
npm run dev

Storybook em http://localhost:6006. Scripts: build, build:storybook, lint, format, format:check, version:patch / version:minor / version:major, commit.

Versionamento e release

• SemVer: major = breaking, minor = nova feature compatível, patch = correção/docs.
• Bump manual no PR: npm run version:patch (ou version:minor / version:major).
• Após merge na main: git tag v1.x.x && git push origin v1.x.x. A pipeline publica quando há tag.

Documentação

• 📘 Governança: docs/governance.md
• 🤝 Contribuição: CONTRIBUTING.md

Licença

ISC.

Feito com 💙 pela equipe da Remessa Online