Começar

Instalar

O pacote fica no registro npm do GitLab do Laboratório. Na raiz do projeto, crie um .npmrc:

@lab-inovacao:registry=https://gitlab.lab-inovacoes-tjes.kaizenforge.com.br/api/v4/projects/2/packages/npm/

Depois instale:

npm install @lab-inovacao/design-system

O download do pacote é aberto e não precisa de token. O código-fonte do design system continua privado no GitLab.

Usar

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

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

initTheme()

<script setup lang="ts">
import { BaseButton } from '@lab-inovacao/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.