@dropi/ui 0.1.53 → 0.1.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/hydrate/index.js +86 -94
  2. package/hydrate/index.mjs +86 -94
  3. package/package.json +1 -1
  4. package/readme.md +97 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dropi/ui",
3
- "version": "0.1.53",
3
+ "version": "0.1.55",
4
4
  "description": "Dropi Design System — Web Components for Angular, React and Vue",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
package/readme.md CHANGED
@@ -3,8 +3,10 @@
3
3
  Librería de Web Components del Design System de Dropi, construida con **Stencil.js v4**.
4
4
  Genera componentes de alto rendimiento para **Angular**, **React** y **Next.js** desde una única base de código.
5
5
 
6
- - **Paquete npm:** [@dropi/ui](https://www.npmjs.com/package/@dropi/ui) (v0.1.44)
7
- - **React wrappers:** [@dropi/ui-react](https://www.npmjs.com/package/@dropi/ui-react) (v0.1.18)
6
+ - **Paquete npm:** [@dropi/ui](https://www.npmjs.com/package/@dropi/ui) (v0.1.53)
7
+ - **React wrappers:** [@dropi/ui-react](https://www.npmjs.com/package/@dropi/ui-react) (v0.1.15)
8
+ - **Angular wrappers:** [@dropi/ui-angular](https://www.npmjs.com/package/@dropi/ui-angular) (v0.1.4)
9
+ - **Storybook:** [ui.dropi.co](https://ui.dropi.co)
8
10
 
9
11
  > [!NOTE]
10
12
  > 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.
@@ -19,7 +21,18 @@ Si estás en un proyecto de React o Angular, la forma más rápida de configurar
19
21
  npx @dropi/ui setup
20
22
  ```
21
23
 
22
- Este comando detectará tu framework e instalará automáticamente las dependencias y configuraciones necesarias.
24
+ Este comando detecta tu framework y configura automáticamente:
25
+ - Instala `@dropi/ui` y `@dropi/ui-react` / `@dropi/ui-angular`
26
+ - Inyecta el CSS en `main.tsx` o `styles.scss`
27
+ - Agrega el script de `lottie-player` en `index.html` (vía CDN)
28
+ - Copia/symlink los assets de íconos y lottie a `public/`
29
+ - Configura `vite.config.ts` (React/Vue) o `next.config.ts` (Next.js SSR)
30
+
31
+ > [!NOTE]
32
+ > El CLI **no instala** `dropi-lib-icons`, `@stencil/react-output-target` ni `@lottiefiles/lottie-player` como paquetes npm. Instálalos manualmente después:
33
+ > ```bash
34
+ > yarn add dropi-lib-icons @stencil/react-output-target @lottiefiles/lottie-player
35
+ > ```
23
36
 
24
37
  ---
25
38
 
@@ -28,19 +41,91 @@ Este comando detectará tu framework e instalará automáticamente las dependenc
28
41
  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:
29
42
 
30
43
  ### 1. Paquetes
31
- | Framework | Paquete a instalar |
32
- |---|---|
33
- | Angular | `npm install @dropi/ui @dropi/ui-angular` |
34
- | React | `npm install @dropi/ui @dropi/ui-react` |
35
- | Next.js SSR | `npm install @dropi/ui @dropi/ui-react && npm install --save-dev @stencil/ssr --legacy-peer-deps` |
36
44
 
37
- ### 2. Estilos e Iconos
38
- - **CSS**: Importar `@dropi/ui/dist/dropi-ui/dropi-ui.css`.
45
+ **React / Vite**
46
+ ```bash
47
+ yarn add @dropi/ui @dropi/ui-react dropi-lib-icons @stencil/react-output-target @lottiefiles/lottie-player
48
+ ```
49
+
50
+ **Angular**
51
+ ```bash
52
+ yarn add @dropi/ui @dropi/ui-angular dropi-lib-icons @lottiefiles/lottie-player
53
+ ```
54
+
55
+ **Next.js SSR**
56
+ ```bash
57
+ yarn add @dropi/ui @dropi/ui-react dropi-lib-icons @stencil/react-output-target @lottiefiles/lottie-player
58
+ yarn add -D @stencil/ssr --legacy-peer-deps
59
+ ```
60
+
61
+ > [!IMPORTANT]
62
+ > `@stencil/react-output-target` es una **peer dependency** requerida. Siempre instálala junto con `@dropi/ui-react`.
63
+
64
+ ### 2. Configurar CSS y Lottie en el punto de entrada
65
+
66
+ **React / Vite — `src/main.tsx`**
67
+ ```tsx
68
+ import { defineCustomElements } from '@lottiefiles/lottie-player/dist/lottie-player';
69
+ import '@dropi/ui/dist/dropi-ui/dropi-ui.css';
70
+
71
+ defineCustomElements();
72
+ ```
73
+
74
+ **Angular — `src/main.ts`**
75
+ ```ts
76
+ import { defineCustomElements } from '@lottiefiles/lottie-player/dist/lottie-player';
77
+ import '@dropi/ui/dist/dropi-ui/dropi-ui.css';
78
+
79
+ defineCustomElements();
80
+ ```
81
+
82
+ > [!NOTE]
83
+ > Si usas Angular con `angular.json`, también puedes agregar el CSS en la sección `styles`:
84
+ > ```json
85
+ > "styles": ["node_modules/@dropi/ui/dist/dropi-ui/dropi-ui.css"]
86
+ > ```
87
+
88
+ ### 3. Estilos e Iconos
89
+ - **CSS**: Importar `@dropi/ui/dist/dropi-ui/dropi-ui.css` (ver paso 2).
39
90
  - **CSS Resets**: Añade este reset para evitar saltos de layout en los iconos:
40
91
  `dropi-icon:not(.hydrated) { width: 20px; height: 20px; display: inline-flex; }`
41
- - **Registro**: No hace falta llamar `defineCustomElements()`.
92
+ - **Registro**: No hace falta llamar `defineCustomElements()` de `@dropi/ui` (solo el de lottie-player).
42
93
  - **SSR (Next.js)**: Configurar `next.config.ts` e importar siempre desde `/next`.
43
- - **Iconos**: El sprite SVG debe estar en `public/assets/icons/symbol/svg/sprite.css.svg`.
94
+ - **Iconos SVG**: El sprite SVG debe estar en `public/assets/icons/symbol/svg/sprite.css.svg`.
95
+
96
+ ---
97
+
98
+ ## 📦 Peer Dependencies
99
+
100
+ 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.
101
+
102
+ ### Comunes (todos los frameworks)
103
+
104
+ | Paquete | Versión mínima | Para qué se usa |
105
+ |---|---|---|
106
+ | `@dropi/ui` | `>=0.1.53` | Web components base (Stencil) |
107
+ | `dropi-lib-icons` | `>=1.3.4` | Sprite SVG de íconos del sistema |
108
+ | `@lottiefiles/lottie-player` | `>=2.0.0` | Animaciones en `dropi-toast`, `dropi-alert-modal`, `dropi-lottie-loader` |
109
+
110
+ ### Solo React / Next.js
111
+
112
+ | Paquete | Versión mínima | Para qué se usa |
113
+ |---|---|---|
114
+ | `react` | `>=17` | Framework React |
115
+ | `react-dom` | `>=17` | Renderizado React |
116
+ | `@dropi/ui-react` | `>=0.1.15` | Wrappers React para todos los componentes |
117
+ | `@stencil/react-output-target` | `>=1.5.0` | Requerido por `@dropi/ui-react` para el output de Stencil |
118
+
119
+ ### Solo Angular
120
+
121
+ | Paquete | Versión mínima | Para qué se usa |
122
+ |---|---|---|
123
+ | `@angular/core` | `>=15` | Framework Angular |
124
+ | `@angular/common` | `>=15` | Módulos comunes de Angular |
125
+ | `@dropi/ui-angular` | `>=0.1.4` | Wrappers Angular para todos los componentes |
126
+
127
+ > [!TIP]
128
+ > 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`.
44
129
 
45
130
  ---
46
131