@propeller-commerce/propeller-v2-react-ui 0.26.1 → 0.28.0

package/dist/pure.d.cts

@@ -1,7 +1,20 @@
 import * as React from 'react';
-import { Category, Cluster, Product, ProductInventory, OrderItem, Order, ProductPrice, Contact, Customer, PaginatedMediaDocumentResponse, ClusterOption, PaginatedMediaVideoResponse } from '@propeller-commerce/propeller-sdk-v2';
 import * as _propeller_commerce_propeller_v2_core_ui from '@propeller-commerce/propeller-v2-core-ui';
-import { JsonLdContext } from '@propeller-commerce/propeller-v2-core-ui';
+import { ImgComponentProps, JsonLdContext } from '@propeller-commerce/propeller-v2-core-ui';
+import { Category, Cluster, Product, ProductInventory, OrderItem, Order, ProductPrice, Contact, Customer, PaginatedMediaDocumentResponse, ClusterOption, PaginatedMediaVideoResponse } from '@propeller-commerce/propeller-sdk-v2';
+
+/**
+ * @rsc-safe — Pure display component. No React hooks, no event handlers, no
+ * browser APIs, no context reads. Renders directly from props and can be
+ * imported into a React Server Component without a 'use client' boundary.
+ */
+
+interface PropellerImgProps extends ImgComponentProps {
+    /** The host's image component. RSC-safe callers pass it; others use `useImgComponent()`. */
+    as?: React.ComponentType<ImgComponentProps>;
+}
+/** The package's single `<img>` site. Falls back to `<img>` when nothing is injected. */
+declare function PropellerImg({ as: Injected, ...props }: PropellerImgProps): React.JSX.Element;
 
 /**
  * @rsc-safe — Pure display component. No React hooks, no event handlers, no
@@ -295,6 +308,8 @@ interface OrderItemCardProps {
     labels?: Record<string, string>;
     priceComponent?: React.ComponentType<_propeller_commerce_propeller_v2_core_ui.PriceComponentProps>;
     stockComponent?: React.ComponentType<_propeller_commerce_propeller_v2_core_ui.StockComponentProps>;
+    /** Replaces the `<img>`. Passed directly: this component reads no context. */
+    imgComponent?: React.ComponentType<_propeller_commerce_propeller_v2_core_ui.ImgComponentProps>;
 }
 /**
  * Renders a single order line item as a table row (with optional indented
@@ -649,4 +664,4 @@ interface ProductVideosProps {
  */
 declare function ProductVideos(props: ProductVideosProps): React.JSX.Element;
 
-export { Breadcrumbs, type BreadcrumbsProps, CategoryShortDescription, type CategoryShortDescriptionProps, _default$3 as ClusterJsonLd, type ClusterJsonLdProps, GridTitle, type GridTitleProps, _default$2 as ItemListJsonLd, type ItemListJsonLdProps, _default as ItemStock, type ItemStockProps, OrderItemCard, type OrderItemCardProps, OrderSummary, type OrderSummaryProps, OrderTotals, type OrderTotalsProps, ProductBulkPrices, type ProductBulkPricesProps, ProductDownloads, type ProductDownloadsProps, _default$1 as ProductJsonLd, type ProductJsonLdProps, ProductPriceDisplay as ProductPrice, type ProductPriceProps, ProductShortDescription, type ProductShortDescriptionProps, ProductVideos, type ProductVideosProps };
+export { Breadcrumbs, type BreadcrumbsProps, CategoryShortDescription, type CategoryShortDescriptionProps, _default$3 as ClusterJsonLd, type ClusterJsonLdProps, GridTitle, type GridTitleProps, _default$2 as ItemListJsonLd, type ItemListJsonLdProps, _default as ItemStock, type ItemStockProps, OrderItemCard, type OrderItemCardProps, OrderSummary, type OrderSummaryProps, OrderTotals, type OrderTotalsProps, ProductBulkPrices, type ProductBulkPricesProps, ProductDownloads, type ProductDownloadsProps, _default$1 as ProductJsonLd, type ProductJsonLdProps, ProductPriceDisplay as ProductPrice, type ProductPriceProps, ProductShortDescription, type ProductShortDescriptionProps, ProductVideos, type ProductVideosProps, PropellerImg, type PropellerImgProps };

package/dist/pure.d.ts

@@ -1,7 +1,20 @@
 import * as React from 'react';
-import { Category, Cluster, Product, ProductInventory, OrderItem, Order, ProductPrice, Contact, Customer, PaginatedMediaDocumentResponse, ClusterOption, PaginatedMediaVideoResponse } from '@propeller-commerce/propeller-sdk-v2';
 import * as _propeller_commerce_propeller_v2_core_ui from '@propeller-commerce/propeller-v2-core-ui';
