@asteby/storefront-react 0.2.0 → 0.4.0

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
-import { ReactNode, ComponentPropsWithoutRef, ElementType, ComponentType, FormEvent } from 'react';
-import { StorefrontClient, Shop, StorefrontClientOptions, Cart, CartLineInput, CartLineMerchandise, CartLineUpdateInput, CartBuyerInput, AddressInput, DeliveryInput, DeliveryOptions, Image as Image$1, FormatMoneyOptions, Money as Money$1, Product, ProductVariant, Collection, Section, Theme, GeoPoint, ShopBranch } from '@asteby/storefront';
+import { ReactNode, ComponentPropsWithoutRef, ComponentType, FormEvent } from 'react';
+import { StorefrontClient, Shop, StorefrontClientOptions, Cart, CartLineInput, CartLineMerchandise, CartLineUpdateInput, CartBuyerInput, AddressInput, DeliveryInput, DeliveryOptions, ProductVariant, Product, Image, Collection, Section, Theme, GeoPoint, ShopBranch, Money } from '@asteby/storefront';
+export { D as DEFAULT_IMAGE_WIDTHS, I as Image, a as ImageLoader, b as ImageProps, M as Money, c as MoneyProps, P as ProductPrice, d as ProductPriceProps, e as defaultImageLoader } from './components-B5XhSH-m.js';
 import { OpeningHours, GeoPoint as GeoPoint$1, OpenStatus as OpenStatus$1 } from '@asteby/storefront/geo';
 
 type StorefrontContextValue = {
@@ -124,55 +125,6 @@ declare function useCart(): CartContextValue;
 /** Cart context or `null` outside a provider. */
 declare function useOptionalCart(): CartContextValue | null;
 
-type MoneyProps<As extends ElementType = 'span'> = FormatMoneyOptions & {
-    data: Money$1;
-    /** Element to render (default `span`). */
-    as?: As;
-    /** Overrides the provider locale. */
-    locale?: string;
-} & Omit<ComponentPropsWithoutRef<As>, 'children' | 'as'>;
-/** Formats `Money` with the provider locale (or `locale`). */
-declare function Money<As extends ElementType = 'span'>({ data, as, locale, withoutTrailingZeros, withoutCurrency, currencyDisplay, ...rest }: MoneyProps<As>): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
-declare const DEFAULT_IMAGE_WIDTHS: readonly [320, 480, 640, 768, 1024, 1280, 1600];
-/** Builds the URL for one srcset width. */
-type ImageLoader = (src: string, width: number, height?: number) => string;
-/**
- * Default loader: adds `?width=<w>` (the convention of most image CDNs and of
- * the OPS image proxy). URLs that cannot be parsed are returned unchanged.
- */
-declare const defaultImageLoader: ImageLoader;
-type ImageProps = Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet' | 'width' | 'height'> & {
-    data: Image$1;
-    /** `sizes` attribute (default `100vw`). */
-    sizes?: string;
-    /** Candidate widths for `srcset` (capped at the intrinsic width when known). */
-    widths?: readonly number[];
-    /** URL builder per width (default adds `?width=`). Pass `null` to disable srcset. */
-    loader?: ImageLoader | null;
-    /** Above-the-fold image: eager loading and `fetchpriority="high"`. */
-    priority?: boolean;
-    /** Forces an aspect ratio, e.g. `1/1` or `4/3`, used for width/height and srcset heights. */
-    aspectRatio?: string;
-};
-/** Responsive `<img>` with `srcset`, lazy by default, intrinsic size to avoid layout shift. */
-declare function Image({ data, sizes, widths, loader, priority, aspectRatio, alt, loading, decoding, ...rest }: ImageProps): react.JSX.Element;
-type ProductPriceProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
-    product?: Pick<Product, 'price_range' | 'compare_at_price_range'> | null;
-    variant?: Pick<ProductVariant, 'price' | 'compare_at_price'> | null;
-    /** Prefix shown when the product has a price range and no variant is selected (default `Desde`). */
-    fromLabel?: ReactNode;
-    /** Accessible label for the compare-at price (default `Precio anterior`). */
-    compareAtLabel?: string;
-    locale?: string;
-    withoutTrailingZeros?: boolean;
-};
-/**
- * Price with optional compare-at (strikethrough). With a `variant` it shows
- * that variant; otherwise the product's minimum price (prefixed with
- * `fromLabel` when prices vary).
- */
-declare function ProductPrice({ product, variant, fromLabel, compareAtLabel, locale, withoutTrailingZeros, ...rest }: ProductPriceProps): react.JSX.Element | null;
-
 type ProductOptionValueState = {
     value: string;
     /** Part of the current selection. */
@@ -285,7 +237,7 @@ type SeoMetaInput = {
     description?: string | null;
     /** Canonical absolute URL. */
     url?: string | null;
-    image?: Image$1 | string | null;
+    image?: Image | string | null;
     /** `og:type` (default `website`). */
     type?: string;
     siteName?: string | null;
@@ -665,7 +617,7 @@ declare function DirectionsLink({ location, provider, children, ...rest }: Direc
 type PickupInfo<L extends ShopBranch = ShopBranch> = {
     location: L;
     /** `null` = free. Amount as sent by OPS; nothing is calculated here. */
-    fee: Money$1 | null;
+    fee: Money | null;
     free: boolean;
     /** Formatted `fee` (`null` when free). */
     feeText: string | null;
@@ -703,4 +655,4 @@ type NearestLocationFormProps<L extends ShopBranch = ShopBranch> = {
  */
 declare function NearestLocationForm<L extends ShopBranch = ShopBranch>({ locations, action, name, defaultValue, onSubmitPostalCode, onLocate, labels, children, ...rest }: NearestLocationFormProps<L>): react.JSX.Element | null;
 
-export { AddToCartButton, type AddToCartButtonProps, type BreadcrumbItem, CART_COOKIE_NAME, type CartContextValue, type CartCookieOptions, type CartLineAddInput, CartProvider, type CartProviderProps, type CartStatus, DEFAULT_IMAGE_WIDTHS, DirectionsLink, type DirectionsLinkProps, type FaqItem, type GeolocationErrorCode, type GeolocationFailure, type GeolocationPermission, Image, type ImageLoader, type ImageProps, type InferSectionProps, JsonLd, type JsonLdObject, type JsonLdProps, type LocalBusinessOptions, type LocationItemState, LocationList, type LocationListProps, LocationPicker, type LocationPickerProps, type MetaDescriptor, Money, type MoneyProps, type NearbyLocation, NearestLocationForm, type NearestLocationFormLabels, type NearestLocationFormProps, OpenStatus, type OpenStatusLabels, type OpenStatusProps, type PickupInfo, PickupOption, type PickupOptionProps, type ProductOptionState, type ProductOptionValueState, type ProductOptionsState, ProductPrice, type ProductPriceProps, SELECTED_LOCATION_PARAM, SELECTED_LOCATION_STORAGE_KEY, type SectionComponentProps, type SectionDefinition, type SectionPropError, type SectionPropKind, type SectionPropSchema, SectionRegistry, type SectionSchema, Sections, type SectionsProps, type SeoMetaInput, type StorefrontContextValue, StorefrontProvider, type StorefrontProviderProps, type ThemeCssOptions, ThemeStyle, type ThemeStyleProps, type UseGeolocationOptions, type UseGeolocationResult, type UseNearestLocationsOptions, type UseNearestLocationsResult, type UseProductOptionsConfig, type UseSelectedLocationOptions, type UseSelectedLocationResult, VariantSelector, type VariantSelectorProps, type VariantSelectorRenderProps, breadcrumbJsonLd, collectionJsonLd, collectionMeta, createSectionRegistry, defaultImageLoader, defineSection, faqJsonLd, getCartIdFromCookie, isSafeCssValue, localBusinessJsonLd, openingHoursJsonLd, optimisticCart, organizationJsonLd, productJsonLd, productMeta, readCartCookie, readSelectedLocationId, resolveSectionProps, sectionJsonSchema, seoMeta, serializeCartCookie, serializeJsonLd, themeFontsHref, themeToCss, themeToCssVariables, toMerchandise, tokenName, useCart, useGeolocation, useNearestLocations, useOptionalCart, useOptionalStorefront, useProductOptions, useSelectedLocation, useStorefront, useStorefrontClient, writeCartCookie };
+export { AddToCartButton, type AddToCartButtonProps, type BreadcrumbItem, CART_COOKIE_NAME, type CartContextValue, type CartCookieOptions, type CartLineAddInput, CartProvider, type CartProviderProps, type CartStatus, DirectionsLink, type DirectionsLinkProps, type FaqItem, type GeolocationErrorCode, type GeolocationFailure, type GeolocationPermission, type InferSectionProps, JsonLd, type JsonLdObject, type JsonLdProps, type LocalBusinessOptions, type LocationItemState, LocationList, type LocationListProps, LocationPicker, type LocationPickerProps, type MetaDescriptor, type NearbyLocation, NearestLocationForm, type NearestLocationFormLabels, type NearestLocationFormProps, OpenStatus, type OpenStatusLabels, type OpenStatusProps, type PickupInfo, PickupOption, type PickupOptionProps, type ProductOptionState, type ProductOptionValueState, type ProductOptionsState, SELECTED_LOCATION_PARAM, SELECTED_LOCATION_STORAGE_KEY, type SectionComponentProps, type SectionDefinition, type SectionPropError, type SectionPropKind, type SectionPropSchema, SectionRegistry, type SectionSchema, Sections, type SectionsProps, type SeoMetaInput, type StorefrontContextValue, StorefrontProvider, type StorefrontProviderProps, type ThemeCssOptions, ThemeStyle, type ThemeStyleProps, type UseGeolocationOptions, type UseGeolocationResult, type UseNearestLocationsOptions, type UseNearestLocationsResult, type UseProductOptionsConfig, type UseSelectedLocationOptions, type UseSelectedLocationResult, VariantSelector, type VariantSelectorProps, type VariantSelectorRenderProps, breadcrumbJsonLd, collectionJsonLd, collectionMeta, createSectionRegistry, defineSection, faqJsonLd, getCartIdFromCookie, isSafeCssValue, localBusinessJsonLd, openingHoursJsonLd, optimisticCart, organizationJsonLd, productJsonLd, productMeta, readCartCookie, readSelectedLocationId, resolveSectionProps, sectionJsonSchema, seoMeta, serializeCartCookie, serializeJsonLd, themeFontsHref, themeToCss, themeToCssVariables, toMerchandise, tokenName, useCart, useGeolocation, useNearestLocations, useOptionalCart, useOptionalStorefront, useProductOptions, useSelectedLocation, useStorefront, useStorefrontClient, writeCartCookie };

package/dist/index.js

@@ -1,41 +1,10 @@
-import { createContext, useMemo, useContext, useRef, useState, useCallback, useEffect, createElement, Fragment as Fragment$1, useId } from 'react';
-import { createStorefrontClient, formatMoney, parseMoney, isStorefrontError } from '@asteby/storefront';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useOptionalStorefront } from './chunk-C6QZNKRE.js';
+export { DEFAULT_IMAGE_WIDTHS, Image, Money, ProductPrice, StorefrontProvider, defaultImageLoader, useOptionalStorefront, useStorefront, useStorefrontClient } from './chunk-C6QZNKRE.js';
+import { createContext, useRef, useState, useCallback, useEffect, useMemo, useContext, Fragment as Fragment$1, useId } from 'react';
+import { formatMoney, isStorefrontError } from '@asteby/storefront';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { toSchemaOpeningHours, isValidPoint, rankByDistance, openStatus, directionsUrl } from '@asteby/storefront/geo';
 
-// src/context.tsx
-var StorefrontContext = createContext(null);
-function StorefrontProvider({ client, config, shop = null, locale, currency, children }) {
-  const configKey = config ? `${config.baseUrl}|${config.token}|${config.locale ?? ""}|${config.customerToken ?? ""}` : "";
-  const resolvedClient = useMemo(
-    () => client ?? (config ? createStorefrontClient(config) : null),
-    [client, configKey]
-  );
-  const value = useMemo(
-    () => ({
-      client: resolvedClient,
-      shop,
-      locale: locale ?? config?.locale ?? shop?.locale ?? "es-MX",
-      currency: currency ?? shop?.currency_code ?? "MXN"
-    }),
-    [resolvedClient, shop, locale, currency, config?.locale]
-  );
-  return /* @__PURE__ */ jsx(StorefrontContext.Provider, { value, children });
-}
-function useStorefront() {
-  const ctx = useContext(StorefrontContext);
-  if (!ctx) throw new Error("useStorefront must be used inside <StorefrontProvider>");
-  return ctx;
-}
-function useOptionalStorefront() {
-  return useContext(StorefrontContext);
-}
-function useStorefrontClient() {
-  const { client } = useStorefront();
-  if (!client) throw new Error("<StorefrontProvider> needs a `client` or `config` for browser-side calls");
-  return client;
-}
-
 // src/cookie.ts
 var CART_COOKIE_NAME = "sf_cart";
 function getCartIdFromCookie(cookieHeader, name = CART_COOKIE_NAME) {
@@ -314,128 +283,6 @@ function useCart() {
 function useOptionalCart() {
   return useContext(CartContext);
 }
-function Money({
-  data,
-  as,
-  locale,
-  withoutTrailingZeros,
-  withoutCurrency,
-  currencyDisplay,
-  ...rest
-}) {
-  const sf = useOptionalStorefront();
-  const text = formatMoney(data, locale ?? sf?.locale, {
-    ...withoutTrailingZeros !== void 0 ? { withoutTrailingZeros } : {},
-    ...withoutCurrency !== void 0 ? { withoutCurrency } : {},
-    ...currencyDisplay !== void 0 ? { currencyDisplay } : {}
-  });
-  return createElement(as ?? "span", rest, text);
-}
-var DEFAULT_IMAGE_WIDTHS = [320, 480, 640, 768, 1024, 1280, 1600];
-var defaultImageLoader = (src, width, height) => {
-  try {
-    const isAbsolute = /^[a-z][a-z0-9+.-]*:/i.test(src);
-    const url = new URL(src, "http://relative.invalid");
-    url.searchParams.set("width", String(width));
-    if (height) url.searchParams.set("height", String(height));
-    return isAbsolute ? url.toString() : url.pathname + url.search + url.hash;
-  } catch {
-    return src;
-  }
-};
-function parseRatio(ratio) {
-  if (!ratio) return null;
-  const [w, h] = ratio.split(/[/:]/).map((n) => Number.parseFloat(n));
-  return w && h ? w / h : null;
-}
-function Image({
-  data,
-  sizes = "100vw",
-  widths = DEFAULT_IMAGE_WIDTHS,
-  loader = defaultImageLoader,
-  priority = false,
-  aspectRatio,
-  alt,
-  loading,
-  decoding,
-  ...rest
-}) {
-  const ratio = parseRatio(aspectRatio) ?? (data.width && data.height ? data.width / data.height : null);
-  let candidates = [...widths].sort((a, b) => a - b);
-  if (data.width) {
-    const capped = candidates.filter((w) => w <= data.width);
-    candidates = capped.length ? capped : [data.width];
-  }
-  const srcSet = loader ? candidates.map((w) => `${loader(data.url, w, ratio ? Math.round(w / ratio) : void 0)} ${w}w`).join(", ") : void 0;
-  const width = data.width ?? candidates[candidates.length - 1];
-  const height = data.height ?? (ratio && width ? Math.round(width / ratio) : void 0);
-  return /* @__PURE__ */ jsx(
-    "img",
-    {
-      src: data.url,
-      alt: alt ?? data.alt ?? "",
-      ...srcSet ? { srcSet, sizes } : {},
-      ...width ? { width } : {},
-      ...height ? { height } : {},
-      loading: loading ?? (priority ? "eager" : "lazy"),
-      decoding: decoding ?? (priority ? "auto" : "async"),
-      ...priority ? { fetchPriority: "high" } : {},
-      ...rest
-    }
-  );
-}
-var VISUALLY_HIDDEN = {
-  position: "absolute",
-  width: 1,
-  height: 1,
-  padding: 0,
-  margin: -1,
-  overflow: "hidden",
-  clip: "rect(0, 0, 0, 0)",
-  whiteSpace: "nowrap",
-  border: 0
-};
-function ProductPrice({
-  product,
-  variant,
-  fromLabel = "Desde",
-  compareAtLabel = "Precio anterior",
-  locale,
-  withoutTrailingZeros,
-  ...rest
-}) {
-  let price = null;
-  let compareAt = null;
-  let isRange = false;
-  if (variant) {
-    price = variant.price;
-    compareAt = variant.compare_at_price;
-  } else if (product) {
-    price = product.price_range.min;
-    compareAt = product.compare_at_price_range?.min ?? null;
-    isRange = product.price_range.min.amount !== product.price_range.max.amount;
-  }
-  if (!price) return null;
-  const onSale = compareAt !== null && parseMoney(compareAt) > parseMoney(price);
-  const opts = { ...locale ? { locale } : {}, ...withoutTrailingZeros !== void 0 ? { withoutTrailingZeros } : {} };
-  return /* @__PURE__ */ jsxs("div", { "data-on-sale": onSale || void 0, ...rest, children: [
-    isRange ? /* @__PURE__ */ jsxs("span", { "data-price-prefix": "", children: [
-      fromLabel,
-      " "
-    ] }) : null,
-    /* @__PURE__ */ jsx(Money, { data: price, "data-price": "", ...opts }),
-    onSale && compareAt ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      " ",
-      /* @__PURE__ */ jsxs("s", { "data-compare-at-price": "", children: [
-        /* @__PURE__ */ jsxs("span", { style: VISUALLY_HIDDEN, children: [
-          compareAtLabel,
-          ": "
-        ] }),
-        /* @__PURE__ */ jsx(Money, { data: compareAt, ...opts })
-      ] })
-    ] }) : null
-  ] });
-}
 function toParams(input) {
   if (!input) return new URLSearchParams();
   return input instanceof URLSearchParams ? new URLSearchParams(input) : new URLSearchParams(input);
@@ -1336,6 +1183,6 @@ function NearestLocationForm({
   );
 }
 
-export { AddToCartButton, CART_COOKIE_NAME, CartProvider, DEFAULT_IMAGE_WIDTHS, DirectionsLink, Image, JsonLd, LocationList, LocationPicker, Money, NearestLocationForm, OpenStatus, PickupOption, ProductPrice, SELECTED_LOCATION_PARAM, SELECTED_LOCATION_STORAGE_KEY, SectionRegistry, Sections, StorefrontProvider, ThemeStyle, VariantSelector, breadcrumbJsonLd, collectionJsonLd, collectionMeta, createSectionRegistry, defaultImageLoader, defineSection, faqJsonLd, getCartIdFromCookie, isSafeCssValue, localBusinessJsonLd, openingHoursJsonLd, optimisticCart, organizationJsonLd, productJsonLd, productMeta, readCartCookie, readSelectedLocationId, resolveSectionProps, sectionJsonSchema, seoMeta, serializeCartCookie, serializeJsonLd, themeFontsHref, themeToCss, themeToCssVariables, toMerchandise, tokenName, useCart, useGeolocation, useNearestLocations, useOptionalCart, useOptionalStorefront, useProductOptions, useSelectedLocation, useStorefront, useStorefrontClient, writeCartCookie };
+export { AddToCartButton, CART_COOKIE_NAME, CartProvider, DirectionsLink, JsonLd, LocationList, LocationPicker, NearestLocationForm, OpenStatus, PickupOption, SELECTED_LOCATION_PARAM, SELECTED_LOCATION_STORAGE_KEY, SectionRegistry, Sections, ThemeStyle, VariantSelector, breadcrumbJsonLd, collectionJsonLd, collectionMeta, createSectionRegistry, defineSection, faqJsonLd, getCartIdFromCookie, isSafeCssValue, localBusinessJsonLd, openingHoursJsonLd, optimisticCart, organizationJsonLd, productJsonLd, productMeta, readCartCookie, readSelectedLocationId, resolveSectionProps, sectionJsonSchema, seoMeta, serializeCartCookie, serializeJsonLd, themeFontsHref, themeToCss, themeToCssVariables, toMerchandise, tokenName, useCart, useGeolocation, useNearestLocations, useOptionalCart, useProductOptions, useSelectedLocation, writeCartCookie };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map