Biblioteca — 02

Uso

Como combinar as camadas da biblioteca em consumers React e não React, e qual ordem seguir quando um bloco novo precisar entrar no sistema.

02.1

Ordem de Consumo

A biblioteca foi desenhada em camadas. O consumer não deve começar pelo pacote errado.

1. Tokens

Sempre começam em @carvalhorafael/eumilitar-tokens. Essa é a fonte de verdade dos valores visuais.

2. CSS

A aparência compartilhada vem de @carvalhorafael/eumilitar-css.

3. Web ou UI

Sites sem React usam @carvalhorafael/eumilitar-web. Apps React usam @carvalhorafael/eumilitar-ui.

4. Patterns

@carvalhorafael/eumilitar-patterns entra como contrato e referência de blocos.

02.2

Exemplo com React

Um app React instala tokens, css e ui. O componente React é só a última camada.

import { Button } from "@carvalhorafael/eumilitar-ui";

export function HeroActions() {
  return <Button>Começar agora</Button>;
}

02.3

Exemplo para Site Tradicional

Um site sem React pode usar @carvalhorafael/eumilitar-web para gerar markup canônico e inicializar comportamentos compartilhados.

import { renderHeroBlock, enhanceAccordion } from "@carvalhorafael/eumilitar-web";

const html = renderHeroBlock({
  headline: "Prepare-se com trilhas por força",
  supportingCopy: "Questões, simulados e acompanhamento.",
  primaryCta: { label: "Começar", href: "#planos" }
});

document.querySelector("#app").innerHTML = html;
enhanceAccordion(document);

02.4

Exemplo em Tema WordPress

No WordPress, o tema consome a biblioteca como dependência do próprio projeto e publica os assets gerados no frontend.

// package.json do tema
{
  "dependencies": {
    "@carvalhorafael/eumilitar-tokens": "^0.1.0",
    "@carvalhorafael/eumilitar-css": "^0.1.0",
    "@carvalhorafael/eumilitar-web": "^0.1.0"
  }
}

<?php
function eumilitar_theme_assets() {
  wp_enqueue_style(
    "eumilitar-design-system",
    get_template_directory_uri() . "/assets/design-system.css",
    array(),
    "1.0.0"
  );

  wp_enqueue_script(
    "eumilitar-theme",
    get_template_directory_uri() . "/assets/theme.js",
    array(),
    "1.0.0",
    true
  );
}
add_action("wp_enqueue_scripts", "eumilitar_theme_assets");

// assets/theme.js
import { enhanceAccordion } from "@carvalhorafael/eumilitar-web";

enhanceAccordion(document);

O HTML renderizado pelo tema deve seguir a estrutura canônica documentada em @carvalhorafael/eumilitar-web. Em outras palavras: o tema WordPress não deve reinventar o design system; ele deve consumir os tokens, o CSS compartilhado e a anatomia estável dos blocos.

02.5

Regra para Novos Blocos

Sempre seguir a mesma ordem para evitar drift entre consumers.

1. definir ou ajustar o contrato em @carvalhorafael/eumilitar-patterns
2. garantir a camada visual em @carvalhorafael/eumilitar-css
3. implementar a renderização canônica em @carvalhorafael/eumilitar-web
4. só depois adaptar isso para React, tema externo ou outro consumer