# is-uikit-components-vue

## Descripción y propósito

Adaptador centralizado de [PrimeVue 4](https://primevue.org/) para la plataforma Interseguro.

- Re-exporta todos los componentes de PrimeVue con prefijo `Is*` (ej. `IsButton`, `IsDataTable`).
- Centraliza la configuración de tema, locale y servicios globales en un único plugin (`createIsUiKitPlugin`).
- Incluye el preset corporativo de PrimeVue basado en Aura (`InterseguroAuraPreset`) y el preset de Tailwind CSS (`interseguroTailwindPreset`), ambos sincronizados desde la misma fuente de verdad de tokens de color.
- Expone componentes propios de la organización bajo el subpath `/org`.

Versión actual: **1.0.5**

---

## Repositorio

`is-pkg-crosscore-uikit-lib-vue`

---

## Requisitos

| Herramienta | Versión mínima |
|---|---|
| Node.js | ≥ 18 |
| npm | ≥ 9 |
| Vue | ^3.5.0 |
| PrimeVue | ^4.5.5 |

---

## Estructura del proyecto

```
is-pkg-crosscore-uikit-lib-vue/
├── src/
│   ├── adapters/                          # Adaptadores Is* generados automáticamente
│   │   ├── generated.ts                   # Re-exports de componentes PrimeVue con prefijo Is*
│   │   └── eventbus.d.ts                  # Tipado del bus de eventos de PrimeVue
│   ├── org/                               # Componentes propios de Interseguro
│   │   ├── index.ts                       # Barrel de exports del subpath /org
│   │   └── IsNavMenu.vue                  # Menú de navegación lateral corporativo
│   ├── plugin/                            # Plugin Vue principal
│   │   └── create-is-uikit-plugin.ts      # Factory del plugin e interfaz IsUiKitPluginOptions
│   ├── prime/                             # Configuración de PrimeVue
│   │   ├── default-prime-vue-options.ts   # Opciones por defecto (tema Aura, locale ES)
│   │   └── interseguro-aura-preset.ts     # Preset Aura extendido con paleta corporativa
│   ├── styles/                            # Estilos Is*Style generados automáticamente
│   │   └── generated-styles.ts            # Re-exports de estilos de componentes PrimeVue
│   ├── tailwind/                          # Integración Tailwind CSS
│   │   └── preset.ts                      # Preset Tailwind con paleta corporativa
│   ├── tokens/                            # Tokens de diseño (fuente de verdad)
│   │   └── palette.ts                     # Paleta de colores corporativos de Interseguro
│   └── index.ts                           # Entry point principal de la librería
├── scripts/
│   └── generate-adapters.mjs              # Genera adaptadores Is* leyendo primevue/index.d.ts
├── dist/                                  # Salida compilada (generada por vite build)
├── package.json
├── vite.config.ts
└── README.md
```

---

## Quickstart

### Instalación

```bash
npm install is-uikit-components-vue
```

**Peer dependencies requeridas en el proyecto consumidor:**

```bash
npm install vue primevue
```

### 1. Registrar el plugin en una SPA

```typescript
// main.ts de cualquier microfrontend o SPA
import { createApp } from 'vue';
import { createIsUiKitPlugin } from 'is-uikit-components-vue';
import App from './App.vue';

const app = createApp(App);
app.use(createIsUiKitPlugin());
app.mount('#app');
```

### 2. Integrar con single-spa (handleInstance)

```typescript
import { createApp, h } from 'vue';
import singleSpaVue from 'single-spa-vue';
import { createIsUiKitPlugin } from 'is-uikit-components-vue';
import App from './App.vue';

const lifecycles = singleSpaVue({
  createApp,
  appOptions: { render: () => h(App) },
  handleInstance: (app) => {
    app.use(createIsUiKitPlugin());
  },
});

export const { bootstrap, mount, unmount } = lifecycles;
```

### 3. Sobreescribir configuración por microfrontend

```typescript
import { createIsUiKitPlugin } from 'is-uikit-components-vue';
import Lara from '@primevue/themes/lara';

app.use(createIsUiKitPlugin({
  primeVue: {
    theme: {
      preset: Lara,
      options: { darkModeSelector: '.my-dark' },
    },
  },
  toastService: false,   // deshabilitar servicios que el MF no usa
  dialogService: false,
}));
```

---

## Configuración esencial

No requiere variables de entorno. La configuración se realiza a través de las opciones del plugin.

### Opciones de `createIsUiKitPlugin`

| Opción | Tipo | Default | Descripción |
|---|---|---|---|
| `primeVue` | `PrimeVueConfiguration` | Preset Interseguro Aura | Opciones de PrimeVue (merge profundo con defaults corporativos) |
| `confirmationService` | `boolean` | `true` | Registrar `ConfirmationService` globalmente |
| `dialogService` | `boolean` | `true` | Registrar `DialogService` globalmente |
| `toastService` | `boolean` | `true` | Registrar `ToastService` globalmente |

---

## Exports disponibles

### Componentes `Is*`

Todos los componentes de PrimeVue 4.5.x con prefijo `Is`. Las props son **idénticas** a las de PrimeVue; el autocompletado en el IDE es el mismo.

```vue
<script setup lang="ts">
import { IsButton, IsInputText, IsDataTable, IsColumn } from 'is-uikit-components-vue';
</script>

<template>
  <IsButton label="Guardar" severity="primary" />
  <IsInputText v-model="valor" placeholder="Escribe aquí..." />
</template>
```

**Lista completa:** Accordion, AccordionContent, AccordionHeader, AccordionPanel, AccordionTab,
AutoComplete, Avatar, AvatarGroup, Badge, BadgeDirective, BlockUI, Breadcrumb, Button,
ButtonGroup, Calendar, Card, Carousel, CascadeSelect, Checkbox, CheckboxGroup, Chip, Chips,
ColorPicker, Column, ColumnGroup, ConfirmDialog, ConfirmPopup, ContextMenu, DataTable, DataView,
DatePicker, DeferredContent, Dialog, Divider, Dock, Drawer, Dropdown, DynamicDialog, Fieldset,
FileUpload, FloatLabel, Fluid, FocusTrap, Galleria, IconField, IftaLabel, Image, ImageCompare,
InlineMessage, Inplace, InputChips, InputGroup, InputGroupAddon, InputIcon, InputMask,
InputNumber, InputOtp, InputSwitch, InputText, KeyFilter, Knob, Listbox, MegaMenu, Menu,
Menubar, Message, MeterGroup, MultiSelect, OrderList, OrganizationChart, OverlayBadge,
OverlayPanel, Paginator, Panel, PanelMenu, Password, PickList, Popover, Portal, ProgressBar,
ProgressSpinner, RadioButton, RadioButtonGroup, Rating, Ripple, Row, ScrollPanel, ScrollTop,
Select, SelectButton, Sidebar, Skeleton, Slider, SpeedDial, SplitButton, Splitter,
SplitterPanel, Step, StepItem, StepList, StepPanel, StepPanels, Stepper, Steps, StyleClass,
Tab, TabList, TabMenu, TabPanel, TabPanels, Tabs, TabView, Tag, Terminal, Textarea, TieredMenu,
Timeline, Toast, ToggleButton, ToggleSwitch, Toolbar, Tooltip, Tree, TreeSelect, TreeTable,
VirtualScroller.

### Estilos `Is*Style`

Objetos de estilo para personalización avanzada (PassThrough API de PrimeVue):

```typescript
import { IsButtonStyle, IsDataTableStyle } from 'is-uikit-components-vue';
```

### Composables de PrimeVue

```typescript
import { useConfirm, useDialog, useToast, useStyle } from 'is-uikit-components-vue';
```

### Preset corporativo PrimeVue

```typescript
import { InterseguroAuraPreset } from 'is-uikit-components-vue';
```

### Directivas

Las directivas se registran manualmente en el componente o globalmente en la app:

```typescript
import { IsTooltip, IsRipple } from 'is-uikit-components-vue';

app.directive('tooltip', IsTooltip);
app.directive('ripple', IsRipple);
```

---

## Subpath `/org` — Componentes de la organización

```typescript
import { IsNavMenu } from 'is-uikit-components-vue/org';
import type { NavMenuItem } from 'is-uikit-components-vue/org';
```

| Componente | Descripción |
|---|---|
| `IsNavMenu` | Menú de navegación lateral corporativo |

Ver `src/org/index.ts` para agregar nuevos componentes propios de Interseguro.

---

## Subpath `/tailwind` — Preset Tailwind CSS

Preset de Tailwind con la paleta de colores corporativos, **sincronizado con `InterseguroAuraPreset`** (misma fuente de verdad en `src/tokens/palette.ts`).

```javascript
// tailwind.config.js del microfrontend
import { interseguroTailwindPreset } from 'is-uikit-components-vue/tailwind';

export default {
  presets: [interseguroTailwindPreset],
  content: ['./src/**/*.{vue,ts}'],
};
```

**Tokens de color disponibles:**

| Token Tailwind | Clase de ejemplo | Descripción |
|---|---|---|
| `interseguro` | `bg-interseguro-500` | Paleta principal corporativa |
| `interseguro-secondary` | `bg-interseguro-secondary-500` | Paleta secundaria (rosa) |
| `interseguro-info` | `bg-interseguro-info-500` | Paleta info (celeste) |
| `surface` | `bg-surface-100` | Escala de grises corporativa |
| `brand.navy` | `text-brand-navy` | Azul corporativo oscuro `#0B2559` |
| `brand.pink` | `text-brand-pink` | Acento corporativo `#FF429B` |
| `brand.lightblue` | `text-brand-lightblue` | Celeste corporativo `#55ACED` |
| `is.warning` | `text-is-warning` | Warning `#FFA813` |
| `is.danger` | `text-is-danger` | Danger `#F14649` |
| `is.success` | `text-is-success` | Success `#00B565` |
| `alert.success` | `bg-alert-success` | Alerta de éxito `#33BA6A` |
| `alert.danger` | `bg-alert-danger` | Alerta de error `#F25154` |

---

## Subpath `/style.css`

Estilos CSS compilados de la librería:

```typescript
import 'is-uikit-components-vue/style.css';
```

---

## Scripts de desarrollo

```bash
npm run build          # Compila la librería con Vite
npm run build:full     # Regenera adaptadores y compila (generate + build)
npm run generate       # Regenera src/adapters/generated.ts y src/styles/generated-styles.ts
npm run dev            # Compila en modo watch
npm run typecheck      # Verificación de tipos con vue-tsc
npm run preview        # Sirve el dist en http://localhost:9010
```

### Regenerar adaptadores tras actualizar PrimeVue

```bash
npm run build:full     # equivalente a: npm run generate && npm run build
```

---

## Publicar en npm

```bash
# Autenticarse en el registry privado
npm login --registry https://registry.tu-empresa.com

npm publish
```

El script `prepublishOnly` ejecuta automáticamente `build:full` (`generate` + `build`) antes de publicar.

---

## Compatibilidad

| Paquete | Versión |
|---|---|
| Vue | ^3.5.0 |
| PrimeVue | ^4.5.5 |
| @primevue/themes | ^4.5.4 |
| Node.js | ≥ 18 |