@dropi/ui 0.1.53 → 0.1.54

package/package.json

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

package/readme.md

@@ -3,8 +3,10 @@
 Librería de Web Components del Design System de Dropi, construida con **Stencil.js v4**.
 Genera componentes de alto rendimiento para **Angular**, **React** y **Next.js** desde una única base de código.
 
-- **Paquete npm:** [@dropi/ui](https://www.npmjs.com/package/@dropi/ui) (v0.1.44)
-- **React wrappers:** [@dropi/ui-react](https://www.npmjs.com/package/@dropi/ui-react) (v0.1.18)
+- **Paquete npm:** [@dropi/ui](https://www.npmjs.com/package/@dropi/ui) (v0.1.53)
+- **React wrappers:** [@dropi/ui-react](https://www.npmjs.com/package/@dropi/ui-react) (v0.1.15)
+- **Angular wrappers:** [@dropi/ui-angular](https://www.npmjs.com/package/@dropi/ui-angular) (v0.1.4)
+- **Storybook:** [ui.dropi.co](https://ui.dropi.co)
 
 > [!NOTE]
 > Esta es una librería de uso interno y para partners autorizados. La documentación detallada del código fuente reside en nuestro repositorio privado de Bitbucket.
@@ -28,19 +30,91 @@ Este comando detectará tu framework e instalará automáticamente las dependenc
 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:
 
 ### 1. Paquetes
-| Framework | Paquete a instalar |
-|---|---|
-| Angular | `npm install @dropi/ui @dropi/ui-angular` |
-| React | `npm install @dropi/ui @dropi/ui-react` |
-| Next.js SSR | `npm install @dropi/ui @dropi/ui-react && npm install --save-dev @stencil/ssr --legacy-peer-deps` |
 
-### 2. Estilos e Iconos
-- **CSS**: Importar `@dropi/ui/dist/dropi-ui/dropi-ui.css`.
+**React / Vite**
+```bash
+yarn add @dropi/ui @dropi/ui-react dropi-lib-icons @stencil/react-output-target @lottiefiles/lottie-player
+```
+
+**Angular**
+```bash
+yarn add @dropi/ui @dropi/ui-angular dropi-lib-icons @lottiefiles/lottie-player
+```
+
+**Next.js SSR**
+```bash
+yarn add @dropi/ui @dropi/ui-react dropi-lib-icons @stencil/react-output-target @lottiefiles/lottie-player
+yarn add -D @stencil/ssr --legacy-peer-deps
+```
+
+> [!IMPORTANT]
+> `@stencil/react-output-target` es una **peer dependency** requerida. Siempre instálala junto con `@dropi/ui-react`.
+
+### 2. Configurar CSS y Lottie en el punto de entrada
+
+**React / Vite — `src/main.tsx`**
+```tsx
+import { defineCustomElements } from '@lottiefiles/lottie-player/dist/lottie-player';
+import '@dropi/ui/dist/dropi-ui/dropi-ui.css';
+
+defineCustomElements();
+```
+
+**Angular — `src/main.ts`**
+```ts
+import { defineCustomElements } from '@lottiefiles/lottie-player/dist/lottie-player';
+import '@dropi/ui/dist/dropi-ui/dropi-ui.css';
+
+defineCustomElements();
+```
+
+> [!NOTE]
+> Si usas Angular con `angular.json`, también puedes agregar el CSS en la sección `styles`:
+> ```json
+> "styles": ["node_modules/@dropi/ui/dist/dropi-ui/dropi-ui.css"]
+> ```
+
+### 3. Estilos e Iconos
+- **CSS**: Importar `@dropi/ui/dist/dropi-ui/dropi-ui.css` (ver paso 2).
 - **CSS Resets**: Añade este reset para evitar saltos de layout en los iconos:
   `dropi-icon:not(.hydrated) { width: 20px; height: 20px; display: inline-flex; }`
-- **Registro**: No hace falta llamar `defineCustomElements()`.
+- **Registro**: No hace falta llamar `defineCustomElements()` de `@dropi/ui` (solo el de lottie-player).
 - **SSR (Next.js)**: Configurar `next.config.ts` e importar siempre desde `/next`.
-- **Iconos**: El sprite SVG debe estar en `public/assets/icons/symbol/svg/sprite.css.svg`.
+- **Iconos SVG**: El sprite SVG debe estar en `public/assets/icons/symbol/svg/sprite.css.svg`.
+
+---
+
+## 📦 Peer Dependencies
+
+Estas son las dependencias que el proyecto consumidor **debe tener instaladas**. Los paquetes de dropi-ui las declaran como `peerDependencies` y no las instalan automáticamente.
+
+### Comunes (todos los frameworks)
+
+| Paquete | Versión mínima | Para qué se usa |
+|---|---|---|
+| `@dropi/ui` | `>=0.1.53` | Web components base (Stencil) |
+| `dropi-lib-icons` | `>=1.3.4` | Sprite SVG de íconos del sistema |
+| `@lottiefiles/lottie-player` | `>=2.0.0` | Animaciones en `dropi-toast`, `dropi-alert-modal`, `dropi-lottie-loader` |
+
+### Solo React / Next.js
+
+| Paquete | Versión mínima | Para qué se usa |
+|---|---|---|
+| `react` | `>=17` | Framework React |
+| `react-dom` | `>=17` | Renderizado React |
+| `@dropi/ui-react` | `>=0.1.15` | Wrappers React para todos los componentes |
+| `@stencil/react-output-target` | `>=1.5.0` | Requerido por `@dropi/ui-react` para el output de Stencil |
+
+### Solo Angular
+
+| Paquete | Versión mínima | Para qué se usa |
+|---|---|---|
+| `@angular/core` | `>=15` | Framework Angular |
+| `@angular/common` | `>=15` | Módulos comunes de Angular |
+| `@dropi/ui-angular` | `>=0.1.4` | Wrappers Angular para todos los componentes |
+
+> [!TIP]
+> Si ves el error `Cannot find module '@stencil/react-output-target'` asegúrate de que esté instalado aunque no lo uses directamente — es requerido en tiempo de compilación por `@dropi/ui-react`.
 
 ---