RROC - React Remessa Online Components

Design System da Remessa Online com Tailwind CSS.

Estrutura

rroc/
├── packages/   → tokens, tailwind-preset, config, utils, ui
├── apps/docs/  → Storybook
└── package.json (workspaces)

Instalação

npm install @beetech/rroc

Para Tailwind v4: npm install -D tailwindcss @tailwindcss/postcss

Uso por subpath: @beetech/rroc/ui, @beetech/rroc/tokens, @beetech/rroc/tailwind-preset, etc.

Uso rápido (Tailwind v4)

postcss.config.js: plugins: { '@tailwindcss/postcss': {} }

globals.css:

@import 'tailwindcss';
@import '@beetech/rroc/tailwind-preset/theme.css';
@config "../../tailwind.config.js";

tailwind.config.js: inclua o preset e o content do rroc-ui (obrigatório para as classes dos componentes):

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],
};

React:

import { ThemeProvider, Button, TextField, Select } from '@beetech/rroc/ui';

<ThemeProvider theme="forcustomer">
  <Button variant="contained" color="primary">
    Salvar
  </Button>
  <TextField label="Nome" />
  <Select label="Tipo" options={[{ value: 'a', label: 'A' }]} />
</ThemeProvider>;

Temas: forcustomer (B2C), forbusiness (B2B).

Pacotes (módulos da RROC)

| Módulo | Descrição | | ------------------------------- | ---------------------------------------------------------------------- | | @beetech/rroc/ui | Componentes (ThemeProvider, ícones, e futuros Button, TextField, etc.) | | @beetech/rroc/tokens | Design tokens (JS/TS), base.css, temas CSS, semantic-tokens.json | | @beetech/rroc/tailwind-preset | Preset Tailwind + theme.css | | @beetech/rroc/utils | Helpers (cn, etc.) | | @beetech/rroc/config | ESLint (flat config), Prettier, Commitlint, cz-config |

ESLint (flat config)

// eslint.config.mjs
import { rrocEslintConfig } from '@beetech/rroc/config';
export default [...rrocEslintConfig];
// ou default: import rrocConfig from '@beetech/rroc/config'; export default [...rrocConfig];

Prettier

// prettier.config.js (CJS)
const { rrocPrettierConfig } = require('@beetech/rroc/config');
module.exports = rrocPrettierConfig;
// ou: module.exports = require('@beetech/rroc/config/prettier');

// prettier.config.mjs (ESM)
import { rrocPrettierConfig } from '@beetech/rroc/config';
export default rrocPrettierConfig;

Commitlint

// commitlint.config.js (CJS)
const { rrocCommitlintConfig } = require('@beetech/rroc/config');
module.exports = rrocCommitlintConfig;

// commitlint.config.mjs (ESM)
import { rrocCommitlintConfig } from '@beetech/rroc/config';
export default rrocCommitlintConfig;

Ou no package.json: "commitlint": { "extends": ["@beetech/rroc/config/commitlint"] } (usa o .cjs).

Tokens (CSS e temas)

@import '@beetech/rroc/tokens/base.css';
@import '@beetech/rroc/tokens/themes/forcustomer.css'; /* ou forbusiness, premium, dark */

import { colors, typography, themes } from '@beetech/rroc/tokens';

Componentes (atual e futuros)

import { ThemeProvider, ChevronDownIcon } from '@beetech/rroc/ui';
// Futuro: Button, TextField, Select, etc. pelo mesmo subpath

Desenvolvimento

npm install
npm run build:packages
npm run dev   # Storybook em http://localhost:6006

Scripts úteis: build:packages, build:storybook, version:patch / version:minor / version:major, generate:component, generate:token, generate:util, lint, format, commit.

Storybook publicado: release-rroc.eurodolar.xyz

Release

1. Bump: npm run version:patch (ou minor/major) e inclua as alterações no PR.
2. Merge na main.
3. Tag para publicar de fato: git tag v1.0.5 && git push origin v1.0.5

A pipeline só publica quando há tag; sem tag roda em dry run.

Licença

ISC.