@dropi/ui 0.1.15 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/ui",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "Dropi Design System — Web Components for Angular, React and Vue",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/readme.md

@@ -3,70 +3,42 @@
 Librería de Web Components del Design System de Dropi, construida con **Stencil.js v4**.
 Genera componentes reutilizables para Angular, React y Vue desde una única base de código.
 
-- **Paquete npm:** `@dropi/ui` (v0.1.6)
+- **Paquete npm:** `@dropi/ui` (v0.1.15)
 - **React wrappers:** `@dropi/ui-react`
 
 ---
 
-## Instalación
+## ⚡ Quick Start (Recomendado)
 
-| Framework | Paquete a instalar |
-|---|---|
-| React | `npm install @dropi/ui-react` |
-| Angular / Vue / Vanilla | `npm install @dropi/ui` |
-
-> **¿Por qué dos paquetes?**
-> `@dropi/ui` contiene los Web Components puros (estándares del navegador).
-> `@dropi/ui-react` son wrappers React auto-generados por Stencil que los envuelven con props tipadas, eventos estilo React (`onDropiChange`) y autocompletado en VSCode.
-> `@dropi/ui-react` depende internamente de `@dropi/ui` — no necesitas instalar los dos.
-
----
-
-## Setup
-
-### React (`main.tsx`)
-
-Con `@dropi/ui-react` **no necesitas** llamar `defineCustomElements()` — cada wrapper registra su Web Component automáticamente al importarlo.
-
-```typescript
-import '@dropi/ui/dist/dropi-ui/dropi-ui.css'  // estilos globales y tokens
-
-// No se necesita defineCustomElements()
-// Solo importa y usa los componentes directamente
-```
+La forma más rápida y segura de integrar la librería es usando nuestro configurador automático.
 
-### Angular (`main.ts`)
+### Con IA (Claude / Cursor / Windsurf)
+Si usas un asistente de IA, simplemente dile:
+> **`/install-dropi-ui`** o **"configura dropi-ui en este proyecto"**
 