-import { JsonLdContext } from '@propeller-commerce/propeller-v2-core-ui';
+import { ImgComponentProps, JsonLdContext } from '@propeller-commerce/propeller-v2-core-ui';
+import { Category, Cluster, Product, ProductInventory, OrderItem, Order, ProductPrice, Contact, Customer, PaginatedMediaDocumentResponse, ClusterOption, PaginatedMediaVideoResponse } from '@propeller-commerce/propeller-sdk-v2';
+
+/**
+ * @rsc-safe — Pure display component. No React hooks, no event handlers, no
+ * browser APIs, no context reads. Renders directly from props and can be
+ * imported into a React Server Component without a 'use client' boundary.
+ */
+
+interface PropellerImgProps extends ImgComponentProps {
+    /** The host's image component. RSC-safe callers pass it; others use `useImgComponent()`. */
+    as?: React.ComponentType<ImgComponentProps>;
+}
+/** The package's single `<img>` site. Falls back to `<img>` when nothing is injected. */
+declare function PropellerImg({ as: Injected, ...props }: PropellerImgProps): React.JSX.Element;
 
 /**
  * @rsc-safe — Pure display component. No React hooks, no event handlers, no
@@ -295,6 +308,8 @@ interface OrderItemCardProps {
     labels?: Record<string, string>;
     priceComponent?: React.ComponentType<_propeller_commerce_propeller_v2_core_ui.PriceComponentProps>;
     stockComponent?: React.ComponentType<_propeller_commerce_propeller_v2_core_ui.StockComponentProps>;
+    /** Replaces the `<img>`. Passed directly: this component reads no context. */
+    imgComponent?: React.ComponentType<_propeller_commerce_propeller_v2_core_ui.ImgComponentProps>;
 }
 /**
  * Renders a single order line item as a table row (with optional indented
@@ -649,4 +664,4 @@ interface ProductVideosProps {
  */
 declare function ProductVideos(props: ProductVideosProps): React.JSX.Element;
 
-export { Breadcrumbs, type BreadcrumbsProps, CategoryShortDescription, type CategoryShortDescriptionProps, _default$3 as ClusterJsonLd, type ClusterJsonLdProps, GridTitle, type GridTitleProps, _default$2 as ItemListJsonLd, type ItemListJsonLdProps, _default as ItemStock, type ItemStockProps, OrderItemCard, type OrderItemCardProps, OrderSummary, type OrderSummaryProps, OrderTotals, type OrderTotalsProps, ProductBulkPrices, type ProductBulkPricesProps, ProductDownloads, type ProductDownloadsProps, _default$1 as ProductJsonLd, type ProductJsonLdProps, ProductPriceDisplay as ProductPrice, type ProductPriceProps, ProductShortDescription, type ProductShortDescriptionProps, ProductVideos, type ProductVideosProps };
+export { Breadcrumbs, type BreadcrumbsProps, CategoryShortDescription, type CategoryShortDescriptionProps, _default$3 as ClusterJsonLd, type ClusterJsonLdProps, GridTitle, type GridTitleProps, _default$2 as ItemListJsonLd, type ItemListJsonLdProps, _default as ItemStock, type ItemStockProps, OrderItemCard, type OrderItemCardProps, OrderSummary, type OrderSummaryProps, OrderTotals, type OrderTotalsProps, ProductBulkPrices, type ProductBulkPricesProps, ProductDownloads, type ProductDownloadsProps, _default$1 as ProductJsonLd, type ProductJsonLdProps, ProductPriceDisplay as ProductPrice, type ProductPriceProps, ProductShortDescription, type ProductShortDescriptionProps, ProductVideos, type ProductVideosProps, PropellerImg, type PropellerImgProps };

package/dist/pure.js

@@ -1,11 +1,27 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { buildClusterJsonLd, safeJsonStringify, buildItemListJsonLd, buildProductJsonLd, getLabel, getLocalizedValue, isContentHidden, formatPrice, localeForLanguage, getCountryName, resolveLanguageEntry, getLanguageString, getLanguageUri } from '@propeller-commerce/propeller-v2-core-ui';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { OrderDiscountType, YesNo } from '@propeller-commerce/propeller-sdk-v2';
 
-// src/components/Breadcrumbs.tsx
+// src/components/PropellerImg.tsx
+function PropellerImg({ as: Injected, ...props }) {
+  if (Injected) return /* @__PURE__ */ jsx(Injected, { ...props });
+  const { src, alt, className, width, height, loading, onClick } = props;
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt,
+      className,
+      width,
+      height,
+      loading,
+      onClick
+    }
+  );
+}
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -245,6 +261,28 @@ function ItemStock(props) {
   ) }) : null });
 }
 var ItemStock_default = React.memo(ItemStock);
