# 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:

```bash
cd packages/avanza-ui
npm install
```

Construir (producción / CI):

```bash
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):

```bash
cd packages/avanza-ui
npm run dev
```

Verificar que los CSS aparezcan en dist:

```bash
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:

```bash
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:

```bash
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:

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