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.js y dist/index.esm.js.
  • postcss genera CSS extracted (archivo global) y rollup-plugin-copy copia desde src/components/**/*.module.css a dist/components/ y src/styles/**/*.css a dist/styles/ para que las importaciones relativas en los archivos emitidos en dist (p. ej. @import '../styles/globals.css') resuelvan correctamente en tiempo de ejecución.
  • Se dejó un script scripts/copy-css.js como respaldo, pero está marcado como obsoleto; la copia la realiza rollup-plugin-copy en 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 -c compila el paquete y rollup-plugin-copy copiará automáticamente los CSS modules y estilos globales a dist.

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_JSON al ejecutar npm run build, puedes añadir "type": "module" a packages/avanza-ui/package.json para evitar que Node reanalice el rollup.config.js como CommonJS.

  • Si aparece un error tipo ENOENT: no such file or directory, open '../styles/globals.css' significa que dist/styles/globals.css no existe. Ejecuta npm run build en packages/avanza-ui y verifica que dist/styles/globals.css y dist/components/*.module.css estén presentes.

  • El script packages/avanza-ui/scripts/copy-css.js existe 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.md de la raíz del repo explicando el cambio, o
  • abrir un commit/PR con estos cambios documentados.

Dime qué prefieres y lo hago ahora.