+var warnedOnce = /* @__PURE__ */ new Set();
+function warnOnce(key, message) {
+  if (warnedOnce.has(key)) return;
+  warnedOnce.add(key);
+  console.warn(message);
+}
+function warnMissingProps(props) {
+  if (process.env.NODE_ENV === "production") return;
+  if (!props.language) {
+    warnOnce(
+      "language",
+      "[OrderItemCard] No `language` prop: product names resolve in the default catalogue language, whatever page they are on. This component reads no context (it ships from the RSC-safe /pure entry), so the host must pass it."
+    );
+  }
+  const linkable = props.titleLinkable !== void 0 ? props.titleLinkable : true;
+  if (linkable && !props.configuration?.urls) {
+    warnOnce(
+      "urls",
+      "[OrderItemCard] Title is linkable but no `configuration.urls` was passed: links fall back to a literal /product/:id/:slug and lose the locale prefix. Pass the url builders from the host, or set titleLinkable={false}."
+    );
+  }
+}
 function getProductName(orderItem, language) {
   return getLocalizedValue(orderItem?.product?.names, language, "") || orderItem?.name || "Unknown Product";
 }
@@ -268,6 +306,7 @@ function getProductUrl(orderItem, language, urls) {
 function OrderItemCard(props) {
   const item = props.orderItem;
   const isChildItem = props.isChildItem || false;
+  warnMissingProps(props);
   const titleLinkable = props.titleLinkable !== void 0 ? props.titleLinkable : true;
   const showImage = isChildItem ? false : props.showImage !== void 0 ? props.showImage : true;
   const showSku = isChildItem ? false : props.showSku !== void 0 ? props.showSku : true;
@@ -308,11 +347,13 @@ function OrderItemCard(props) {
               className: `propeller-order-item-card__cell propeller-order-item-card__cell--product ${isChildItem ? "px-6 py-2 pl-28" : "px-6 py-4"}`,
               children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
                 showImage ? productImage ? /* @__PURE__ */ jsx("div", { className: "propeller-order-item-card__media relative w-16 h-16 flex-shrink-0 rounded overflow-hidden", children: /* @__PURE__ */ jsx(
-                  "img",
+                  PropellerImg,
                   {
+                    as: props.imgComponent,
                     className: "propeller-order-item-card__image object-cover w-full h-full",
                     src: productImage,
-                    alt: productName
+                    alt: productName,
+                    loading: "lazy"
                   }
                 ) }) : /* @__PURE__ */ jsx("div", { className: "propeller-order-item-card__image-placeholder w-16 h-16 bg-surface-hover rounded flex items-center justify-center text-foreground-subtle text-xs", children: getLabel(props.labels, "noImage", "No Img") }) : null,
                 /* @__PURE__ */ jsxs("div", { children: [
@@ -935,6 +976,6 @@ function ProductVideos(props) {
 }
 var ProductVideos_default = ProductVideos;
 
-export { Breadcrumbs_default as Breadcrumbs, CategoryShortDescription_default as CategoryShortDescription, ClusterJsonLd_default as ClusterJsonLd, GridTitle_default as GridTitle, ItemListJsonLd_default as ItemListJsonLd, ItemStock_default as ItemStock, OrderItemCard_default as OrderItemCard, OrderSummary_default as OrderSummary, OrderTotals_default as OrderTotals, ProductBulkPrices_default as ProductBulkPrices, ProductDownloads_default as ProductDownloads, ProductJsonLd_default as ProductJsonLd, ProductPrice_default as ProductPrice, ProductShortDescription_default as ProductShortDescription, ProductVideos_default as ProductVideos };
+export { Breadcrumbs_default as Breadcrumbs, CategoryShortDescription_default as CategoryShortDescription, ClusterJsonLd_default as ClusterJsonLd, GridTitle_default as GridTitle, ItemListJsonLd_default as ItemListJsonLd, ItemStock_default as ItemStock, OrderItemCard_default as OrderItemCard, OrderSummary_default as OrderSummary, OrderTotals_default as OrderTotals, ProductBulkPrices_default as ProductBulkPrices, ProductDownloads_default as ProductDownloads, ProductJsonLd_default as ProductJsonLd, ProductPrice_default as ProductPrice, ProductShortDescription_default as ProductShortDescription, ProductVideos_default as ProductVideos, PropellerImg };
 //# sourceMappingURL=pure.js.map
 //# sourceMappingURL=pure.js.map