@dropi/ui 0.1.52 → 0.1.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/ui",
-  "version": "0.1.52",
+  "version": "0.1.54",
   "description": "Dropi Design System — Web Components for Angular, React and Vue",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -52,7 +52,7 @@
   ],
   "scripts": {
     "generate:maps": "node scripts/generate-icon-map.js && node scripts/generate-illustration-map.js && node scripts/generate-lottie-map.js",
-    "build": "npm run generate:maps && stencil build && npm run build --workspace=packages/react && npm run build --workspace=packages/angular",
+    "build": "npm run generate:maps && stencil build && npm run build --workspace=packages/react && npm run build --workspace=packages/angular && node scripts/strip-use-client.mjs",
     "clear:cache": "node -e \"const fs=require('fs');['.stencil','node_modules/.cache'].forEach(p=>{try{fs.rmSync(p,{recursive:true,force:true})}catch(e){}})\"",
     "publish:react": "npm run build && npm publish --workspace=packages/react",
     "dev": "stencil build --dev --watch & npm run watch --workspace=packages/react",

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

package/scripts/setup.js

@@ -150,7 +150,7 @@ async function run() {
           //          export default anyPlugin(nextConfig)
           //          export default anyPlugin()(nextConfig)
           const stencilWrap = (configVar) =>
-            `withStencil({\n  from: '@dropi/ui-react',\n  module: import('@dropi/ui-react/next'),\n  hydrateModule: import('@dropi/ui/hydrate'),\n})(${configVar})`;
+            `withStencil({\n  from: '@dropi/ui-react',\n  module: import('@dropi/ui-react/next'),\n  hydrateModule: import('@dropi/ui/hydrate'),\n  serializeShadowRoot: { default: 'declarative-shadow-dom' },\n})(${configVar})`;
 
           // Caso 1: export default bareConfig (sin wrapper)
           if (/export default (nextConfig|config)\s*;/.test(cfg)) {
@@ -201,6 +201,7 @@ export default withStencil({
   from: '@dropi/ui-react',
   module: import('@dropi/ui-react/next'),
   hydrateModule: import('@dropi/ui/hydrate'),
+  serializeShadowRoot: { default: 'declarative-shadow-dom' },
 })(nextConfig);
 `;
         fs.writeFileSync(path.join(projectRoot, 'next.config.ts'), newCfg);
@@ -222,22 +223,6 @@ dropi-ilustration-icon, dropi-empty-state, dropi-favorite-button,
 dropi-logo, dropi-avatars {
   text-align: initial;
 }
-
-/* Prevent invisible flash before hydration completes */
-[class*="dropi-"]:not(.hydrated),
-dropi-banner-external:not(.hydrated),
-dropi-logo:not(.hydrated),
-dropi-carousel:not(.hydrated) {
-  visibility: inherit !important;
-  opacity: 1 !important;
-}
-
-/* Reserve space for icons before hydration */
-dropi-icon:not(.hydrated) {
-  width: 24px;
-  height: 24px;
-  display: inline-flex;
-}
 `;
     const globalsCssCandidates = [
       path.join(projectRoot, 'src', 'app', 'globals.css'),

package/scripts/strip-use-client.mjs

@@ -0,0 +1,20 @@
+import { readFileSync, writeFileSync, existsSync } from 'node:fs';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const targets = [
+  'packages/react/dist/components.server.js',
+  'packages/react/src/components.server.ts',
+];
+
+for (const rel of targets) {
+  const filePath = resolve(root, rel);
+  if (!existsSync(filePath)) continue;
+  const content = readFileSync(filePath, 'utf8');
+  const stripped = content.replace(/^'use client';\s*\n+/, '');
+  if (content !== stripped) {
+    writeFileSync(filePath, stripped);
+    console.log(`[strip-use-client] stripped from ${rel}`);
+  }
+}