@stencitecnologia/front-kit

Biblioteca de componentes, design system, diretivas e utilitários para aplicações Vue da Stenci.

Este pacote centraliza:

• Componentes Vue reutilizáveis
• Design System (tokens, base e UI)
• Integração com PrimeVue
• Diretivas customizadas
• Validators e utils
• Wrapper de FontAwesome
• Overrides de estilos

Objetivo: garantir consistência visual e reuso de código entre múltiplos projetos.

📦 Instalação

npm install @stencitecnologia/front-kit

🎨 Importação de estilos (obrigatório)

No projeto consumidor, importe o CSS global:

@import "@stencitecnologia/front-kit/style.css";

Normalmente em:

src/assets/styles/index.css

🚀 Uso básico

Componentes

import { FaIcon } from '@stencitecnologia/front-kit';

app.component('FaIcon', FaIcon);

Diretivas

import { vFocus } from '@stencitecnologia/front-kit';

app.directive('focus', vFocus);

PrimeVue Setup

O front-kit fornece configuração padrão do PrimeVue (locale e ajustes).

import { setupPrimeVue } from '@stencitecnologia/front-kit';

setupPrimeVue(app);

📁 Estrutura do projeto

src/
  components/
  composables/
  directives/
  services/
  utils/
  validators/
  styles/
    tokens.css
    base.css
    ui.css
    primevue-overrides.css
  index.js

dist/
types/
package.json
vite.config.js

📦 Fluxo de Release (gerar versão e publicar)

1️⃣ Entrar na pasta

cd stenci-front-kit

2️⃣ Instalar dependências

npm install

3️⃣ Atualizar versão

Correções pequenas

npm version patch

Novas funcionalidades

npm version minor

Mudanças incompatíveis

npm version major

O comando:

• Atualiza package.json
• Cria commit Git
• Cria tag Git

Se aparecer erro de git:

git add -A
git commit -m "chore: release"

4️⃣ Compilar

npm run build

Resultado esperado:

dist/
  index.es.js
  index.cjs
  style.css

5️⃣ Validar pacote (opcional)

npm pack

6️⃣ Login NPM

npm logout
npm login

Verificar:

npm whoami

7️⃣ Publicar

Primeira publicação:

npm publish --access public

Publicações futuras:

npm publish

O script prepack executa o build automaticamente antes da publicação.

🔄 Atualizar no consumidor

npm update @stencitecnologia/front-kit

ou:

npm install @stencitecnologia/front-kit@latest

🧪 Desenvolvimento local (opcional)

npm link

No consumidor:

npm link @stencitecnologia/front-kit

⚠️ Problemas comuns

CSS não aplicado

Verifique se importou:

@import "@stencitecnologia/front-kit/style.css";

Pacote não encontrado

Verifique se foi publicado:

npm view @stencitecnologia/front-kit version

Token expirado

npm logout
npm login

Versão já existe

npm version patch
npm publish

⭐ Boas práticas

• Sempre usar named exports
• Não usar export default em utils/validators
• Centralizar estilos no front-kit
• Manter UI separada do app-kit (core)

🌐 NPM

https://www.npmjs.com/package/@stencitecnologia/front-kit

📄 Licença

MIT — Stenci Tecnologia