Cesar Mendivil
a2a2da6586
Some checks failed
E2E Playwright - Studio Panel / playwright-e2e (push) Has been cancelled
103 lines
3.4 KiB
Markdown
103 lines
3.4 KiB
Markdown
# 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.
|