-```typescript
-import { defineCustomElements } from '@dropi/ui/loader'
-import '@dropi/ui/dist/dropi-ui/dropi-ui.css'
-
-defineCustomElements()
-bootstrapApplication(AppComponent, appConfig)
+### Manual (Terminal)
+Ejecuta el siguiente comando en la raíz de tu proyecto:
+```bash
+npx @dropi/ui setup
 ```
+*Este comando detectará tu framework (Angular, React o Vue), instalará las dependencias necesarias y configurará estilos e iconos automáticamente.*
 
-En módulos o componentes Angular que usen tags `<dropi-*>`, agregar el schema:
-
-```typescript
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
-
-@NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA] })
-// o en standalone:
-@Component({ schemas: [CUSTOM_ELEMENTS_SCHEMA] })
-```
+---
 
-### Assets (íconos)
+## 🛠️ Instalación Manual
 
-El componente `<dropi-icon>` requiere el sprite en `/assets/icons/symbol/svg/sprite.css.svg`.
+Si prefieres realizar la configuración paso a paso, consulta la [Guía de Integración Detallada](DROPI_UI_SETUP.md) o sigue estos pasos:
 
-**Angular** — en `angular.json`:
-```json
-"assets": [
-  { "glob": "sprite.css.svg", "input": "node_modules/@dropi/ui/dist/dropi-ui/assets/icons/symbol/svg/", "output": "assets/icons/symbol/svg/" }
-]
-```
+### 1. Paquetes
+| Framework | Paquete a instalar |
+|---|---|
+| React | `npm install @dropi/ui @dropi/ui-react` |
+| Angular / Vue / Vanilla | `npm install @dropi/ui` |
 
-**React/Vite** — copiar a `public/assets/icons/symbol/svg/`.
+### 2. Estilos e Iconos
+- **CSS**: Importar `@dropi/ui/dist/dropi-ui/dropi-ui.css` en tu entry point.
+- **Loader**: Llamar a `defineCustomElements()` de `@dropi/ui/loader`.
+- **Iconos**: El componente `<dropi-icon>` requiere que el sprite SVG esté en `/assets/icons/symbol/svg/sprite.css.svg`.
 
 ---
 

package/scripts/postinstall.js

@@ -10,10 +10,29 @@ const path = require('path');
 
 // Solo mostrar el mensaje si se instala como dependencia, no en desarrollo local
 if (__dirname.includes('node_modules')) {
+  const fs = require('fs');
+  const projectRoot = path.resolve(__dirname, '../../..');
+  const skillsBase = path.join(__dirname, '..', 'skills', 'install-dropi-ui');
+
+  // 1. Copiar Skills para IAs (Claude, Cursor, etc.)
+  const skillTargets = [
+    { editor: 'Claude', src: 'skill.md', dest: path.join(projectRoot, '.claude', 'skills', 'install-dropi-ui', 'skill.md') },
+    { editor: 'Cursor', src: 'cursor.mdc', dest: path.join(projectRoot, '.cursor', 'rules', 'install-dropi-ui.mdc') },
+  ];
+
+  skillTargets.forEach(t => {
+    try {
+      if (fs.existsSync(t.dest)) return;
+      fs.mkdirSync(path.dirname(t.dest), { recursive: true });
+      fs.copyFileSync(path.join(skillsBase, t.src), t.dest);
+    } catch (e) { /* silent fail for skills */ }
+  });
+
   console.log('\x1b[36m%s\x1b[0m', '\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
   console.log('\x1b[1m%s\x1b[0m', '  🎨 @dropi/ui instalado exitosamente');
   console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
   console.log('\n  Para configurar estilos, iconos y soporte React, ejecuta:');
   console.log('\x1b[33m%s\x1b[0m', '  npx @dropi/ui setup');
+  console.log('\x1b[32m%s\x1b[0m', '  o simplemente pídele a tu IA: "/install-dropi-ui"');
   console.log('\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');
 }

package/skills/install-dropi-ui/cursor.mdc

@@ -1,10 +1,5 @@
----
-description: Instala y configura automáticamente @dropi/ui en Angular, React o Vue
-globs: ["package.json"]
-alwaysApply: true
----
-
 # @dropi/ui — Configuración pendiente
 
 Este proyecto tiene `@dropi/ui` instalado pero necesita configuración.
-Lee `DROPI_UI_SETUP.md` en la raíz del proyecto y ejecuta los pasos automáticamente.
+Ejecuta el script de instalación oficial: `node node_modules/@dropi/ui/scripts/setup.js`.
+Una vez completado, verifica los estilos y el sprite de iconos en la carpeta public.

package/skills/install-dropi-ui/skill.md

@@ -24,190 +24,42 @@ import { DropiButton } from '@dropi/ui/dist/components'
 
 ---
 
-## Instrucciones
+## Instrucciones de Instalación
 
-### Paso 1 — Detectar framework, bundler y gestor de paquetes
+Para configurar la librería, el asistente de IA debe ejecutar el script de automatización oficial incluido en el paquete. Esto garantiza que la detección de framework y la configuración de iconos/estilos se realicen correctamente según los estándares de Dropi.
 
-Lee `package.json` y determina:
-- **Framework**: Angular (`@angular/core`), React (`react`), Vue (`vue`)
-- **Package manager**: `yarn.lock` → yarn | `pnpm-lock.yaml` → pnpm | `package-lock.json` → npm
-- **Bundler**: existe `vite.config.ts` o `vite.config.js` → es Vite (aplica pasos especiales)
+### 1. Ejecutar el script de Setup
 
-### Paso 2 — Instalar dependencias
+Ejecuta el siguiente comando en la terminal del proyecto:
 
-**Angular / Vue:**
 ```bash
