avanza-ui
Paquete de componentes UI usado por AvanzaCast.
Este README explica el flujo de build y las instrucciones rápidas para desarrollar, compilar y depurar avanza-ui en este monorepo.
Propósito
avanza-ui contiene componentes React reutilizables (Button, Modal, VideoTile, StudioHeader, etc.) y sus estilos. El artefacto compilado queda en dist/ y es consumido por otras aplicaciones del monorepo (por ejemplo broadcast-panel).
Resumen del flujo de build
- Usamos Rollup para compilar el código TS/TSX a
dist/index.cjs.jsydist/index.esm.js. postcssgenera CSS extracted (archivo global) yrollup-plugin-copycopia desdesrc/components/**/*.module.cssadist/components/ysrc/styles/**/*.cssadist/styles/para que las importaciones relativas en los archivos emitidos endist(p. ej.@import '../styles/globals.css') resuelvan correctamente en tiempo de ejecución.- Se dejó un script
scripts/copy-css.jscomo respaldo, pero está marcado como obsoleto; la copia la realizarollup-plugin-copyen el build normal.
Requisitos
- Node.js (recomendado >= 18)
- npm
Comandos útiles
Instalar dependencias del paquete:
cd packages/avanza-ui
npm install
Construir (producción / CI):
cd packages/avanza-ui
npm run build
rollup -ccompila el paquete yrollup-plugin-copycopiará automáticamente los CSS modules y estilos globales adist.
Modo desarrollo (watch):
cd packages/avanza-ui
npm run dev
Verificar que los CSS aparezcan en dist:
ls -la packages/avanza-ui/dist/components | head -n 40
ls -la packages/avanza-ui/dist/styles
Levantar el broadcast-panel para probar la UI integrada:
cd packages/broadcast-panel
npm run dev
# abrir http://localhost:5176/ (o el puerto que Vite muestre)
Notas y troubleshooting
-
Si ves warnings de Node como
MODULE_TYPELESS_PACKAGE_JSONal ejecutarnpm run build, puedes añadir"type": "module"apackages/avanza-ui/package.jsonpara evitar que Node reanalice elrollup.config.jscomo CommonJS. -
Si aparece un error tipo
ENOENT: no such file or directory, open '../styles/globals.css'significa quedist/styles/globals.cssno existe. Ejecutanpm run buildenpackages/avanza-uiy verifica quedist/styles/globals.cssydist/components/*.module.cssestén presentes. -
El script
packages/avanza-ui/scripts/copy-css.jsexiste como respaldo histórico. Ya está marcado como "deprecated" y no se ejecuta en el flujo por defecto. Si prefieres eliminarlo, puedes borrarlo del repositorio.
Integración en CI
Asegúrate de que el job que construye la aplicación principal (o que publica paquetes) ejecute:
cd packages/avanza-ui
npm ci
npm run build
Esto garantiza que los artefactos dist contienen tanto los JS compilados como los CSS necesarios.
Limpieza / regeneración de dist
Para forzar una reconstrucción limpia:
cd packages/avanza-ui
rm -rf dist node_modules
npm ci
npm run build
Contribuciones
Si agregas nuevos componentes que usan *.module.css o nuevos archivos en src/styles/, asegúrate de que las rutas relativas usadas en los ficheros emitidos en dist coincidan con la estructura que rollup-plugin-copy genera (dist/components y dist/styles).
Si quieres, puedo:
- añadir una nota al
README.mdde la raíz del repo explicando el cambio, o - abrir un commit/PR con estos cambios documentados.
Dime qué prefieres y lo hago ahora.