@reblu/site-blocks 0.4.4 → 0.5.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { PageDetail, PageListItem, ShopProductListItem } from '@reblu/site-contracts';
+import { PageDetail, PageListItem, ShopProductListItem, ShopFacets } from '@reblu/site-contracts';
 
 declare function readingTime(content: string | null | undefined): number | null;
 
@@ -277,4 +277,110 @@ interface ProductCardProps {
 }
 declare function ProductCard({ product, href, currencyCode, locale, className }: ProductCardProps): react_jsx_runtime.JSX.Element;
 
-export { ALLOWED_YOUTUBE_HOSTS, MarkdownRenderer, type MarkdownRendererProps, ProductCard, type ProductCardProps, ProfileCard, type ProfileCardProps, SafeHtml, type SafeHtmlProps, type ShareUrls, Specialty, type SpecialtyProps, Treatment, type TreatmentProps, buildShareUrls, formatPrice, isAllowedYouTubeHost, markdownToSafeHtml, readingTime, sanitizeHtml };
+/**
+ * `ShopFilters` — plug-and-play SITE filter chrome over `GET /api/site/shop/facets`
+ * (REB-809). Which axes appear, their order and labels come entirely from
+ * `facets` — nexus config, not this component — so no SITE hand-builds shop
+ * filter UI again (the gap this issue closes: dermamedicin's SITE hardcoded
+ * `BRAND_AXIS = 'brand'` while the tenant's real axis key is `marca`).
+ *
+ * RSC-safe by construction (REB-647 lesson): every option always renders a real
+ * `<a href>` built by the `hrefs` prop, so importing and rendering this from an
+ * actual Server Component — no `onChange`, navigation only — never crashes and
+ * never attaches an event handler. `onChange` is strictly additive: when
+ * provided, a click is intercepted (`preventDefault` + call `onChange`) instead
+ * of navigating. Attaching a function prop to a host element only works when
+ * the call site itself is (or is inside) a Client Component — pass `onChange`
+ * only from a `'use client'` boundary; from a Server Component, omit it and let
+ * `hrefs` alone drive navigation (a real page load / your router's own Link).
+ *
+ * ── Single-select everywhere, on purpose ──────────────────────────────────
+ * `facets.taxonomies[].selectionMode` (REB-809/REB-801) reflects how many terms
+ * a PRODUCT may carry on that axis — it is NOT how many the storefront filter
+ * may select at once. `GET /api/site/shop/products`'s `taxonomy[<key>]` query
+ * param accepts exactly one term slug per axis today (`parseListParams` in
+ * base-api collapses any repeat), so every taxonomy axis renders single-select
+ * filter UI here regardless of `selectionMode` — clicking the active term's own
+ * link clears the axis, clicking another replaces it. Wiring `selectionMode`
+ * into a true multi-value taxonomy filter needs the query contract to grow an
+ * array form first; that is out of this component's scope.
+ *
+ * Attribute facets (`facets.attributes`) are genuinely multi-select already —
+ * `attr[<key>]` repeats to OR-match several values — so those render as a
+ * checkbox-shaped list where more than one option may be active at once.
+ *
+ * Tokens only: no brand aesthetic, every color/spacing class is a design
+ * token so the same component renders correctly for every tenant theme.
+ */
+/** One price band. `min`/`max` are integer cents; either may be omitted for an open end. */
+interface ShopFilterPriceBand {
+    min?: number;
+    max?: number;
+    /** Overrides the auto-generated `formatPrice`-based label. */
+    label?: string;
+}
+/** Sensible EUR defaults — override via the `priceBands` prop for another currency/locale. */
+declare const DEFAULT_SHOP_PRICE_BANDS: ShopFilterPriceBand[];
+/** The filter selection currently reflected in the URL (or component state). */
+interface ShopFiltersActive {
+    /** axis key → active term slug. */
+    taxonomy?: Record<string, string>;
+    /** field key → active value(s). */
+    attr?: Record<string, string | string[]>;
+    priceMin?: number;
+    priceMax?: number;
+    onSale?: boolean;
+}
+/**
+ * Href generators — the RSC-safe navigation seam. A consumer typically supplies
+ * these from `@reblu/site-next`'s shop URL helpers (`parseShopSearchParams` /
+ * `serializeShopParams`), which preserve every other current param and reset
+ * pagination on change.
+ */
+interface ShopFiltersHrefs {
+    /** `value` undefined clears the axis (renders the "all" option's href). */
+    taxonomy: (axisKey: string, value: string | undefined) => string;
+    /** Href toggling `value` in/out of `fieldKey`'s active value set. */
+    attr: (fieldKey: string, value: string) => string;
+    price: (min: number | undefined, max: number | undefined) => string;
+    onSale: (nextActive: boolean) => string;
+    clearAll: () => string;
+}
+interface ShopFiltersLabels {
+    /** The "show every term of this axis" option. */
+    allTerms: string;
+    clearAll: string;
+    onSale: string;
+    price: string;
+    /** Open-ended "up to X" band, e.g. `(formatted) => \`Under ${formatted}\`` (the default). */
+    priceUnder: (formattedMax: string) => string;
+    /** Open-ended "X or more" band, e.g. `(formatted) => \`${formatted}+\`` (the default). */
+    priceOver: (formattedMin: string) => string;
+    /** Bounded band, e.g. `(min, max) => \`${min} – ${max}\`` (the default). */
+    priceRange: (formattedMin: string, formattedMax: string) => string;
+}
+interface ShopFiltersProps {
+    facets: ShopFacets;
+    hrefs: ShopFiltersHrefs;
+    active?: ShopFiltersActive;
+    /** Client-only: intercepts navigation with a callback instead. See the module doc. */
+    onChange?: (patch: Partial<ShopFiltersActive>) => void;
+    priceBands?: ShopFilterPriceBand[];
+    labels?: Partial<ShopFiltersLabels>;
+    /** Forwarded to `formatPrice` for price-band labels. Defaults match `ProductCard`'s (EUR/es-ES). */
+    currencyCode?: string;
+    locale?: string;
+    className?: string;
+}
+/**
+ * The exact "would `ShopFilters` render anything at all" predicate — exported
+ * so a consuming page can decide whether to render a wrapping `<aside>` (or
+ * similar landmark) around it WITHOUT hand-copying this logic (a copy that
+ * can silently drift from the component's own decision). True when `facets`
+ * has at least one populated dimension, OR `active` has a selection to clear
+ * (see R3-null-render-strands-active-filters above).
+ */
+declare function shouldRenderShopFilters(facets: ShopFacets, active?: ShopFiltersActive): boolean;
+declare function ShopFilters({ facets, hrefs, active, onChange, priceBands, labels, currencyCode, locale, className, }: ShopFiltersProps): react_jsx_runtime.JSX.Element | null;
+
+export { ALLOWED_YOUTUBE_HOSTS, DEFAULT_SHOP_PRICE_BANDS, MarkdownRenderer, type MarkdownRendererProps, ProductCard, type ProductCardProps, ProfileCard, type ProfileCardProps, SafeHtml, type SafeHtmlProps, type ShareUrls, type ShopFilterPriceBand, ShopFilters, type ShopFiltersActive, type ShopFiltersHrefs, type ShopFiltersLabels, type ShopFiltersProps, Specialty, type SpecialtyProps, Treatment, type TreatmentProps, buildShareUrls, formatPrice, isAllowedYouTubeHost, markdownToSafeHtml, readingTime, sanitizeHtml, shouldRenderShopFilters };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { PageDetail, PageListItem, ShopProductListItem } from '@reblu/site-contracts';
+import { PageDetail, PageListItem, ShopProductListItem, ShopFacets } from '@reblu/site-contracts';
 
 declare function readingTime(content: string | null | undefined): number | null;
 
