@decocms/apps 0.23.3 → 0.24.0

package/commerce/components/JsonLd.tsx

@@ -21,14 +21,14 @@
  */
 
 import type {
-  Product,
-  ProductListingPage,
-  BreadcrumbList,
-  ListItem,
-  Offer,
-  AggregateOffer,
-  UnitPriceSpecification,
-  AggregateRating,
+	AggregateOffer,
+	AggregateRating,
+	BreadcrumbList,
+	ListItem,
+	Offer,
+	Product,
+	ProductListingPage,
+	UnitPriceSpecification,
 } from "../types/commerce";
 
 // -------------------------------------------------------------------------
@@ -36,12 +36,9 @@ import type {
 // -------------------------------------------------------------------------
 
 function JsonLdScript({ data }: { data: unknown }) {
-  return (
-    <script
-      type="application/ld+json"
-      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
-    />
-  );
+	return (
+		<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />
+	);
 }
 
 // -------------------------------------------------------------------------
@@ -49,103 +46,96 @@ function JsonLdScript({ data }: { data: unknown }) {
 // -------------------------------------------------------------------------
 
 export interface ProductJsonLdProps {
-  product: Product;
-  /** Override the canonical URL. Defaults to product.url. */
-  url?: string;
+	product: Product;
+	/** Override the canonical URL. Defaults to product.url. */
+	url?: string;
 }
 
 function getBestOffer(offers: Offer[] | AggregateOffer | undefined): {
-  price?: number;
-  priceCurrency?: string;
-  availability?: string;
-  seller?: string;
-  priceValidUntil?: string;
+	price?: number;
+	priceCurrency?: string;
+	availability?: string;
+	seller?: string;
+	priceValidUntil?: string;
 } {
-  if (!offers) return {};
-
-  if ("@type" in offers && offers["@type"] === "AggregateOffer") {
-    const agg = offers as AggregateOffer;
-    return {
-      price: agg.lowPrice,
-      priceCurrency: agg.priceCurrency,
-    };
-  }
-
-  if (Array.isArray(offers) && offers.length > 0) {
-    const best = offers.reduce((a, b) => {
-      const ap = a.price ?? Infinity;
-      const bp = b.price ?? Infinity;
-      return ap <= bp ? a : b;
-    });
-    return {
-      price: best.price,
-      priceCurrency: best.priceCurrency,
-      availability: best.availability,
-      seller: best.seller,
-      priceValidUntil: best.priceValidUntil,
-    };
-  }
-
-  return {};
+	if (!offers) return {};
+
+	if ("@type" in offers && offers["@type"] === "AggregateOffer") {
+		const agg = offers as AggregateOffer;
+		return {
+			price: agg.lowPrice,
+			priceCurrency: agg.priceCurrency,
+		};
+	}
+
+	if (Array.isArray(offers) && offers.length > 0) {
+		const best = offers.reduce((a, b) => {
+			const ap = a.price ?? Infinity;
+			const bp = b.price ?? Infinity;
+			return ap <= bp ? a : b;
+		});
+		return {
+			price: best.price,
+			priceCurrency: best.priceCurrency,
+			availability: best.availability,
+			seller: best.seller,
+			priceValidUntil: best.priceValidUntil,
+		};
+	}
+
+	return {};
 }
 
-function getListPrice(
-  priceSpec: UnitPriceSpecification[] | undefined,
-): number | undefined {
-  if (!priceSpec) return undefined;
-  const list = priceSpec.find(
-    (p) =>
-      p.priceType === "https://schema.org/ListPrice" ||
-      p.priceType === "https://schema.org/SRP",
-  );
-  return list?.price;
+function _getListPrice(priceSpec: UnitPriceSpecification[] | undefined): number | undefined {
+	if (!priceSpec) return undefined;
+	const list = priceSpec.find(
+		(p) =>
+			p.priceType === "https://schema.org/ListPrice" || p.priceType === "https://schema.org/SRP",
+	);
+	return list?.price;
 }
 
 export function ProductJsonLd({ product, url }: ProductJsonLdProps) {
-  const offer = getBestOffer(product.offers as Offer[] | AggregateOffer | undefined);
-  const images = product.image?.map((img) => img.url).filter(Boolean) ?? [];
-  const rating = product.aggregateRating as AggregateRating | undefined;
-
-  const data: Record<string, unknown> = {
-    "@context": "https://schema.org",
-    "@type": "Product",
-    name: product.name,
-    description: product.description,
-    image: images.length === 1 ? images[0] : images,
-    url: url ?? product.url,
-    sku: product.sku,
-    productID: product.productID,
-    brand: product.brand
-      ? { "@type": "Brand", name: product.brand.name }
-      : undefined,
-    gtin: product.gtin,
-  };
-
-  if (offer.price != null) {
-    data.offers = {
-      "@type": "Offer",
-      price: offer.price,
-      priceCurrency: offer.priceCurrency ?? "BRL",
-      availability: offer.availability ?? "https://schema.org/InStock",
-      seller: offer.seller
-        ? { "@type": "Organization", name: offer.seller }
-        : undefined,
-      priceValidUntil: offer.priceValidUntil,
-      url: url ?? product.url,
-    };
-  }
-
-  if (rating && rating.ratingValue) {
-    data.aggregateRating = {
-      "@type": "AggregateRating",
-      ratingValue: rating.ratingValue,
-      reviewCount: rating.reviewCount ?? rating.ratingCount ?? 0,
-      bestRating: rating.bestRating ?? 5,
-      worstRating: rating.worstRating ?? 1,
-    };
-  }
-
-  return <JsonLdScript data={data} />;
+	const offer = getBestOffer(product.offers as Offer[] | AggregateOffer | undefined);
+	const images = product.image?.map((img) => img.url).filter(Boolean) ?? [];
+	const rating = product.aggregateRating as AggregateRating | undefined;
+
+	const data: Record<string, unknown> = {
+		"@context": "https://schema.org",
+		"@type": "Product",
+		name: product.name,
+		description: product.description,
+		image: images.length === 1 ? images[0] : images,
+		url: url ?? product.url,
+		sku: product.sku,
+		productID: product.productID,
+		brand: product.brand ? { "@type": "Brand", name: product.brand.name } : undefined,
+		gtin: product.gtin,
+	};
+
+	if (offer.price != null) {
+		data.offers = {
+			"@type": "Offer",
+			price: offer.price,
+			priceCurrency: offer.priceCurrency ?? "BRL",
+			availability: offer.availability ?? "https://schema.org/InStock",
+			seller: offer.seller ? { "@type": "Organization", name: offer.seller } : undefined,
+			priceValidUntil: offer.priceValidUntil,
+			url: url ?? product.url,
+		};
+	}
+
+	if (rating?.ratingValue) {
+		data.aggregateRating = {
+			"@type": "AggregateRating",
+			ratingValue: rating.ratingValue,
+			reviewCount: rating.reviewCount ?? rating.ratingCount ?? 0,
+			bestRating: rating.bestRating ?? 5,
+			worstRating: rating.worstRating ?? 1,
+		};
+	}
+
+	return <JsonLdScript data={data} />;
 }
 
 // -------------------------------------------------------------------------
@@ -153,45 +143,46 @@ export function ProductJsonLd({ product, url }: ProductJsonLdProps) {
 // -------------------------------------------------------------------------
 
 export interface PLPJsonLdProps {
-  page: ProductListingPage;
-  /** Override the canonical URL. */
-  url?: string;
+	page: ProductListingPage;
+	/** Override the canonical URL. */
+	url?: string;
 }
 
 export function PLPJsonLd({ page, url }: PLPJsonLdProps) {
-  const items = (page.products ?? []).map((product, index) => {
-    const offer = getBestOffer(product.offers as Offer[] | AggregateOffer | undefined);
-    return {
-      "@type": "ListItem" as const,
-      position: index + 1,
-      item: {
-        "@type": "Product" as const,
-        name: product.name,
-        url: product.url,
-        image: product.image?.[0]?.url,
-        offers: offer.price != null
-          ? {
-              "@type": "Offer" as const,
-              price: offer.price,
-              priceCurrency: offer.priceCurrency ?? "BRL",
-              availability: offer.availability ?? "https://schema.org/InStock",
-            }
-          : undefined,
-      },
-    };
-  });
-
-  const data = {
-    "@context": "https://schema.org",
-    "@type": "ItemList",
-    url: url ?? page.seo?.canonical,
-    name: page.seo?.title,
-    description: page.seo?.description,
-    numberOfItems: page.products?.length ?? 0,
-    itemListElement: items,
-  };
-
-  return <JsonLdScript data={data} />;
+	const items = (page.products ?? []).map((product, index) => {
+		const offer = getBestOffer(product.offers as Offer[] | AggregateOffer | undefined);
+		return {
+			"@type": "ListItem" as const,
+			position: index + 1,
+			item: {
+				"@type": "Product" as const,
+				name: product.name,
+				url: product.url,
+				image: product.image?.[0]?.url,
+				offers:
+					offer.price != null
+						? {
+								"@type": "Offer" as const,
+								price: offer.price,
+								priceCurrency: offer.priceCurrency ?? "BRL",
+								availability: offer.availability ?? "https://schema.org/InStock",
+							}
+						: undefined,
+			},
+		};
+	});
+
+	const data = {
+		"@context": "https://schema.org",
+		"@type": "ItemList",
+		url: url ?? page.seo?.canonical,
+		name: page.seo?.title,
+		description: page.seo?.description,
+		numberOfItems: page.products?.length ?? 0,
+		itemListElement: items,
+	};
+
+	return <JsonLdScript data={data} />;
 }
 
 // -------------------------------------------------------------------------
@@ -199,28 +190,28 @@ export function PLPJsonLd({ page, url }: PLPJsonLdProps) {
 // -------------------------------------------------------------------------
 
 export interface BreadcrumbJsonLdProps {
-  breadcrumb: BreadcrumbList;
+	breadcrumb: BreadcrumbList;
 }
 
 export function BreadcrumbJsonLd({ breadcrumb }: BreadcrumbJsonLdProps) {
-  const items = (breadcrumb.itemListElement ?? []).map((item, index) => {
-    const listItem = item as ListItem;
-    return {
-      "@type": "ListItem" as const,
-      position: listItem.position ?? index + 1,
-      name: listItem.name,
-      item: listItem.item ?? listItem.url,
-    };
-  });
-
-  const data = {
-    "@context": "https://schema.org",
-    "@type": "BreadcrumbList",
-    itemListElement: items,
-    numberOfItems: items.length,
-  };
-
-  return <JsonLdScript data={data} />;
+	const items = (breadcrumb.itemListElement ?? []).map((item, index) => {
+		const listItem = item as ListItem;
+		return {
+			"@type": "ListItem" as const,
+			position: listItem.position ?? index + 1,
+			name: listItem.name,
+			item: listItem.item ?? listItem.url,
+		};
+	});
+
+	const data = {
+		"@context": "https://schema.org",
+		"@type": "BreadcrumbList",
+		itemListElement: items,
+		numberOfItems: items.length,
+	};
+
+	return <JsonLdScript data={data} />;
 }
 
 // -------------------------------------------------------------------------
@@ -228,13 +219,13 @@ export function BreadcrumbJsonLd({ breadcrumb }: BreadcrumbJsonLdProps) {
 // -------------------------------------------------------------------------
 
 export interface SeoMetaProps {
-  title?: string;
-  description?: string;
-  canonical?: string;
-  image?: string;
-  noIndex?: boolean;
-  type?: "website" | "article" | "product";
-  siteName?: string;
+	title?: string;
+	description?: string;
+	canonical?: string;
+	image?: string;
+	noIndex?: boolean;
+	type?: "website" | "article" | "product";
+	siteName?: string;
 }
 
 /**
@@ -245,41 +236,41 @@ export interface SeoMetaProps {
  * by React's built-in behavior with TanStack Start).
  */
 export function seoMetaTags(props: SeoMetaProps): Array<Record<string, string>> {
-  const tags: Array<Record<string, string>> = [];
-
-  if (props.title) {
-    tags.push({ title: props.title });
-    tags.push({ property: "og:title", content: props.title });
-    tags.push({ name: "twitter:title", content: props.title });
-  }
-
-  if (props.description) {
-    tags.push({ name: "description", content: props.description });
-    tags.push({ property: "og:description", content: props.description });
-    tags.push({ name: "twitter:description", content: props.description });
-  }
-
-  if (props.canonical) {
-    tags.push({ property: "og:url", content: props.canonical });
-  }
-
-  if (props.image) {
-    tags.push({ property: "og:image", content: props.image });
-    tags.push({ name: "twitter:image", content: props.image });
-    tags.push({ name: "twitter:card", content: "summary_large_image" });
-  }
-
-  if (props.type) {
-    tags.push({ property: "og:type", content: props.type });
-  }
-
-  if (props.siteName) {
-    tags.push({ property: "og:site_name", content: props.siteName });
-  }
-
-  if (props.noIndex) {
-    tags.push({ name: "robots", content: "noindex, nofollow" });
-  }
-
-  return tags;
+	const tags: Array<Record<string, string>> = [];
+
+	if (props.title) {
+		tags.push({ title: props.title });
+		tags.push({ property: "og:title", content: props.title });
+		tags.push({ name: "twitter:title", content: props.title });
+	}
+
+	if (props.description) {
+		tags.push({ name: "description", content: props.description });
+		tags.push({ property: "og:description", content: props.description });
+		tags.push({ name: "twitter:description", content: props.description });
+	}
+
+	if (props.canonical) {
+		tags.push({ property: "og:url", content: props.canonical });
+	}
+
+	if (props.image) {
+		tags.push({ property: "og:image", content: props.image });
+		tags.push({ name: "twitter:image", content: props.image });
+		tags.push({ name: "twitter:card", content: "summary_large_image" });
+	}
+
+	if (props.type) {
+		tags.push({ property: "og:type", content: props.type });
+	}
+
+	if (props.siteName) {
+		tags.push({ property: "og:site_name", content: props.siteName });
+	}
+
+	if (props.noIndex) {
+		tags.push({ name: "robots", content: "noindex, nofollow" });
+	}
+
+	return tags;
 }

package/commerce/components/Picture.tsx

@@ -1,12 +1,12 @@
 import {
-  createContext,
-  forwardRef,
-  useContext,
-  useMemo,
-  type ComponentPropsWithoutRef,
-  type ReactNode,
+	type ComponentPropsWithoutRef,
+	createContext,
+	forwardRef,
+	type ReactNode,
+	useContext,
+	useMemo,
 } from "react";
-import { getOptimizedMediaUrl, getSrcSet, type FitOptions } from "./Image";
+import { type FitOptions, getOptimizedMediaUrl, getSrcSet } from "./Image";
 
 // -------------------------------------------------------------------------
 // Preload context — flows from <Picture preload> to child <Source> elements
@@ -15,7 +15,7 @@ import { getOptimizedMediaUrl, getSrcSet, type FitOptions } from "./Image";
 // -------------------------------------------------------------------------
 
 interface PreloadContextValue {
-  preload: boolean;
+	preload: boolean;
 }
 
 const PreloadContext = createContext<PreloadContextValue>({ preload: false });
@@ -25,59 +25,48 @@ const PreloadContext = createContext<PreloadContextValue>({ preload: false });
 // preload link injection when inside a <Picture preload>.
 // -------------------------------------------------------------------------
 
-export type SourceProps = Omit<
-  ComponentPropsWithoutRef<"source">,
-  "width" | "height"
-> & {
-  src: string;
-  /** @description Improves Web Vitals (CLS|LCP) */
-  width: number;
-  /** @description Improves Web Vitals (CLS|LCP) */
-  height?: number;
-  /** @description Improves Web Vitals (LCP). Use high for LCP image. */
-  fetchPriority?: "high" | "low" | "auto";
-  /** @description Object-fit */
-  fit?: FitOptions;
+export type SourceProps = Omit<ComponentPropsWithoutRef<"source">, "width" | "height"> & {
+	src: string;
+	/** @description Improves Web Vitals (CLS|LCP) */
+	width: number;
+	/** @description Improves Web Vitals (CLS|LCP) */
+	height?: number;
+	/** @description Improves Web Vitals (LCP). Use high for LCP image. */
+	fetchPriority?: "high" | "low" | "auto";
+	/** @description Object-fit */
+	fit?: FitOptions;
 };
 
-export const Source = forwardRef<HTMLSourceElement, SourceProps>(
-  function Source(
-    { src, width, height, fetchPriority, fit = "cover", ...rest },
-    ref,
-  ) {
-    const { preload } = useContext(PreloadContext);
+export const Source = forwardRef<HTMLSourceElement, SourceProps>(function Source(
+	{ src, width, height, fetchPriority, fit = "cover", ...rest },
+	ref,
+) {
+	const { preload } = useContext(PreloadContext);
 
-    const optimizedSrc = getOptimizedMediaUrl({
-      originalSrc: src,
-      width,
-      height,
-      fit,
-    });
-    const srcSet = rest.srcSet ?? getSrcSet(src, width, height, fit);
+	const optimizedSrc = getOptimizedMediaUrl({
+		originalSrc: src,
+		width,
+		height,
+		fit,
+	});
+	const srcSet = rest.srcSet ?? getSrcSet(src, width, height, fit);
 
-    return (
-      <>
-        {preload && (
-          <link
-            as="image"
-            rel="preload"
-            href={optimizedSrc}
-            imageSrcSet={srcSet}
-            fetchPriority={fetchPriority ?? "high"}
-            media={rest.media}
-          />
-        )}
-        <source
-          {...rest}
-          srcSet={srcSet ?? optimizedSrc}
-          width={width}
-          height={height}
-          ref={ref}
-        />
-      </>
-    );
-  },
-);
+	return (
+		<>
+			{preload && (
+				<link
+					as="image"
+					rel="preload"
+					href={optimizedSrc}
+					imageSrcSet={srcSet}
+					fetchPriority={fetchPriority ?? "high"}
+					media={rest.media}
+				/>
+			)}
+			<source {...rest} srcSet={srcSet ?? optimizedSrc} width={width} height={height} ref={ref} />
+		</>
+	);
+});
 
 // -------------------------------------------------------------------------
 // Picture — composable wrapper that provides preload context to children.
@@ -91,24 +80,25 @@ export const Source = forwardRef<HTMLSourceElement, SourceProps>(
 // -------------------------------------------------------------------------
 
 export type PictureProps = ComponentPropsWithoutRef<"picture"> & {
-  children: ReactNode;
-  /**
-   * @description When true, child <Source> and <Image> elements inject
-   * `<link rel="preload">` tags for their respective media queries.
-   */
-  preload?: boolean;
+	children: ReactNode;
+	/**
+	 * @description When true, child <Source> and <Image> elements inject
+	 * `<link rel="preload">` tags for their respective media queries.
+	 */
+	preload?: boolean;
 };
 
-export const Picture = forwardRef<HTMLPictureElement, PictureProps>(
-  function Picture({ children, preload = false, ...props }, ref) {
-    const value = useMemo(() => ({ preload }), [preload]);
+export const Picture = forwardRef<HTMLPictureElement, PictureProps>(function Picture(
+	{ children, preload = false, ...props },
+	ref,
+) {
+	const value = useMemo(() => ({ preload }), [preload]);
 
-    return (
-      <PreloadContext.Provider value={value}>
-        <picture {...props} ref={ref}>
-          {children}
-        </picture>
-      </PreloadContext.Provider>
-    );
-  },
-);
+	return (
+		<PreloadContext.Provider value={value}>
+			<picture {...props} ref={ref}>
+				{children}
+			</picture>
+		</PreloadContext.Provider>
+	);
+});

package/commerce/sdk/analytics.ts

@@ -1,24 +1,24 @@
 import type { AnalyticsEvent } from "../types/commerce";
 
 declare global {
-  interface Window {
-    DECO: { events: { dispatch: (event: any) => void } };
-    DECO_SITES_STD: {
-      sendAnalyticsEvent: (args: AnalyticsEvent) => void;
-    };
-  }
+	interface Window {
+		DECO: { events: { dispatch: (event: any) => void } };
+		DECO_SITES_STD: {
+			sendAnalyticsEvent: (args: AnalyticsEvent) => void;
+		};
+	}
 }
 
 export const sendEvent = <E extends AnalyticsEvent>(event: E) => {
-  if (typeof globalThis.window?.DECO?.events?.dispatch === "function") {
-    globalThis.window.DECO.events.dispatch(event);
-    return;
-  }
+	if (typeof globalThis.window?.DECO?.events?.dispatch === "function") {
+		globalThis.window.DECO.events.dispatch(event);
+		return;
+	}
 
-  if (typeof globalThis.window?.DECO_SITES_STD?.sendAnalyticsEvent === "function") {
-    globalThis.window.DECO_SITES_STD.sendAnalyticsEvent(event);
-    return;
-  }
+	if (typeof globalThis.window?.DECO_SITES_STD?.sendAnalyticsEvent === "function") {
+		globalThis.window.DECO_SITES_STD.sendAnalyticsEvent(event);
+		return;
+	}
 
-  console.info("[analytics] No event dispatcher found. Event not sent:", event.name);
+	console.info("[analytics] No event dispatcher found. Event not sent:", event.name);
 };