@crtobiasdelsud/portal-ui 1.0.0

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@crtobiasdelsud/portal-ui",
+  "version": "1.0.0",
+  "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",
+  "exports": {
+    ".": "./src/index.js",
+    "./adapters": "./src/adapters/AdaptersContext.jsx",
+    "./data": "./src/data/index.js",
+    "./components/*": "./src/components/*"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "release:patch": "npm version patch && npm publish --access public",
+    "release:minor": "npm version minor && npm publish --access public",
+    "release:major": "npm version major && npm publish --access public"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19",
+    "sass": "^1.98"
+  },
+  "devDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "portal",
+    "cms",
+    "widgets",
+    "react",
+    "next"
+  ],
+  "license": "MIT"
+}

package/src/adapters/AdaptersContext.jsx

@@ -0,0 +1,28 @@
+'use client'
+
+import { createContext, useContext } from 'react'
+
+const AdaptersContext = createContext(null)
+
+export function AdaptersProvider({ value, children }) {
+  return (
+    <AdaptersContext.Provider value={value}>
+      {children}
+    </AdaptersContext.Provider>
+  )
+}
+
+export function useAdapters() {
+  const adapters = useContext(AdaptersContext)
+  if (!adapters) {
+    throw new Error(
+      '[portal-ui] useAdapters() llamado fuera de <AdaptersProvider>. ' +
+      'Asegurate de envolver tu app con <AdaptersProvider value={{ Image, Link, fetcher }}>.'
+    )
+  }
+  return adapters
+}
+
+export function useOptionalAdapters() {
+  return useContext(AdaptersContext)
+}

package/src/components/ArticleHero/ArticleHero.jsx

@@ -0,0 +1,73 @@
+'use client'
+
+import styles from './ArticleHero.module.scss'
+import { useTheme } from '../../context/SiteConfigContext.jsx'
+import AspectImage from '../../components/UI/AspectImage/AspectImage.jsx'
+import V0 from './variants/V0/V0'
+import V1 from './variants/V1/V1'
+import V2 from './variants/V2/V2'
+import V3 from './variants/V3/V3'
+import V4 from './variants/V4/V4'
+import V5 from './variants/V5/V5'
+import V0Tablet from './variants/V0Tablet/V0Tablet'
+import V0Desktop from './variants/V0Desktop/V0Desktop'
+
+const VARIANTS = { '0': V0, '1': V1, '2': V2, '3': V3, '4': V4, '5': V5 }
+
+export default function ArticleHero({ titulo, volanta, copete, imagen, focalPoint, isAmp = false, extras = null, hideImageOnDesktop = false }) {
+  const theme   = useTheme()
+  const variant = String(theme.articleHero ?? 1)
+
+  const inlineStyle = isAmp ? {} : {
+    fontFamily:          theme.fontFamily,
+    '--primary-color':   theme.primary,
+    '--surface-color':   theme.surface,
+    '--secondary-color': theme.secondary,
+  }
+
+  const ExtrasEl = (!isAmp && extras) ? <div className={styles.extras}>{extras}</div> : null
+
+  const ImgEl = imagen
+    ? isAmp
+      ? <img src={imagen} alt={titulo ?? ''} className="article-hero__img" />
+      : <AspectImage src={imagen} alt={titulo ?? ''} aspect="16:9" fill={true} focalPoint={focalPoint} />
+    : null
+
+  const imgWrapClass = isAmp
+    ? 'article-hero__img-wrap'
+    : `${styles.imgWrap}${hideImageOnDesktop ? ` ${styles.imgHiddenDesktop}` : ''}`
+
+  const imgOnlyClass = (!isAmp && hideImageOnDesktop) ? styles.imgHiddenDesktop : undefined
+  const noImgMod     = (!isAmp && hideImageOnDesktop) ? ` ${styles.noImgDesktop}` : ''
+
+  const MobileVariant = VARIANTS[variant] ?? V1
+
+  const sharedProps = {
+    isAmp,
+    inlineStyle,
+    titulo,
+    volanta,
+    copete,
+    ImgEl,
+    ExtrasEl,
+    imgWrapClass,
+    imgOnlyClass,
+    noImgMod,
+  }
+
+  if (isAmp) return <MobileVariant {...sharedProps} />
+
+  return (
+    <>
+      <div className={styles.mobileOnly}>
+        <MobileVariant {...sharedProps} />
+      </div>
+      <div className={styles.tabletOnly}>
+        <V0Tablet {...sharedProps} />
+      </div>
+      <div className={styles.desktopUp}>
+        <V0Desktop {...sharedProps} />
+      </div>
+    </>
+  )
+}