@@ -277,4 +277,110 @@ interface ProductCardProps {
 }
 declare function ProductCard({ product, href, currencyCode, locale, className }: ProductCardProps): react_jsx_runtime.JSX.Element;
 
-export { ALLOWED_YOUTUBE_HOSTS, MarkdownRenderer, type MarkdownRendererProps, ProductCard, type ProductCardProps, ProfileCard, type ProfileCardProps, SafeHtml, type SafeHtmlProps, type ShareUrls, Specialty, type SpecialtyProps, Treatment, type TreatmentProps, buildShareUrls, formatPrice, isAllowedYouTubeHost, markdownToSafeHtml, readingTime, sanitizeHtml };
+/**
+ * `ShopFilters` — plug-and-play SITE filter chrome over `GET /api/site/shop/facets`
+ * (REB-809). Which axes appear, their order and labels come entirely from
+ * `facets` — nexus config, not this component — so no SITE hand-builds shop
+ * filter UI again (the gap this issue closes: dermamedicin's SITE hardcoded
+ * `BRAND_AXIS = 'brand'` while the tenant's real axis key is `marca`).
+ *
+ * RSC-safe by construction (REB-647 lesson): every option always renders a real
+ * `<a href>` built by the `hrefs` prop, so importing and rendering this from an
+ * actual Server Component — no `onChange`, navigation only — never crashes and
+ * never attaches an event handler. `onChange` is strictly additive: when
+ * provided, a click is intercepted (`preventDefault` + call `onChange`) instead
+ * of navigating. Attaching a function prop to a host element only works when
+ * the call site itself is (or is inside) a Client Component — pass `onChange`
+ * only from a `'use client'` boundary; from a Server Component, omit it and let
+ * `hrefs` alone drive navigation (a real page load / your router's own Link).
+ *
+ * ── Single-select everywhere, on purpose ──────────────────────────────────
+ * `facets.taxonomies[].selectionMode` (REB-809/REB-801) reflects how many terms
+ * a PRODUCT may carry on that axis — it is NOT how many the storefront filter
+ * may select at once. `GET /api/site/shop/products`'s `taxonomy[<key>]` query
+ * param accepts exactly one term slug per axis today (`parseListParams` in
+ * base-api collapses any repeat), so every taxonomy axis renders single-select
+ * filter UI here regardless of `selectionMode` — clicking the active term's own
+ * link clears the axis, clicking another replaces it. Wiring `selectionMode`
+ * into a true multi-value taxonomy filter needs the query contract to grow an
+ * array form first; that is out of this component's scope.
+ *
+ * Attribute facets (`facets.attributes`) are genuinely multi-select already —
+ * `attr[<key>]` repeats to OR-match several values — so those render as a
+ * checkbox-shaped list where more than one option may be active at once.
+ *
+ * Tokens only: no brand aesthetic, every color/spacing class is a design
+ * token so the same component renders correctly for every tenant theme.
+ */
+/** One price band. `min`/`max` are integer cents; either may be omitted for an open end. */
+interface ShopFilterPriceBand {
+    min?: number;
+    max?: number;
+    /** Overrides the auto-generated `formatPrice`-based label. */
+    label?: string;
+}
+/** Sensible EUR defaults — override via the `priceBands` prop for another currency/locale. */
+declare const DEFAULT_SHOP_PRICE_BANDS: ShopFilterPriceBand[];
+/** The filter selection currently reflected in the URL (or component state). */
+interface ShopFiltersActive {
+    /** axis key → active term slug. */
+    taxonomy?: Record<string, string>;
+    /** field key → active value(s). */
+    attr?: Record<string, string | string[]>;
+    priceMin?: number;
+    priceMax?: number;
+    onSale?: boolean;
+}
+/**
+ * Href generators — the RSC-safe navigation seam. A consumer typically supplies
+ * these from `@reblu/site-next`'s shop URL helpers (`parseShopSearchParams` /
+ * `serializeShopParams`), which preserve every other current param and reset
+ * pagination on change.
+ */
+interface ShopFiltersHrefs {
+    /** `value` undefined clears the axis (renders the "all" option's href). */
+    taxonomy: (axisKey: string, value: string | undefined) => string;
+    /** Href toggling `value` in/out of `fieldKey`'s active value set. */
+    attr: (fieldKey: string, value: string) => string;
+    price: (min: number | undefined, max: number | undefined) => string;
+    onSale: (nextActive: boolean) => string;
+    clearAll: () => string;
+}
+interface ShopFiltersLabels {
+    /** The "show every term of this axis" option. */
+    allTerms: string;
+    clearAll: string;
+    onSale: string;
+    price: string;
+    /** Open-ended "up to X" band, e.g. `(formatted) => \`Under ${formatted}\`` (the default). */
+    priceUnder: (formattedMax: string) => string;
+    /** Open-ended "X or more" band, e.g. `(formatted) => \`${formatted}+\`` (the default). */
+    priceOver: (formattedMin: string) => string;
+    /** Bounded band, e.g. `(min, max) => \`${min} – ${max}\`` (the default). */
+    priceRange: (formattedMin: string, formattedMax: string) => string;
+}
+interface ShopFiltersProps {
+    facets: ShopFacets;
+    hrefs: ShopFiltersHrefs;
+    active?: ShopFiltersActive;
+    /** Client-only: intercepts navigation with a callback instead. See the module doc. */
+    onChange?: (patch: Partial<ShopFiltersActive>) => void;
+    priceBands?: ShopFilterPriceBand[];
+    labels?: Partial<ShopFiltersLabels>;
+    /** Forwarded to `formatPrice` for price-band labels. Defaults match `ProductCard`'s (EUR/es-ES). */
+    currencyCode?: string;
+    locale?: string;
+    className?: string;
+}
+/**
+ * The exact "would `ShopFilters` render anything at all" predicate — exported
+ * so a consuming page can decide whether to render a wrapping `<aside>` (or
+ * similar landmark) around it WITHOUT hand-copying this logic (a copy that
+ * can silently drift from the component's own decision). True when `facets`
+ * has at least one populated dimension, OR `active` has a selection to clear
+ * (see R3-null-render-strands-active-filters above).
+ */
+declare function shouldRenderShopFilters(facets: ShopFacets, active?: ShopFiltersActive): boolean;
+declare function ShopFilters({ facets, hrefs, active, onChange, priceBands, labels, currencyCode, locale, className, }: ShopFiltersProps): react_jsx_runtime.JSX.Element | null;
+
+export { ALLOWED_YOUTUBE_HOSTS, DEFAULT_SHOP_PRICE_BANDS, MarkdownRenderer, type MarkdownRendererProps, ProductCard, type ProductCardProps, ProfileCard, type ProfileCardProps, SafeHtml, type SafeHtmlProps, type ShareUrls, type ShopFilterPriceBand, ShopFilters, type ShopFiltersActive, type ShopFiltersHrefs, type ShopFiltersLabels, type ShopFiltersProps, Specialty, type SpecialtyProps, Treatment, type TreatmentProps, buildShareUrls, formatPrice, isAllowedYouTubeHost, markdownToSafeHtml, readingTime, sanitizeHtml, shouldRenderShopFilters };

