Instalação

Pré-requisitos

Node.js ≥ 18
React ≥ 18 ou Angular ≥ 15
Acesso ao Azure DevOps da DB1 (conta com permissão no feed makuco)

Autenticação

Os pacotes do Makuco UI são distribuídos via feed privado no Azure Artifacts. Antes de instalar, configure a autenticação com um PAT (Personal Access Token) do Azure DevOps.

Gerando o PAT

Acesse o Azure DevOps → clique no ícone do perfil (canto superior direito) → Personal access tokens
Clique em + New Token, defina nome e expiração
Em Scopes, selecione Packaging → Read
Clique em Create e copie o token — ele não será exibido novamente

Defina o token como variável de ambiente:

# Linux / macOS — adicione ao .bashrc, .zshrc ou equivalente
export AZURE_NPM_TOKEN=seu_token_aqui

# Windows — PowerShell (perfil ou sessão corrente)
$env:AZURE_NPM_TOKEN = "seu_token_aqui"

Configurando o gerenciador de pacotes

Crie ou edite .npmrc na raiz do projeto:

.npmrc

@db1:registry=https://db1global.pkgs.visualstudio.com/_packaging/makuco/npm/registry/
//db1global.pkgs.visualstudio.com/_packaging/makuco/npm/registry/:_authToken=${AZURE_NPM_TOKEN}
always-auth=true

Adicione ao .yarnrc.yml na raiz do projeto:

.yarnrc.yml

npmScopes:
  db1:
    npmRegistryServer: "https://db1global.pkgs.visualstudio.com/_packaging/makuco/npm/registry/"
    npmAuthToken: "${AZURE_NPM_TOKEN}"
    npmAlwaysAuth: true

React

1. Instale os pacotes:

npm install @db1/makuco-ui-core @db1/makuco-ui-react
# ou
yarn add @db1/makuco-ui-core @db1/makuco-ui-react

2. Importe o CSS global:

Você pode importar em qualquer um dos seguintes lugares — escolha o que melhor se encaixa na estrutura do seu projeto:

main.tsx

import '@db1/makuco-ui-core/styles';

globals.css ou styles.css

@import '@db1/makuco-ui-core/styles';

3. Importe e use os componentes:

import { MkButton } from '@db1/makuco-ui-react';

export function App() {
  return <MkButton variant="filled">Olá, Makuco!</MkButton>;
}

Registro automático

Não é necessário chamar defineCustomElements() manualmente. Cada componente importado de @db1/makuco-ui-react já registra o custom element correspondente de forma automática.

Angular

1. Instale os pacotes:

npm install @db1/makuco-ui-core @db1/makuco-ui-angular
# ou
yarn add @db1/makuco-ui-core @db1/makuco-ui-angular

2. Importe o CSS global em styles.css:

styles.css

@import '@db1/makuco-ui-core/styles';

3. Importe os componentes no @Component desejado:

import { Component } from '@angular/core';
import { MkButtonComponent, MkInputComponent } from '@db1/makuco-ui-angular';

@Component({
  standalone: true,
  imports: [MkButtonComponent, MkInputComponent],
  template: `
    <mk-button variant="filled">Olá, Makuco!</mk-button>
    <mk-input label="Nome" placeholder="Digite seu nome" />
  `,
})
export class AppComponent {}

Registro automático

Assim como no React, não é necessário chamar defineCustomElements() manualmente. A importação de qualquer componente de @db1/makuco-ui-angular já registra o custom element correspondente.

Integração com Angular Forms

Para usar componentes com ngModel ou FormControl, importe o Module em vez do Component — por exemplo, MkInputModule em vez de MkInputComponent. Veja Formulários com Angular.