@crtobiasdelsud/portal-ui 1.1.16 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## [1.2.0] — 2026-06-18
+
+### Added
+
+Widget y screen **Mundial 2026**, copiando el diseño "Mundial 2026 · El Editor
+Platense": verde petróleo `#034134`, papel cálido, serif Frank Ruhl Libre, borde
+superior verde y banderas SVG geométricas. Componentes "vista pura" (cada app
+pega al proxy `/api/portal/mundial` y les pasa la data resuelta).
+
+- **`components/Mundial2026/Mundial2026View.jsx`** (nuevo): widget tira de
+  resultados (variante **V2**: celdas con aire + banderas grandes). Estado por
+  partido (EN VIVO con punto pulsante + minuto / horario "Hoy 21:00" / Finalizado),
+  dos equipos por celda (bandera + código + marcador, ganador/perdedor resaltado),
+  fila scrollable. Cabecera con barra verde, "Mundial 2026", fase y slot de
+  sponsor opcional. Prop `bare` para insertarlo dentro de la sección.
+- **`components/Mundial2026/MundialBoardView.jsx`** (nuevo): sección completa para
+  `/mundial` (variante "Página"): la tira arriba, partido destacado (matchcard con
+  goleador y sede) y sidebar con **Posiciones**, **Goleadores** y **Próximos
+  partidos**.
+- **`components/Mundial2026/flags.jsx`** (nuevo): banderas SVG geométricas + nombres
+  por código de 3 letras (TLA) y componente `<Flag size="sm|md|lg">`.
+- **`components/Mundial2026/mundialFormat.js`** (nuevo): etiquetas de horario es-AR
+  ("Hoy 21:00" / "Mañana 16:00").
+- La paleta del diseño va scopeada al contenedor (no se filtra al resto del portal).
+- Exportados desde el barrel: `Mundial2026View`, `MundialBoardView`.
+
 ## [Unreleased] — 2026-06-04
 
 ### Added

package/README.md

