npm package: @stencitecnologia/front-kit
Description: UI component library and front-end utilities for Stenci Vue projects.
Latest version: 0.1.47

# @stencitecnologia/front-kit

UI component library and front-end utilities for Stenci Vue projects.

Este pacote centraliza:

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

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

---

# 📦 Instalação

```bash
npm install @stencitecnologia/front-kit
```

---

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

No projeto consumidor, importe o CSS global:

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

Normalmente em:

```
src/assets/styles/index.css
```

---

# 🚀 Uso básico

## Componentes

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

app.component('FaIcon', FaIcon);
```

---

## Diretivas

```js
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).

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

setupPrimeVue(app);
```

---

# 📁 Estrutura do projeto

```
src/
  components/
  composables/
  directives/
  services/
  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

```bash
cd stenci-front-kit
```

---

## 2️⃣ Instalar dependências

```bash
npm install
```

---

## 3️⃣ Atualizar versão

### Correções pequenas

```bash
npm version patch
```

### Novas funcionalidades

```bash
npm version minor
```

### Mudanças incompatíveis

```bash
npm version major
```

O comando:

* Atualiza `package.json`
* Cria commit Git
* Cria tag Git

Se aparecer erro de git:

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

---

## 4️⃣ Compilar

```bash
npm run build
```

Resultado esperado:

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

---

## 5️⃣ Validar pacote (opcional)

```bash
npm pack
```

---

## 6️⃣ Login NPM

```bash
npm logout
npm login
```

Verificar:

```bash
npm whoami
```

---

## 7️⃣ Publicar

Primeira publicação:

```bash
npm publish --access public
```

Publicações futuras:

```bash
npm publish
```

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

---

# 🔄 Atualizar no consumidor

```bash
npm update @stencitecnologia/front-kit
```

ou:

```bash
npm install @stencitecnologia/front-kit@latest
```

---

# 🧪 Desenvolvimento local (opcional)

```bash
npm link
```

No consumidor:

```bash
npm link @stencitecnologia/front-kit
```

---

# ⚠️ Problemas comuns

## CSS não aplicado

Verifique se importou:

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

---

## Pacote não encontrado

Verifique se foi publicado:

```bash
npm view @stencitecnologia/front-kit version
```

---

## Token expirado

```bash
npm logout
npm login
```

---

## Versão já existe

```bash
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