package/dist/index.js

@@ -13401,12 +13401,197 @@ function ProductCard({ product, href, currencyCode = "EUR", locale, className })
     }
   );
 }
+
+// src/components/shop-filters.tsx
+import { cn as cn7 } from "@reblu/site-ui/utils";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var DEFAULT_SHOP_PRICE_BANDS = [
+  { max: 2500 },
+  { min: 2500, max: 5e3 },
+  { min: 5e3, max: 1e4 },
+  { min: 1e4 }
+];
+var DEFAULT_LABELS = {
+  allTerms: "All",
+  clearAll: "Clear filters",
+  onSale: "On sale",
+  price: "Price",
+  priceUnder: (formattedMax) => `Under ${formattedMax}`,
+  priceOver: (formattedMin) => `${formattedMin}+`,
+  priceRange: (formattedMin, formattedMax) => `${formattedMin} \u2013 ${formattedMax}`
+};
+function toValueArray(value) {
+  if (value === void 0) return [];
+  return Array.isArray(value) ? value : [value];
+}
+function hasAnyActiveFilter(active) {
+  return Object.keys(active.taxonomy ?? {}).length > 0 || Object.keys(active.attr ?? {}).length > 0 || active.priceMin !== void 0 || active.priceMax !== void 0 || Boolean(active.onSale);
+}
+function shouldRenderShopFilters(facets, active = {}) {
+  const hasFacetContent = facets.taxonomies.some((axis) => axis.terms.length > 0) || facets.attributes.some((attr) => attr.options.length > 0) || facets.price.max > facets.price.min || facets.onSale.count > 0;
+  return hasFacetContent || hasAnyActiveFilter(active);
+}
+function priceBandLabel(band, t, currencyCode, locale) {
+  if (band.label) return band.label;
+  if (band.min === void 0 && band.max !== void 0) {
+    return t.priceUnder(formatPrice(band.max, currencyCode, locale));
+  }
+  if (band.max === void 0 && band.min !== void 0) {
+    return t.priceOver(formatPrice(band.min, currencyCode, locale));
+  }
+  if (band.min !== void 0 && band.max !== void 0) {
+    return t.priceRange(formatPrice(band.min, currencyCode, locale), formatPrice(band.max, currencyCode, locale));
+  }
+  return "";
+}
+function OptionLink({ href, active, label, onActivate }) {
+  return /* @__PURE__ */ jsx7(
+    "a",
+    {
+      href,
+      "aria-current": active ? "true" : void 0,
+      onClick: onActivate ? (event) => {
+        event.preventDefault();
+        onActivate();
+      } : void 0,
+      className: cn7(
+        "inline-flex items-center rounded-full border px-3 py-1 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        active ? "border-transparent bg-primary text-primary-foreground" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
+      ),
+      children: label
+    }
+  );
+}
+function FilterFieldset({ legend, children: children2 }) {
+  return /* @__PURE__ */ jsxs6("fieldset", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx7("legend", { className: "text-sm font-medium text-foreground", children: legend }),
+    /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap gap-2", children: children2 })
+  ] });
+}
+function ShopFilters({
+  facets,
+  hrefs,
+  active = {},
+  onChange,
+  priceBands = DEFAULT_SHOP_PRICE_BANDS,
+  labels,
+  currencyCode,
+  locale,
+  className
+}) {
+  const t = { ...DEFAULT_LABELS, ...labels };
+  const visibleTaxonomies = facets.taxonomies.filter((axis) => axis.terms.length > 0);
+  const visibleAttributes = facets.attributes.filter((attr) => attr.options.length > 0);
+  const hasPriceSpread = facets.price.max > facets.price.min;
+  const hasOnSale = facets.onSale.count > 0;
+  if (!shouldRenderShopFilters(facets, active)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs6("div", { className: cn7("space-y-6", className), "data-slot": "shop-filters", children: [
+    visibleTaxonomies.map((axis) => {
+      const activeSlug = active.taxonomy?.[axis.key];
+      return /* @__PURE__ */ jsxs6(FilterFieldset, { legend: axis.label, children: [
+        /* @__PURE__ */ jsx7(
+          OptionLink,
+          {
+            href: hrefs.taxonomy(axis.key, void 0),
+            active: activeSlug === void 0,
+            label: t.allTerms,
+            onActivate: onChange ? () => {
+              const next2 = { ...active.taxonomy };
+              delete next2[axis.key];
+              onChange({ taxonomy: next2 });
+            } : void 0
+          }
+        ),
+        axis.terms.map((term) => {
+          const isActive = activeSlug === term.slug;
+          return /* @__PURE__ */ jsx7(
+            OptionLink,
+            {
+              href: hrefs.taxonomy(axis.key, isActive ? void 0 : term.slug),
+              active: isActive,
+              label: `${term.name} (${term.count})`,
+              onActivate: onChange ? () => {
+                const next2 = { ...active.taxonomy };
+                if (isActive) delete next2[axis.key];
+                else next2[axis.key] = term.slug;
+                onChange({ taxonomy: next2 });
+              } : void 0
+            },
+            term.slug
+          );
+        })
+      ] }, axis.key);
+    }),
+    visibleAttributes.map((attr) => {
+      const activeValues = toValueArray(active.attr?.[attr.key]);
+      return /* @__PURE__ */ jsx7(FilterFieldset, { legend: attr.label, children: attr.options.map((opt) => {
+        const isActive = activeValues.includes(opt.value);
+        return /* @__PURE__ */ jsx7(
+          OptionLink,
+          {
+            href: hrefs.attr(attr.key, opt.value),
+            active: isActive,
+            label: `${opt.label} (${opt.count})`,
+            onActivate: onChange ? () => {
+              const next2 = isActive ? activeValues.filter((v2) => v2 !== opt.value) : [...activeValues, opt.value];
+              const attrNext = { ...active.attr };
+              if (next2.length === 0) delete attrNext[attr.key];
+              else attrNext[attr.key] = next2;
+              onChange({ attr: attrNext });
+            } : void 0
+          },
+          opt.value
+        );
+      }) }, attr.key);
+    }),
+    hasPriceSpread && /* @__PURE__ */ jsx7(FilterFieldset, { legend: t.price, children: priceBands.map((band, i) => {
+      const isActive = active.priceMin === band.min && active.priceMax === band.max;
+      const nextMin = isActive ? void 0 : band.min;
+      const nextMax = isActive ? void 0 : band.max;
+      return /* @__PURE__ */ jsx7(
+        OptionLink,
+        {
+          href: hrefs.price(nextMin, nextMax),
+          active: isActive,
+          label: priceBandLabel(band, t, currencyCode, locale),
+          onActivate: onChange ? () => onChange({ priceMin: nextMin, priceMax: nextMax }) : void 0
+        },
+        i
+      );
+    }) }),
+    hasOnSale && /* @__PURE__ */ jsx7(
+      OptionLink,
+      {
+        href: hrefs.onSale(!active.onSale),
+        active: Boolean(active.onSale),
+        label: `${t.onSale} (${facets.onSale.count})`,
+        onActivate: onChange ? () => onChange({ onSale: !active.onSale }) : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      "a",
+      {
+        href: hrefs.clearAll(),
+        onClick: onChange ? (event) => {
+          event.preventDefault();
+          onChange({ taxonomy: {}, attr: {}, priceMin: void 0, priceMax: void 0, onSale: false });
+        } : void 0,
+        className: "text-sm font-medium text-muted-foreground underline-offset-4 hover:text-foreground hover:underline",
+        children: t.clearAll
+      }
+    )
+  ] });
+}
 export {
   ALLOWED_YOUTUBE_HOSTS,
+  DEFAULT_SHOP_PRICE_BANDS,
   MarkdownRenderer,
   ProductCard,
   ProfileCard,
   SafeHtml,
+  ShopFilters,
   Specialty,
   Treatment,
   buildShareUrls,
@@ -13414,6 +13599,7 @@ export {
   isAllowedYouTubeHost,
   markdownToSafeHtml,
   readingTime,
-  sanitizeHtml
+  sanitizeHtml,
+  shouldRenderShopFilters
 };
 //# sourceMappingURL=index.js.map