Começar

Instalar

O pacote fica no GitHub Packages da organização lab-inovacao-tjes. Na raiz do projeto, crie um .npmrc:

@lab-inovacao-tjes:registry=https://npm.pkg.github.com

O GitHub Packages pede token também para baixar. Na sua máquina, crie em https://github.com/settings/tokens um token clássico (personal access token, classic) com a permissão read:packages e guarde no .npmrc da sua pasta pessoal, nunca no do projeto:

npm config set //npm.pkg.github.com/:_authToken=SEU_TOKEN

Depois instale:

npm install @lab-inovacao-tjes/design-system

No GitHub Actions de outro repositório da organização, o token do próprio workflow basta. Nas configurações do pacote, em Manage Actions access, dê leitura a esse repositório, e no workflow use:

permissions:
  contents: read
  packages: read
steps:
  - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
  - uses: actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1 # v7.1.0
    with:
      node-version: 22
      registry-url: https://npm.pkg.github.com
  - run: npm ci
    env:
      NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

O código-fonte do design system continua privado no GitHub.

Usar

Importe o CSS uma vez, no ponto de entrada da aplicação, e os componentes onde precisar:

// main.ts
import '@lab-inovacao-tjes/design-system/styles.css'
import { initTheme } from '@lab-inovacao-tjes/design-system'

initTheme()

<script setup lang="ts">
import { BaseButton } from '@lab-inovacao-tjes/design-system'
</script>

<template>
  <BaseButton icon="plus-lg">Novo contrato</BaseButton>
</template>

Regras do sistema

• Nenhuma tela usa cor, espaço ou fonte solta: só os componentes e os tokens de papel.
• Todo componente tem o prefixo Base.
• Propriedades com o mesmo nome fazem a mesma coisa em todos os componentes: size, disabled, invalid, v-model.