@reblu/site-blocks 0.33.0 → 0.34.0

package/dist/client.cjs

@@ -43,10 +43,16 @@ __export(client_exports, {
   DEFAULT_COURSE_SYLLABUS_LABELS: () => DEFAULT_COURSE_SYLLABUS_LABELS,
   DEFAULT_DATA_REQUEST_FORM_LABELS: () => DEFAULT_DATA_REQUEST_FORM_LABELS,
   DEFAULT_PRODUCT_CAROUSEL_LABELS: () => DEFAULT_PRODUCT_CAROUSEL_LABELS,
+  DEFAULT_REVIEWS_CAROUSEL_LABELS: () => DEFAULT_REVIEWS_CAROUSEL_LABELS,
+  DEFAULT_TEAM_DIRECTORY_LABELS: () => DEFAULT_TEAM_DIRECTORY_LABELS,
   DEFAULT_WITHDRAWAL_REQUEST_FORM_LABELS: () => DEFAULT_WITHDRAWAL_REQUEST_FORM_LABELS,
   DataRequestForm: () => DataRequestForm,
+  FeaturedReviews: () => FeaturedReviews,
   ProductCarousel: () => ProductCarousel,
+  ReviewsBlockRenderer: () => ReviewsBlockRenderer,
+  ReviewsCarousel: () => ReviewsCarousel,
   ShareButtons: () => ShareButtons,
+  TeamDirectory: () => TeamDirectory,
   WITHDRAWAL_REQUEST_FIELD_LIMITS: () => WITHDRAWAL_REQUEST_FIELD_LIMITS,
   WithdrawalRequestForm: () => WithdrawalRequestForm,
   useCollection: () => useCollection
@@ -2227,6 +2233,453 @@ function CourseGuestCheckoutForm({
     }
   );
 }
+
+// src/components/reviews-carousel.tsx
+var import_utils16 = require("@reblu/site-ui/utils");
+
+// src/components/_review-card.tsx
+var import_utils15 = require("@reblu/site-ui/utils");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function isHttps(value) {
+  if (typeof value !== "string") return false;
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:" && url.hostname !== "";
+  } catch {
+    return false;
+  }
+}
+function isUsableReview(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const review = value;
+  return typeof review.id === "string" && typeof review.authorName === "string" && review.authorName.trim() !== "" && typeof review.rating === "number" && Number.isInteger(review.rating) && review.rating >= 1 && review.rating <= 5 && typeof review.sourceName === "string" && isHttps(review.sourceUrl);
+}
+function formatDay(day, locale) {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(day)) return null;
+  const date = /* @__PURE__ */ new Date(`${day}T00:00:00.000Z`);
+  if (Number.isNaN(date.getTime())) return null;
+  return new Intl.DateTimeFormat(locale, { dateStyle: "long", timeZone: "UTC" }).format(date);
+}
+var STAR_PATH = "M12 2.5l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.3l-5.8 3.1 1.1-6.5L2.6 9.3l6.5-.9z";
+function Stars({ rating }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { role: "img", "aria-label": `${rating} de 5 estrellas`, className: "flex gap-0.5", children: [1, 2, 3, 4, 5].map((n) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      width: "16",
+      height: "16",
+      "data-filled": n <= rating ? "true" : "false",
+      className: n <= rating ? "fill-current" : "fill-none opacity-40",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: STAR_PATH })
+    },
+    n
+  )) });
+}
+function usableReviews(reviews) {
+  return Array.isArray(reviews) ? reviews.filter(isUsableReview) : [];
+}
+function ReviewCard({
+  review,
+  linkLabel,
+  newWindowLabel,
+  locale,
+  className
+}) {
+  const date = formatDay(review.reviewDate, locale);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "article",
+    {
+      "data-slot": "review",
+      "data-source": review.source,
+      className: (0, import_utils15.cn)("flex h-full flex-col gap-3 rounded-lg border p-5", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Stars, { rating: review.rating }),
+        review.text && review.text.trim() !== "" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("blockquote", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { children: review.text }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("footer", { className: "mt-auto space-y-1 text-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "font-semibold", children: review.authorName }),
+          date ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("time", { dateTime: review.reviewDate, className: "block text-muted-foreground", children: date }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            "a",
+            {
+              href: review.sourceUrl,
+              target: "_blank",
+              rel: "noopener nofollow",
+              className: "inline-flex underline underline-offset-4",
+              children: [
+                linkLabel(review.sourceName),
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sr-only", children: newWindowLabel })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/reviews-carousel.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var DEFAULT_REVIEWS_CAROUSEL_LABELS = {
+  region: "Rese\xF1as",
+  roleDescription: "carrusel",
+  previous: "Rese\xF1a anterior",
+  next: "Rese\xF1a siguiente"
+};
+function ReviewsCarousel({
+  reviews,
+  heading,
+  headingLevel = 2,
+  notice,
+  linkLabel = (name) => `Ver en ${name}`,
+  newWindowLabel = "(se abre en una pesta\xF1a nueva)",
+  locale = "es-ES",
+  labels,
+  className,
+  headingClassName,
+  itemClassName,
+  cardClassName,
+  noticeClassName
+}) {
+  const usable = usableReviews(reviews);
+  if (usable.length === 0) return null;
+  const hasNotice = notice !== void 0 && notice !== null && notice !== "";
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { "data-slot": "reviews-carousel", className: (0, import_utils16.cn)("space-y-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      ProductCarousel,
+      {
+        products: usable,
+        heading,
+        headingLevel,
+        headingClassName,
+        labels: { ...DEFAULT_REVIEWS_CAROUSEL_LABELS, ...labels },
+        itemClassName,
+        renderProduct: (review) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          ReviewCard,
+          {
+            review,
+            linkLabel,
+            newWindowLabel,
+            locale,
+            className: cardClassName
+          }
+        )
+      }
+    ),
+    hasNotice ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "p",
+      {
+        "data-slot": "reviews-notice",
+        className: slotClassName("", "text-sm text-muted-foreground", noticeClassName),
+        children: notice
+      }
+    ) : null
+  ] });
+}
+
+// src/components/reviews.tsx
+var import_utils17 = require("@reblu/site-ui/utils");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function Reviews({
+  reviews,
+  heading,
+  headingId = "reviews-heading",
+  headingLevel = 2,
+  notice,
+  noticePosition = "below",
+  linkLabel = (name) => `Ver en ${name}`,
+  newWindowLabel = "(se abre en una pesta\xF1a nueva)",
+  locale = "es-ES",
+  className,
+  headingClassName,
+  gridClassName,
+  cardClassName,
+  noticeClassName
+}) {
+  const usable = usableReviews(reviews);
+  if (usable.length === 0) return null;
+  const hasNotice = notice !== void 0 && notice !== null && notice !== "";
+  const noticeNode = hasNotice ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "p",
+    {
+      "data-slot": "reviews-notice",
+      className: slotClassName("", "text-sm text-muted-foreground", noticeClassName),
+      children: notice
+    }
+  ) : null;
+  const grid = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "ul",
+    {
+      "data-slot": "reviews-grid",
+      className: slotClassName("grid gap-6", "sm:grid-cols-2 lg:grid-cols-3", gridClassName),
+      children: usable.map((review) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          ReviewCard,
+          {
+            review,
+            linkLabel,
+            newWindowLabel,
+            locale,
+            className: cardClassName
+          }
+        ) }, review.id);
+      })
+    }
+  );
+  const body = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    noticePosition === "above" ? noticeNode : null,
+    grid,
+    noticePosition === "below" ? noticeNode : null
+  ] });
+  const hasHeading = heading !== void 0 && heading !== null && heading !== "";
+  if (!hasHeading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { "data-slot": "reviews", className: (0, import_utils17.cn)("space-y-4", className), children: body });
+  }
+  const Tag = `h${headingLevel}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("section", { "data-slot": "reviews", "aria-labelledby": headingId, className: (0, import_utils17.cn)("space-y-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Tag, { id: headingId, className: slotClassName("", "text-xl font-semibold", headingClassName), children: heading }),
+    body
+  ] });
+}
+
+// src/components/featured-reviews.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function FeaturedReviews({
+  reviews,
+  layout,
+  heading,
+  headingLevel,
+  notice,
+  linkLabel,
+  locale,
+  carouselLabels,
+  className,
+  cardClassName,
+  gridClassName,
+  itemClassName
+}) {
+  if (layout === "carousel") {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      ReviewsCarousel,
+      {
+        reviews,
+        heading,
+        headingLevel,
+        notice,
+        linkLabel,
+        locale,
+        labels: carouselLabels,
+        className,
+        cardClassName,
+        itemClassName
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    Reviews,
+    {
+      reviews,
+      heading,
+      headingLevel,
+      notice,
+      linkLabel,
+      locale,
+      className,
+      cardClassName,
+      gridClassName
+    }
+  );
+}
+
+// src/components/reviews-block-renderer.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function ReviewsBlockRenderer({ block }) {
+  const { layout, notice } = block.data;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    FeaturedReviews,
+    {
+      reviews: block.reviews,
+      layout: layout ?? "grid",
+      notice: notice && notice.trim() !== "" ? notice : void 0,
+      carouselLabels: { region: "Carrusel de rese\xF1as" }
+    }
+  );
+}
+
+// src/components/team-directory.tsx
+var import_react9 = require("react");
+var import_utils20 = require("@reblu/site-ui/utils");
+
+// src/lib/page-links.ts
+function linkKey(link) {
+  return `${link.category?.slug ?? ""}/${link.slug}`;
+}
+function linkFilterOptions(items) {
+  const seen = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    for (const link of item.links ?? []) {
+      const key = linkKey(link);
+      if (!seen.has(key)) seen.set(key, { key, label: link.title });
+    }
+  }
+  return [...seen.values()];
+}
+function filterByLink(items, key) {
+  if (key === null) return items;
+  return items.filter((item) => (item.links ?? []).some((link) => linkKey(link) === key));
+}
+
+// src/components/profile-card.tsx
+var import_utils19 = require("@reblu/site-ui/utils");
+
+// src/components/professional-fields.tsx
+var import_utils18 = require("@reblu/site-ui/utils");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function ProfessionalFields({
+  fields,
+  variant = "profile",
+  className
+}) {
+  const shown = (fields ?? []).filter((f) => variant !== "card" || f.showOnCard);
+  if (shown.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "dl",
+    {
+      className: (0, import_utils18.cn)(
+        "grid gap-x-3 gap-y-1 text-sm",
+        variant === "card" ? "justify-center" : "grid-cols-[auto_1fr]",
+        className
+      ),
+      "data-slot": "professional-fields",
+      "data-variant": variant,
+      children: shown.map((field, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        "div",
+        {
+          className: variant === "card" ? "flex justify-center gap-1" : "contents",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("dt", { className: "text-muted-foreground", children: field.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("dd", { className: "m-0 font-medium", children: field.value })
+          ]
+        },
+        `${field.label}-${index}`
+      ))
+    }
+  );
+}
+
+// src/components/profile-card.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function initials(name) {
+  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase() ?? "").join("");
+}
+function ProfileCard({
+  name,
+  role,
+  imageUrl,
+  specialties = [],
+  bio,
+  fields,
+  href,
+  className
+}) {
+  const NameTag = href ? "a" : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "article",
+    {
+      className: (0, import_utils19.cn)(
+        "flex flex-col items-center gap-3 rounded-lg border bg-card p-6 text-center",
+        className
+      ),
+      "data-slot": "profile-card",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "relative h-24 w-24 overflow-hidden rounded-full bg-muted", children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { src: imageUrl, alt: name, loading: "lazy", className: "h-full w-full object-cover" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "span",
+          {
+            className: "flex h-full w-full items-center justify-center text-2xl font-semibold text-muted-foreground",
+            "aria-hidden": "true",
+            children: initials(name)
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "text-lg font-semibold leading-tight", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(NameTag, { ...href ? { href, className: "transition-colors hover:text-primary" } : {}, children: name }) }),
+          role && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-sm text-muted-foreground", children: role })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ProfessionalFields, { fields, variant: "card" }),
+        specialties.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("ul", { className: "flex flex-wrap justify-center gap-1.5 p-0", children: specialties.map((s) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "li",
+          {
+            className: "inline-flex items-center rounded-full bg-secondary px-2.5 py-0.5 text-xs font-medium text-secondary-foreground",
+            children: s
+          },
+          s
+        )) }),
+        bio && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-sm text-muted-foreground", children: bio })
+      ]
+    }
+  );
+}
+
+// src/components/team-directory.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var DEFAULT_TEAM_DIRECTORY_LABELS = {
+  all: "Todos",
+  filter: "Filtrar el equipo"
+};
+var CHIP_CLASS = "inline-flex cursor-pointer items-center rounded-full border px-3 py-1 text-sm font-medium transition-colors aria-pressed:bg-primary aria-pressed:text-primary-foreground aria-pressed:border-primary hover:bg-muted";
+function TeamDirectory({
+  members,
+  memberHref,
+  memberHrefBase,
+  showLinksOnCards = false,
+  labels,
+  className
+}) {
+  const t = { ...DEFAULT_TEAM_DIRECTORY_LABELS, ...labels };
+  const [selected, setSelected] = (0, import_react9.useState)(null);
+  if (members.length === 0) return null;
+  const options = linkFilterOptions(members);
+  const visible = filterByLink(members, selected);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: (0, import_utils20.cn)("space-y-6", className), "data-slot": "team-directory", children: [
+    options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { role: "group", "aria-label": t.filter, className: "flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "button",
+        {
+          type: "button",
+          className: CHIP_CLASS,
+          "aria-pressed": selected === null,
+          onClick: () => setSelected(null),
+          children: t.all
+        }
+      ),
+      options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "button",
+        {
+          type: "button",
+          className: CHIP_CLASS,
+          "aria-pressed": selected === option.key,
+          onClick: () => setSelected(option.key),
+          children: option.label
+        },
+        option.key
+      ))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("ul", { className: "grid list-none grid-cols-1 gap-6 p-0 sm:grid-cols-2 lg:grid-cols-3", children: visible.map((member) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      ProfileCard,
+      {
+        name: member.title,
+        role: member.professional?.role ?? void 0,
+        imageUrl: member.coverImageUrl ?? void 0,
+        specialties: showLinksOnCards ? (member.links ?? []).map((l) => l.title) : [],
+        href: memberHref ? memberHref(member) : memberHrefBase !== void 0 ? `${memberHrefBase}/${member.slug}` : void 0,
+        className: "h-full"
+      }
+    ) }, linkKey(member))) })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddToCartButton,
@@ -2241,10 +2694,16 @@ function CourseGuestCheckoutForm({
   DEFAULT_COURSE_SYLLABUS_LABELS,
   DEFAULT_DATA_REQUEST_FORM_LABELS,
   DEFAULT_PRODUCT_CAROUSEL_LABELS,
+  DEFAULT_REVIEWS_CAROUSEL_LABELS,
+  DEFAULT_TEAM_DIRECTORY_LABELS,
   DEFAULT_WITHDRAWAL_REQUEST_FORM_LABELS,
   DataRequestForm,
+  FeaturedReviews,
   ProductCarousel,
+  ReviewsBlockRenderer,
+  ReviewsCarousel,
   ShareButtons,
+  TeamDirectory,
   WITHDRAWAL_REQUEST_FIELD_LIMITS,
   WithdrawalRequestForm,
   useCollection