@@ -58,6 +58,18 @@ const nextConfig = {
 
 ## Setup mínimo
 
+### Convención de identidad editorial
+
+Cuando una app consumidora inyecta `siteConfig` con `slots.header.settings`, el
+paquete distingue:
+
+- `siteName` → branding visual del medio
+- `publisherName` → firma organizacional para bylines / author display
+
+Para autoría organizacional, `Portal-UI` resuelve `publisherName || siteName`.
+Esto evita que un cambio de branding visual cambie automáticamente la firma
+editorial de notas o previews si el tenant define `publisherName`.
+
 ### Next (App Router)
 
 ```jsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crtobiasdelsud/portal-ui",
-  "version": "1.1.16",
+  "version": "1.2.1",
   "description": "Componentes compartidos entre el portal (Next) y el CMS (Vite) — widgets, views, providers para adapters y article pool.",
   "type": "module",
   "main": "./src/index.js",

package/src/components/Mundial2026/Flags.module.scss

@@ -0,0 +1,42 @@
+// Bandera geométrica simple (3:2), reutilizable por widget y board.
+.fl {
+  display: inline-block;
+  width: 23px;
+  height: 15.5px;
+  border-radius: 2.5px;
+  overflow: hidden;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
+  flex: none;
+  background: #eee;
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// Bandera por imagen (logo/escudo del proveedor — Promiedos sirve 60x60).
+// Caja cuadrada (aspect 1:1, ancho derivado del alto) + `contain` para NO
+// recortar la imagen. Sin fondo ni borde, que la imagen ya trae el suyo.
+.img {
+  width: auto;
+  aspect-ratio: 1 / 1;
+  object-fit: contain;
+  object-position: center;
+  background: transparent;
+  box-shadow: none;
+  border-radius: 0;
+}
+
+.md {
+  width: 28px;
+  height: 19px;
+  border-radius: 3px;
+}
+
+.lg {
+  width: 34px;
+  height: 23px;
+  border-radius: 3px;
+}

package/src/components/Mundial2026/Mundial2026.module.scss

@@ -0,0 +1,229 @@
+@use "../../styles/index.scss" as *;
+
+// Paleta del diseño "Mundial 2026 · El Editor" (verde petróleo, papel cálido),
+// scopeada al contenedor para no filtrar al resto del portal.
+.mwid {
+  --green: #034134;
+  --green-2: #0a5d49;
+  --green-tint: #eef3f1;
+  --live: #b3261e;
+  --ink: #141414;
+  --ink-2: #3d3d3d;
+  --muted: #6f6f6f;
+  --faint: #9a968c;
+  --line: #e3e1da;
+  --line-2: #efece4;
+  --paper: #ffffff;
+
+  background: var(--paper);
+  border: 1px solid var(--line);
+  border-top: 3px solid var(--green);
+  color: var(--ink);
+  font-family: var(--font-inter, 'Inter', system-ui, sans-serif);
+}
+
+.bare {
+  border: 0;
+  border-top: 0;
+
+  .head { background: #faf9f6; }
+}
+
+// Widget clickeable → /mundial. El <a>/<Link> envuelve toda la tarjeta.
+.link {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+  transition: box-shadow 0.15s ease, transform 0.15s ease;
+
+  &:hover {
+    box-shadow: 0 6px 22px -14px rgba(3, 65, 52, 0.55);
+  }
+
+  &:hover .go {
+    color: var(--green-2);
+    gap: 8px;
+  }
+}
+
+// Hint "Ver Mundial ›" a la derecha de la cabecera (header claro → verde).
+.go {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex: none;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--green);
+  transition: gap 0.15s ease, color 0.15s ease;
+}
+
+// ── Cabecera ───────────────────────────────────────────────
+.head {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  padding: 13px 18px;
+  border-bottom: 1px solid var(--line);
+}
+
+.bar {
+  width: 4px;
+  height: 19px;
+  background: var(--green);
+  flex: none;
+}
+
+.title {
+  font-family: var(--font-titulo, 'Frank Ruhl Libre', Georgia, serif);
+  font-weight: 800;
+  font-size: 17px;
+  margin: 0;
+  letter-spacing: 0.01em;
+}
+
+.ph {
+  color: var(--faint);
+  font-size: 12px;
+  font-weight: 500;
+  padding-left: 10px;
+  border-left: 1px solid var(--line);
+  margin-left: 2px;
+}
+
+.spon {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+
+.sponLbl {
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--faint);
+  font-weight: 600;
+}
+
+.sponSlot {
+  min-height: 22px;
+  padding: 4px 10px;
+  border: 1px dashed var(--line);
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  color: var(--faint);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+// ── Fila de celdas ─────────────────────────────────────────
+.row {
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+
+.cell {
+  flex: 1 0 0;
+  min-width: 184px;
+  padding: 13px 18px 14px;
+  border-left: 1px solid var(--line-2);
+
+  &:first-child { border-left: 0; }
+}
+
+// ── Estado del partido ─────────────────────────────────────
+.st {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  height: 18px;
+  margin-bottom: 11px;
+}
+
+.stText {
+  font-size: 10.5px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+
+.stLive .stText { color: var(--live); }
+.stTime .stText { color: var(--green); }
+.stFinal .stText { color: var(--faint); }
+
+.min {
+  font-size: 10.5px;
+  font-weight: 700;
+  color: var(--live);
+}
+
+.liveDot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--live);
+  animation: mundialPulse 1.4s ease-in-out infinite;
+}
+
+@keyframes mundialPulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.35; transform: scale(0.82); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .liveDot { animation: none; }
+}
+
+// ── Equipo ─────────────────────────────────────────────────
+.team {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 9px;
+  padding: 3px 0;
+
+  & + & { margin-top: 2px; }
+}
+
+.code {
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--ink-2);
+  letter-spacing: 0.02em;
+}
+
+.sc {
+  font-family: var(--font-titulo, 'Frank Ruhl Libre', Georgia, serif);
+  font-weight: 800;
+  font-size: 18px;
+  color: var(--ink);
+  min-width: 14px;
+  text-align: right;
+}
+
+.win .code { color: var(--ink); font-weight: 700; }
+.lose .code { color: var(--faint); }
+.lose .sc { color: var(--faint); font-weight: 700; }
+
+.vs {
+  font-size: 11px;
+  color: var(--faint);
+  font-weight: 600;
+}
+
+// ── V2 · más aire + banderas grandes ───────────────────────
+.v2 {
+  .cell { padding: 16px 20px 18px; min-width: 200px; }
+  .team { padding: 5px 0; gap: 11px; }
+  .code { font-size: 14.5px; }
+  .sc { font-size: 20px; }
+}

package/src/components/Mundial2026/Mundial2026View.jsx

@@ -0,0 +1,139 @@
+'use client'
+
+import style from './Mundial2026.module.scss'
+import { Flag, teamName } from './flags.jsx'
+import { kickoffLabel } from './mundialFormat.js'
+import { useOptionalAdapters } from '../../adapters/AdaptersContext.jsx'
+
+/**
+ * Widget "Mundial 2026" — tira de resultados (variante V2 del diseño El Editor):
+ * verde petróleo, serif Frank Ruhl Libre, borde superior verde, banderas grandes
+ * y celdas respiradas. Vista pura: recibe `data` resuelta (la app pega al proxy
+ * `/api/portal/mundial`). Sin partidos, no renderiza.
+ *
+ * - Ordena EN VIVO primero (los que se están jugando), luego próximos y por
+ *   último finalizados → "lo que se juega ahora" aparece primero.
+ * - Todo el widget es un link a la sección `/mundial` (salvo `bare`, que ya va
+ *   dentro de esa página). `settings.href` permite cambiar el destino.
+ *
+ * Props:
+ *   - data, settings: { limit, sponsorLabel, href }
+ *   - bare: sin chrome de tarjeta ni link (para insertar dentro de /mundial)
+ */
+
+const STATUS_ORDER = { live: 0, scheduled: 1, finished: 2 }
+
+function sortMatches(matches) {
+  return [...matches].sort((a, b) => {
+    const d = (STATUS_ORDER[a.status] ?? 9) - (STATUS_ORDER[b.status] ?? 9)
+    if (d) return d
+    const ta = a.datetime ? new Date(a.datetime).getTime() : 0
+    const tb = b.datetime ? new Date(b.datetime).getTime() : 0
+    return a.status === 'finished' ? tb - ta : ta - tb // próximos: más cercano primero; finalizados: más reciente
+  })
+}
+
+export default function Mundial2026View({ data, settings = {}, bare = false }) {
+  const adapters = useOptionalAdapters()
+  const Link = adapters?.Link
+
+  const matches = Array.isArray(data?.matches) ? data.matches : []
+  if (!matches.length) return null
+
+  const sorted = sortMatches(matches)
+  const liveCount = sorted.filter((m) => m.status === 'live').length
+  // Default: mostrar al menos los partidos en vivo (mín. 2 celdas para acompañar).
+  const limit = Number.isFinite(settings.limit) ? settings.limit : Math.max(liveCount, 2)
+  const visibles = sorted.slice(0, Math.max(1, limit))
+
+  const phase = data?.phase || 'Fase de grupos'
+  const sponsorLabel = settings.sponsorLabel
+  const href = settings.href || '/mundial'
+
+  const inner = (
+    <section className={`${style.mwid} ${style.v2} ${bare ? style.bare : ''}`.trim()} aria-label="Mundial 2026">
+      <div className={style.head}>
+        <span className={style.bar} />
+        <h4 className={style.title}>{data?.tournament || 'Mundial 2026'}</h4>
+        <span className={style.ph}>{phase}</span>
+        {sponsorLabel && (
+          <span className={style.spon}>
+            <span className={style.sponLbl}>Ofrecido por</span>
+            <span className={style.sponSlot}>{sponsorLabel}</span>
+          </span>
+        )}
+        {!bare && <span className={style.go} aria-hidden="true">Ver Mundial ›</span>}
+      </div>
+
+      <div className={style.row}>
+        {visibles.map((m, i) => (
+          <Cell key={m.id ?? i} match={m} />
+        ))}
+      </div>
+    </section>
+  )
+
+  if (bare) return inner
+
+  return Link
+    ? <Link href={href} className={style.link} aria-label="Ir a la sección Mundial 2026">{inner}</Link>
+    : <a href={href} className={style.link} aria-label="Ir a la sección Mundial 2026">{inner}</a>
+}
+
+function Cell({ match }) {
+  const upcoming = match.status === 'scheduled'
+  return (
+    <div className={style.cell}>
+      <Status match={match} />
+      <Team side={match.home} other={match.away} upcoming={upcoming} />
+      <Team side={match.away} other={match.home} upcoming={upcoming} />
+    </div>
+  )
+}
+
+function Team({ side = {}, other = {}, upcoming }) {
+  const sc = side.score
+  const os = other.score
+  let outcome = ''
+  if (!upcoming && typeof sc === 'number' && typeof os === 'number') {
+    if (sc > os) outcome = style.win
+    else if (sc < os) outcome = style.lose
+  }
+  return (
+    <div className={`${style.team} ${outcome}`.trim()}>
+      <Flag code={side.code} flag={side.flag} size="md" />
+      <span className={style.code}>{side.code || teamName(side.code, side.name).slice(0, 3).toUpperCase()}</span>
+      {upcoming ? <span className={style.vs} /> : <span className={style.sc}>{sc}</span>}
+    </div>
+  )
+}
+
+function Status({ match }) {
+  const { status, minute, datetime } = match
+  if (status === 'live') {
+    return (
+      <div className={`${style.st} ${style.stLive}`}>
+        <span className={style.liveDot} />
+        <span className={style.stText}>En vivo</span>
+        {minute != null && <span className={style.min}>{formatMinute(minute)}</span>}
+      </div>
+    )
+  }
+  if (status === 'finished') {
+    return (
+      <div className={`${style.st} ${style.stFinal}`}>
+        <span className={style.stText}>Finalizado</span>
+      </div>
+    )
+  }
+  return (
+    <div className={`${style.st} ${style.stTime}`}>
+      <span className={style.stText}>{kickoffLabel(datetime)}</span>
+    </div>
+  )
+}
+
+function formatMinute(minute) {
+  if (typeof minute === 'number') return `${minute}'`
+  return String(minute)
+}