package/src/components/ArticleHero/ArticleHero.module.scss

@@ -0,0 +1,89 @@
+@use "../../styles/index" as *;
+
+// ── Base ─────────────────────────────────────────────────────────────────────
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 631px;
+  overflow: hidden;
+  font-family: var(--font-family, inherit);
+  max-width: 1520px;
+  margin-bottom: 30px;
+  max-height: 80vh;
+}
+
+.volanta {
+  align-self: flex-start;
+  background: transparent;
+  padding: 0;
+  font-family: "Inter", "Helvetica", Arial, sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  line-height: 1.7625rem;
+  color: var(--primary-color, #af0437);
+
+}
+
+.titulo {
+  margin: 0;
+  font-family: var(--font-titulo, inherit);
+  font-weight: 500;
+  font-size: clamp(32px, 5vw, 60px);
+  line-height: 120%;
+  letter-spacing: 0.005em;
+}
+
+.copete {
+  margin: 0;
+  font-family: var(--font-inter, inherit);
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 100%;
+  letter-spacing: -0.02em;
+}
+
+.imgWrap {
+  position: relative;
+  flex: 1;
+}
+
+// ── Responsive: show/hide por breakpoint ──────────────────────────────────────
+.mobileOnly {
+  display: contents;
+
+  @include respond(tablet) { display: none; }
+}
+
+.tabletOnly {
+  display: none;
+
+  @include respond(tablet)  { display: contents; }
+  @include respond(desktop) { display: none; }
+}
+
+.desktopUp {
+  display: none;
+
+  @include respond(desktop) { display: contents; }
+}
+
+// ── Extras (author + share) — solo desktop ────────────────────────────────────
+.extras {
+  display: none;
+ 
+  @include respond(desktop) { display: block; }
+}
+
+// ── Imagen oculta en tablet+ (se mueve al body del artículo) ─────────────────
+.imgHiddenDesktop {
+  @include respond(tablet) { display: none; }
+}
+
+// ── Sin imagen en tablet+: colapsa la altura fija del container ───────────────
+.noImgDesktop {
+  @include respond(tablet) {
+    height: auto;
+    max-height: none;
+  }
+}

package/src/components/ArticleHero/variants/V0/V0.jsx

@@ -0,0 +1,29 @@
+import shared from '../../ArticleHero.module.scss'
+import s from './V0.module.scss'
+
+export default function V0({ isAmp, inlineStyle, titulo, volanta, copete, ImgEl, ExtrasEl, imgWrapClass, noImgMod }) {
+  const VolantaEl = volanta
+    ? <span className={isAmp ? 'article-hero__volanta' : `${shared.volanta} ${s.volanta}`}>{volanta}</span>
+    : null
+  const TituloEl = <h1 className={isAmp ? 'article-hero__titulo' : `${shared.titulo} ${s.titulo}`}>{titulo}</h1>
+  const CopeteEl = copete
+    ? <p className={isAmp ? 'article-hero__copete' : `${shared.copete} ${s.copete}`}>{copete}</p>
+    : null
+
+  return (
+    <article
+      className={isAmp ? 'article-hero article-hero--0' : `${shared.container} ${s.root}${noImgMod}`}
+      style={inlineStyle}
+    >
+      <div className={isAmp ? 'article-hero__text' : s.text}>
+        {VolantaEl}
+        {TituloEl}
+        {CopeteEl}
+      </div>
+      <div className={`${imgWrapClass} ${s.imgWrap}`}>
+        {ImgEl}
+      </div>
+      {ExtrasEl}
+    </article>
+  )
+}

package/src/components/ArticleHero/variants/V0/V0.module.scss

@@ -0,0 +1,51 @@
+@use "../../../../styles/index" as *;
+
+.root {
+  background: var(--surface-color, #f0f0f0);
+  height: auto;
+  max-height: none;
+}
+
+.imgWrap {
+  aspect-ratio: 16 / 9;
+  flex: none;
+}
+
+.text {
+  padding-top: 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+
+.volanta {
+  align-self: flex-start;
+  background: transparent;
+  color: var(--primary-color, #b1043f);
+  padding: 0;
+  font-family: "Inter", "Helvetica", Arial, sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  line-height: 1.7625rem;
+
+  @include respond(tablet) {
+    font-size: 24px;
+    font-weight: 700;
+  }
+}
+
+.titulo {
+  color: var(--text-color, #252523);
+  font-size: clamp(32px, 5vw, 60px);
+}
+
+.copete {
+  font-size: 18px;
+    margin-bottom: 15px;
+    font-weight: 400;
+    line-height: 24px;
+    color: var(--text-color, #252523);
+
+  @include respond(tablet) { font-size: 1rem; }
+}

package/src/components/ArticleHero/variants/V0Desktop/V0Desktop.jsx

@@ -0,0 +1,29 @@
+import shared from '../../ArticleHero.module.scss'
+import s from './V0Desktop.module.scss'
+
+export default function V0Desktop({ isAmp, inlineStyle, titulo, volanta, copete, ImgEl, ExtrasEl, imgWrapClass, noImgMod }) {
+  const VolantaEl = volanta
+    ? <span className={isAmp ? 'article-hero__volanta' : `${shared.volanta} ${s.volanta}`}>{volanta}</span>
+    : null
+  const TituloEl = <h1 className={isAmp ? 'article-hero__titulo' : `${shared.titulo} ${s.titulo}`}>{titulo}</h1>
+  const CopeteEl = copete
+    ? <p className={isAmp ? 'article-hero__copete' : `${shared.copete} ${s.copete}`}>{copete}</p>
+    : null
+
+  return (
+    <article
+      className={isAmp ? 'article-hero article-hero--0' : `${shared.container} ${s.root}${noImgMod}`}
+      style={inlineStyle}
+    >
+      <div className={isAmp ? 'article-hero__text' : s.text}>
+        {VolantaEl}
+        {TituloEl}
+        {CopeteEl}
+      </div>
+      <div className={`${imgWrapClass} ${s.imgWrap}`}>
+        {ImgEl}
+      </div>
+      <div className={s.extrasRow}>{ExtrasEl}</div>
+    </article>
+  )
+}

package/src/components/ArticleHero/variants/V0Desktop/V0Desktop.module.scss

@@ -0,0 +1,54 @@
+@use "../../../../styles/index" as *;
+
+.root {
+  background: var(--surface-color, #f0f0f0);
+  height: auto;
+  max-height: none;
+}
+
+.imgWrap {
+  aspect-ratio: 16 / 9;
+  flex: none;
+}
+
+.text {
+  padding-top: 35px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.volanta {
+  align-self: flex-start;
+  background: transparent;
+  color: var(--primary-color, #b1043f);
+  padding: 0;
+  font-family: "Inter", "Helvetica", Arial, sans-serif;
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.7625rem;
+
+  @include respond(desktop) {
+    font-size: 24px;
+  }
+}
+
+.titulo {
+  color: var(--text-color, #252523);
+  font-size: 3.75rem;
+    font-weight: 700;
+    line-height: 4.5rem;
+}
+
+.copete {
+  font-size: 20px;
+  margin-bottom: 15px;
+    font-weight: 400;
+    line-height: 24px;
+    color: #252523;
+}
+
+.extrasRow {
+  border-bottom: 1px solid #e2e2e2;
+  overflow: hidden;
+}

package/src/components/ArticleHero/variants/V0Tablet/V0Tablet.jsx

@@ -0,0 +1,29 @@
+import shared from '../../ArticleHero.module.scss'
+import s from './V0Tablet.module.scss'
+
+export default function V0Tablet({ isAmp, inlineStyle, titulo, volanta, copete, ImgEl, ExtrasEl, imgWrapClass, noImgMod }) {
+  const VolantaEl = volanta
+    ? <span className={isAmp ? 'article-hero__volanta' : `${shared.volanta} ${s.volanta}`}>{volanta}</span>
+    : null
+  const TituloEl = <h1 className={isAmp ? 'article-hero__titulo' : `${shared.titulo} ${s.titulo}`}>{titulo}</h1>
+  const CopeteEl = copete
+    ? <p className={isAmp ? 'article-hero__copete' : `${shared.copete} ${s.copete}`}>{copete}</p>
+    : null
+
+  return (
+    <article
+      className={isAmp ? 'article-hero article-hero--0' : `${shared.container} ${s.root}${noImgMod}`}
+      style={inlineStyle}
+    >
+      <div className={isAmp ? 'article-hero__text' : s.text}>
+        {VolantaEl}
+        {TituloEl}
+        {CopeteEl}
+      </div>
+      <div className={`${imgWrapClass} ${s.imgWrap}`}>
+        {ImgEl}
+      </div>
+      {ExtrasEl}
+    </article>
+  )
+}

package/src/components/ArticleHero/variants/V0Tablet/V0Tablet.module.scss

@@ -0,0 +1,49 @@
+@use "../../../../styles/index" as *;
+
+.root {
+  background: var(--surface-color, #f0f0f0);
+  height: auto;
+  max-height: none;
+}
+
+.imgWrap {
+  aspect-ratio: 16 / 9;
+  flex: none;
+}
+
+.text {
+  padding-top: 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+
+.volanta {
+  align-self: flex-start;
+  background: transparent;
+  color: var(--primary-color, #b1043f);
+  padding: 0;
+  font-family: "Inter", "Helvetica", Arial, sans-serif;
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.7625rem;
+
+  @include respond(tablet) {
+    font-size: 24px;
+  }
+}
+.titulo {
+  color: var(--text-color, #252523);
+  font-size: clamp(32px, 5vw, 60px);
+}
+
+.copete {
+  font-size: 18px;
+    margin-bottom: 15px;
+    font-weight: 400;
+    line-height: 24px;
+    color: #252523;
+
+  @include respond(tablet) { font-size: 1rem; }
+}

package/src/components/ArticleHero/variants/V1/V1.jsx

@@ -0,0 +1,29 @@
+import shared from '../../ArticleHero.module.scss'
+import s from './V1.module.scss'
+
+export default function V1({ isAmp, inlineStyle, titulo, volanta, copete, ImgEl, ExtrasEl, imgWrapClass, noImgMod }) {
+  const VolantaEl = volanta
+    ? <span className={isAmp ? 'article-hero__volanta' : `${shared.volanta} ${s.volanta}`}>{volanta}</span>
+    : null
+  const TituloEl = <h1 className={isAmp ? 'article-hero__titulo' : `${shared.titulo} ${s.titulo}`}>{titulo}</h1>
+  const CopeteEl = copete
+    ? <p className={isAmp ? 'article-hero__copete' : `${shared.copete} ${s.copete}`}>{copete}</p>
+    : null
+
+  return (
+    <article
+      className={isAmp ? 'article-hero article-hero--2' : `${shared.container} ${s.root}${noImgMod}`}
+      style={inlineStyle}
+    >
+      <div className={isAmp ? 'article-hero__text' : s.text}>
+        {VolantaEl}
+        {TituloEl}
+        {CopeteEl}
+      </div>
+      <div className={`${imgWrapClass} ${s.imgWrap}`}>
+        {ImgEl}
+      </div>
+      {ExtrasEl}
+    </article>
+  )
+}

package/src/components/ArticleHero/variants/V1/V1.module.scss

@@ -0,0 +1,40 @@
+@use "../../../../styles/index" as *;
+
+.root {
+  background: var(--surface-color, #f0f0f0);
+  height: auto;
+  max-height: none;
+}
+
+.imgWrap {
+  aspect-ratio: 16 / 9;
+  flex: none;
+}
+
+.text {
+  padding-top: 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+.volanta {
+  align-self: flex-start;
+  background: transparent;
+  color: var(--primary-color, #b1043f);
+  padding: 0;
+  font-family: "Inter", "Helvetica", Arial, sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  line-height: 1.7625rem;
+  color: #B1043F;
+
+  @include respond(tablet) {
+    font-size: 24px;
+    font-weight: 700;
+  }
+}
+
+.titulo {
+  color: #1a1a1a;
+  font-size: clamp(32px, 5vw, 60px);
+}

package/src/components/ArticleHero/variants/V2/V2.jsx

@@ -0,0 +1,29 @@
+import shared from '../../ArticleHero.module.scss'
+import s from './V2.module.scss'
+
+export default function V2({ isAmp, inlineStyle, titulo, volanta, copete, ImgEl, ExtrasEl, imgWrapClass, noImgMod }) {
+  const VolantaEl = volanta
+    ? <span className={isAmp ? 'article-hero__volanta' : `${shared.volanta} ${s.volanta}`}>{volanta}</span>
+    : null
+  const TituloEl = <h1 className={isAmp ? 'article-hero__titulo' : `${shared.titulo} ${s.titulo}`}>{titulo}</h1>
+  const CopeteEl = copete
+    ? <p className={isAmp ? 'article-hero__copete' : `${shared.copete} ${s.copete}`}>{copete}</p>
+    : null
+
+  return (
+    <article
+      className={isAmp ? 'article-hero article-hero--1' : `${shared.container}${noImgMod}`}
+      style={inlineStyle}
+    >
+      <div className={`${imgWrapClass} ${s.imgWrap}`}>
+        {VolantaEl}
+        {ImgEl}
+      </div>
+      <div className={isAmp ? 'article-hero__panel' : s.panel}>
+        {TituloEl}
+        {CopeteEl}
+      </div>
+      {ExtrasEl}
+    </article>
+  )
+}

package/src/components/ArticleHero/variants/V2/V2.module.scss

@@ -0,0 +1,44 @@
+@use "../../../../styles/index" as *;
+
+.imgWrap {
+  height: 260px;
+  flex-shrink: 0;
+
+  @include respond(tablet) { height: 340px; }
+}
+
+.panel {
+  background: var(--secondary-color);
+  padding: 24px 20px 28px;
+  flex: none;
+}
+
+.volanta {
+  align-self: flex-start;
+  background: transparent;
+  color: var(--primary-color, #b1043f);
+  padding: 0;
+  font-family: "Inter", "Helvetica", Arial, sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  line-height: 1.7625rem;
+  color: #B1043F;
+
+  @include respond(tablet) {
+    font-size: 24px;
+    font-weight: 700;
+  }
+}
+.titulo {
+  color: #ffffff;
+  font-size: clamp(32px, 5vw, 60px);
+
+  @include respond(tablet) { font-size: 1.75rem; }
+}
+
+.copete {
+  color: rgba(255, 255, 255, 0.78);
+  font-size: 0.875rem;
+
+  @include respond(tablet) { font-size: 1rem; }
+}

package/src/components/ArticleHero/variants/V3/V3.jsx

@@ -0,0 +1,25 @@
+import shared from '../../ArticleHero.module.scss'
+import s from './V3.module.scss'
+
+export default function V3({ isAmp, inlineStyle, titulo, volanta, ImgEl, ExtrasEl, imgOnlyClass, noImgMod }) {
+  const VolantaEl = volanta
+    ? <span className={isAmp ? 'article-hero__volanta' : `${shared.volanta} ${s.volanta}`}>{volanta}</span>
+    : null
+  const TituloEl = <h1 className={isAmp ? 'article-hero__titulo' : `${shared.titulo} ${s.titulo}`}>{titulo}</h1>
+
+  return (
+    <article
+      className={isAmp ? 'article-hero article-hero--3' : `${shared.container}${noImgMod}`}
+      style={inlineStyle}
+    >
+      <div className={isAmp ? 'article-hero__img-wrap' : shared.imgWrap}>
+        {imgOnlyClass ? <div className={imgOnlyClass}>{ImgEl}</div> : ImgEl}
+        <div className={isAmp ? 'article-hero__overlay' : s.overlay}>
+          {VolantaEl}
+          {TituloEl}
+        </div>
+      </div>
+      {ExtrasEl}
+    </article>
+  )
+}

package/src/components/ArticleHero/variants/V3/V3.module.scss

@@ -0,0 +1,41 @@
+@use "../../../../styles/index" as *;
+.volanta {
+  align-self: flex-start;
+  background: transparent;
+  color: var(--primary-color, #b1043f);
+  padding: 0;
+  font-family: "Inter", "Helvetica", Arial, sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  line-height: 1.7625rem;
+  color: #B1043F;
+
+
+
+  @include respond(tablet)  { font-size: 24px; }
+  @include respond(desktop) { font-size: 24px; }
+}
+
+.overlay {
+  background: linear-gradient(
+    to bottom,
+    transparent 0%,
+    var(--secondary-color) 70%,
+    var(--secondary-color) 100%
+  );
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 72%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 20px 18px 24px;
+  gap: 8px;
+}
+
+.titulo {
+  color: #ffffff;
+  font-weight: 500;
+  font-size: clamp(32px, 5vw, 60px);
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
+}