Biblioteca — 01

Instalação

Passo inicial para consumir o design system como biblioteca. O uso varia conforme o tipo de consumer, mas a base sempre começa por tokens, CSS compartilhado e, quando necessário, as camadas web ou React.

01.1

Pacotes Base

Os pacotes centrais da biblioteca e o papel de cada um.

@carvalhorafael/eumilitar-tokens

Fonte de verdade dos valores visuais. Exporta CSS e JSON.

@carvalhorafael/eumilitar-css

Camada compartilhada de estilos e classes semânticas.

@carvalhorafael/eumilitar-web

Markup canônico e JS progressivo para sites sem React.

@carvalhorafael/eumilitar-ui

Adapter React para apps Next/React.

@carvalhorafael/eumilitar-patterns

Contratos, variantes e referências dos blocos.

01.2

Exemplo para App React

Para apps React/Next, a instalação típica começa por tokens, CSS e UI.

{
  "dependencies": {
    "@carvalhorafael/eumilitar-tokens": "^0.1.0",
    "@carvalhorafael/eumilitar-css": "^0.1.0",
    "@carvalhorafael/eumilitar-ui": "^0.1.0",
    "@carvalhorafael/eumilitar-patterns": "^0.1.0"
  }
}

@import "@carvalhorafael/eumilitar-tokens";
@import "@carvalhorafael/eumilitar-css";

@carvalhorafael:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=SEU_TOKEN_GITHUB

01.3

Exemplo para Site sem React

Para HTML/CSS/JS puro, a base tende a ser tokens + css + web.

{
  "dependencies": {
    "@carvalhorafael/eumilitar-tokens": "^0.1.0",
    "@carvalhorafael/eumilitar-css": "^0.1.0",
    "@carvalhorafael/eumilitar-web": "^0.1.0"
  }
}

As versões publicadas e os arquivos do repositório podem ser acessados em GitHub Releases.

Como os pacotes serão publicados no GitHub Packages, o consumer precisa configurar o registry do scope @carvalhorafael e autenticação com token do GitHub antes do npm install.