-yarn add @dropi/ui
-# o
-npm install @dropi/ui
+node node_modules/@dropi/ui/scripts/setup.js
 ```
 
-**React:**
-```bash
-yarn add @dropi/ui @dropi/ui-react
-# o
-npm install @dropi/ui @dropi/ui-react
-```
-
-### Paso 3 — Fix obligatorio para Vite (React y Vue) ⚠️
-
-**Sin esto los componentes NO cargan.** Abre `vite.config.ts` y agrega `optimizeDeps`:
-
-```ts
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'  // o vue si aplica
-
-export default defineConfig({
-  plugins: [react()],
-  optimizeDeps: {
-    exclude: ['@dropi/ui/loader', '@dropi/ui'],
-  },
-})
-```
-
-Esto resuelve estos errores:
-- `Failed to fetch dynamically imported module: .../dropi-button.entry.js`
-- `Constructor for "dropi-button#undefined" was not found`
-- `Missing field moduleType` (Vite 6+/8+)
-
-### Paso 4 — Inyectar estilos globales
-
-**Angular** — al inicio de `src/styles.scss`:
-```scss
-@import '@dropi/ui/dist/dropi-ui/dropi-ui.css';
-```
-Verificar también `angular.json` bajo `styles[]`.
-
-**React / Vue** — al inicio de `src/main.tsx` o `src/main.ts`:
-```ts
-import '@dropi/ui/dist/dropi-ui/dropi-ui.css'
-```
+### 2. Verificación
 
-### Paso 5 — Registrar con lazy loader (OBLIGATORIO, no usar import directo)
-
-**Angular** — en `src/main.ts` o `app.config.ts`:
-```ts
-import { defineCustomElements } from '@dropi/ui/loader'
-defineCustomElements()
-```
-Agregar `CUSTOM_ELEMENTS_SCHEMA` al módulo standalone:
-```ts
-// app.config.ts
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
-export const appConfig: ApplicationConfig = {
-  providers: [
-    importProvidersFrom({ schemas: [CUSTOM_ELEMENTS_SCHEMA] })
-  ]
-}
-```
-
-**Vue** — en `src/main.ts`:
-```ts
-import { defineCustomElements } from '@dropi/ui/loader'
-defineCustomElements()
-```
-
-**React** — en `src/main.tsx`:
-```tsx
-import { defineCustomElements } from '@dropi/ui/loader'
-import '@dropi/ui/dist/dropi-ui/dropi-ui.css'
-import './index.css'
+Una vez finalizado el script, verifica que:
+- Los iconos carguen correctamente (sin errores 404 en el sprite).
+- Los estilos globales estén inyectados en el punto de entrada principal (`main.tsx`, `main.ts`, etc.).
+- Si es React, el paquete `@dropi/ui-react` esté instalado.
 
-defineCustomElements()  // ← antes del createRoot
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
-```
-
-En los componentes React, importar desde `@dropi/ui-react` (NO del core):
-```tsx
-import { DropiButton, DropiSelect, DropiBadge } from '@dropi/ui-react'
-```
-
-### Paso 6 — Verificar tsconfig.app.json (React + TypeScript)
-
-Asegurarse de que `tsconfig.app.json` tenga `skipLibCheck: true` para evitar errores de tipado de las librerías:
-
-```json
-{
-  "compilerOptions": {
-    "skipLibCheck": true,
-    "target": "ES2023",
-    "lib": ["ES2023", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "jsx": "react-jsx",
-    "strict": true,
-    "noEmit": true
-  }
-}
-```
-
-Si `skipLibCheck` no está → agregar. Sin esto pueden aparecer errores de tipos en `node_modules`.
-
-### Paso 7 — Copiar sprite de íconos
-
-**Linux / Mac:**
-```bash
-# Angular
-mkdir -p src/assets/icons/symbol/svg
-cp node_modules/@dropi/ui/assets/icons/symbol/svg/sprite.css.svg src/assets/icons/symbol/svg/
-
-# React / Vue (Vite)
-mkdir -p public/assets/icons/symbol/svg
-cp node_modules/@dropi/ui/assets/icons/symbol/svg/sprite.css.svg public/assets/icons/symbol/svg/
-```
-
-**Windows (usar Node para compatibilidad):**
-```bash
-# React / Vue (Vite)
-node -e "const fs=require('fs');fs.mkdirSync('public/assets/icons/symbol/svg',{recursive:true});fs.copyFileSync('node_modules/@dropi/ui/assets/icons/symbol/svg/sprite.css.svg','public/assets/icons/symbol/svg/sprite.css.svg');console.log('Sprite copiado ✅')"
-
-# Angular
-node -e "const fs=require('fs');fs.mkdirSync('src/assets/icons/symbol/svg',{recursive:true});fs.copyFileSync('node_modules/@dropi/ui/assets/icons/symbol/svg/sprite.css.svg','src/assets/icons/symbol/svg/sprite.css.svg');console.log('Sprite copiado ✅')"
-```
-
-### Paso 8 — Validar instalación
-
-```bash
-yarn build   # o npm run build / pnpm build
-```
-
-Errores comunes y solución:
-| Error | Causa | Fix |
-|---|---|---|
-| `Failed to fetch dynamically imported module` | Falta `optimizeDeps.exclude` en vite.config | Paso 3 |
-| `Constructor for "dropi-button#undefined" was not found` | Mismo | Paso 3 |
-| `Missing field moduleType` | Vite 6+/8+ sin optimizeDeps | Paso 3 |
-| Errores de tipos en node_modules | Falta `skipLibCheck: true` | Paso 6 |
-| Íconos no aparecen | Sprite no copiado | Paso 7 |
-
-### Paso 9 — Reporte final
-
-```
-✅ @dropi/ui instalado exitosamente en [FRAMEWORK]
-
-  - Dependencia: @dropi/ui@X.X.X [+ @dropi/ui-react]
-  - vite.config: optimizeDeps.exclude ✓
-  - Estilos: [archivo] ✓
-  - Loader (lazy): defineCustomElements() en [archivo] ✓
-  - Sprite: [ruta destino] ✓
-  - skipLibCheck: true ✓
+---
 
-Prueba rápida (React):
-  import { DropiButton } from '@dropi/ui-react'
-  <DropiButton text="Hola Dropi" type="default" severity="primary" size="normal" />
+## Fallback Manual (Solo si el script falla)
 
-Prueba rápida (Angular/Vue):
-  <dropi-button text="Hola Dropi" type="default" severity="primary" size="normal"></dropi-button>
-```
+> [!WARNING]
+> Usa estos pasos solo si el comando anterior no puede ejecutarse por restricciones del entorno.
 
-## Reglas
+1. **Instalar dependencias**: `npm install @dropi/ui` (y `@dropi/ui-react` si es React).
+2. **Vite Fix**: Agregar `optimizeDeps.exclude: ['@dropi/ui/loader', '@dropi/ui']` en `vite.config`.
+3. **Estilos**: Importar `@dropi/ui/dist/dropi-ui/dropi-ui.css` en el entry point.
+4. **Loader**: Llamar a `defineCustomElements()` de `@dropi/ui/loader` antes del renderizado.
+5. **Iconos**: Crear un enlace simbólico del sprite:
+   `ln -sf $(pwd)/node_modules/@dropi/ui/assets/icons/symbol/svg/sprite.css.svg public/assets/icons/symbol/svg/sprite.css.svg`
+6. **TS Config**: Asegurar `skipLibCheck: true`.
+7. **Validar**: Ejecutar `npm run build`.
 
-- Lazy loading SIEMPRE via `defineCustomElements` del loader — NUNCA imports directos de componentes
-- NO sobreescribir imports que ya existan
-- En Windows usar el comando `node -e` para operaciones de archivos
+## Reglas Críticas
+- **Lazy Loading**: NUNCA importar componentes directamente. Usar siempre el loader.
+- **Iconos**: El sprite DEBE estar en `public/assets/icons/symbol/svg/sprite.css.svg` para que `<dropi-icon>` funcione.
 - Si el build falla, mostrar el error exacto y resolverlo antes de reportar éxito