@commercelayer/react-components 4.7.10 → 4.7.11

package/lib/esm/components/skus/AvailabilityContainer.d.ts

@@ -17,5 +17,18 @@ interface Props {
      */
     getQuantity?: (quantity: number) => void;
 }
+/**
+ * Main container for the Availability components.
+ * It stores - in its context - the sku quantity returned from the `inventory_model` and the `delivery_lead_time` for the first shipping method found in the inventory model.
+ *
+ * It can be used to fetch the quantities for a specific `sku_code` passed as prop.
+ * <span title='Requirements' type='warning'>
+ * Must be a child of the `<CommerceLayer>` component. <br/>
+ * Can be a child of the `<SkusContainer>` component and receive the `sku_code` from its context.
+ * </span>
+ * <span title='Children' type='info'>
+ * `<AvailabilityTemplate>`
+ * </span>
+ */
 export declare function AvailabilityContainer({ children, skuCode, skuId, getQuantity }: Props): JSX.Element;
 export default AvailabilityContainer;

package/lib/esm/components/skus/AvailabilityTemplate.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type TimeFormat, type ChildrenFunction } from '../../typings/index';
 import { type DeliveryLeadTime } from '../../reducers/AvailabilityReducer';
 interface AvailabilityTemplateChildrenProps extends Omit<Props, 'children'>, DeliveryLeadTime {
@@ -6,15 +7,16 @@ interface AvailabilityTemplateChildrenProps extends Omit<Props, 'children'>, Del
 }
 type FormatRules = {
     /**
-     * Set time format for shipping method
+     * Set time format for shipping method. When not set, ``delivery_lead_times`` will not be displayed.
+     * When set, `delivery_lead_times` for the first shipping method found in the inventory model, will be displayed in the format specified.
      */
     timeFormat?: TimeFormat;
     /**
-     * Show shipping method name
+     * Show shipping method name. Requires `timeFormat` to be set.
      */
     showShippingMethodName?: false;
     /**
-     * Show shipping method price
+     * Show shipping method price. Requires `timeFormat` to be set.
      */
     showShippingMethodPrice?: false;
 } | {
@@ -34,5 +36,17 @@ type Props = {
         negativeStock?: string;
     };
 } & Omit<JSX.IntrinsicElements['span'], 'children'> & FormatRules;
+/**
+ * The AvailabilityTemplate component displays the availability of the SKU specified
+ * in the parent `<AvailabilityContainer>` component.
+ *
+ * It is possible to customize the text displayed in case of `available`, `outOfStock` or `negativeStock.
+ * It is also possible to show delivery lead time and either shipping method name and/or price.
+ * This information will be retrieve from the first shipping method found in the inventory model.
+ *
+ * <span type="Requirement" type="info">
+ * It must to be used inside the `<AvailabilityContainer>` component.
+ * </span>
+ */
 export declare function AvailabilityTemplate(props: Props): JSX.Element;
 export default AvailabilityTemplate;

package/lib/esm/components/skus/DeliveryLeadTime.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type DeliveryLeadTimeField = 'min_hours' | 'max_hours' | 'min_days' | 'max_days';
 export type DeliveryLeadTimeComponentChildren = Omit<Props, 'children'>;
 type Props = Partial<JSX.IntrinsicElements['span']> & {

package/lib/esm/components/skus/SkuField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ConditionalElement } from '../../typings/index';
 import { type TGenericChildrenProps, type TResources } from '../utils/GenericFieldComponent';
 type SkuFieldChildrenProps = TGenericChildrenProps<TResources['Sku']>;
@@ -6,8 +7,19 @@ type Props = {
     children?: (props: SkuFieldChildrenProps) => JSX.Element;
 } & TCondition;
 /**
- * @param props {@link Props}
- * @returns
+ * The SkuField component displays any attribute of the `sku` specified in the parent `<SkusContainer>` component.
+ *
+ * It also accepts a `tagElement` props to enable specific tag-related props.
+ * For examples, when `tagElement` is set to `img` it will also accept props related to `<img>` tag such as `height` and `width`.
+ *
+ * <span title="Requirement" type="warning">
+ * It must to be used inside the `<SkusContainer>` component.
+ * </span>
+ *
+ * <span title="Fields" type="info">
+ * Check the `skus` resource from our [Core API documentation](https://docs.commercelayer.io/core/v/api-reference/skus/object)
+ * for more details about the available attributes to render.
+ * </span>
  */
 export declare function SkuField<P extends Props>(props: P): JSX.Element;
 export default SkuField;

package/lib/esm/components/skus/Skus.d.ts

@@ -2,5 +2,17 @@ import { type ReactNode } from 'react';
 interface Props {
     children: ReactNode;
 }
+/**
+ * The `Skus` components loop through the list of `skus` found in `SkusContainer` context and render the children filled with the proper sku value.
+ * This means that the children will be rendered as many times as the number of skus found in the `skus` prop array
+ * and there is no need to manually loop through them from your consumer app.
+ *
+ * <span title='Requirements' type='warning'>
+ * Must be a child of the `<SkusContainer>` component.
+ * </span>
+ * <span title='Children' type='info'>
+ * `<SkuField>`, `<AvailabilityContainer>`
+ * </span>
+ */
 export declare function Skus<P extends Props>({ children }: P): JSX.Element;
 export default Skus;

package/lib/esm/components/skus/SkusContainer.d.ts

@@ -6,7 +6,7 @@ interface Props {
      */
     skus: string[];
     /**
-     * Accept a React node, [Skus](./Skus.d.ts), and [ItemContainer](../ItemContainer.d.ts)  as children to display above the skus.
+     * Accept a React node and [Skus](./Skus.d.ts) component as children to display above the skus.
      */
     children: ReactNode;
     /**
@@ -14,5 +14,18 @@ interface Props {
      */
     queryParams?: QueryParamsList;
 }
+/**
+ * Main container for the SKUs components.
+ * It stores - in its context - the details for each `sku` defined in the `skus` prop array.
+ *
+ * It also accept a `queryParams` prop to refine pagination, sorting, filtering and includes for the fetch request.
+ *
+ * <span title='Requirements' type='warning'>
+ * Must be a child of the `<CommerceLayer>` component.
+ * </span>
+ * <span title='Children' type='info'>
+ * `<Skus>`
+ * </span>
+ */
 export declare function SkusContainer<P extends Props>(props: P): JSX.Element;
 export default SkusContainer;

package/lib/esm/components/stock_transfers/StockTransfer.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { DefaultChildrenType } from '../../typings/globals';
 interface Props {
     children: DefaultChildrenType;

package/lib/esm/components/stock_transfers/StockTransferField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ConditionalElement } from '../../typings/index';
 import { type TGenericChildrenProps, type TResources } from '../utils/GenericFieldComponent';
 type StockTransferFieldChildrenProps = TGenericChildrenProps<TResources['StockTransfer']>;

package/lib/esm/components/utils/AddressCardsTemplate.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { Address } from '@commercelayer/sdk';
 import AddressChildrenContext from '../../context/AddressChildrenContext';
 import { type ChildrenFunction } from '../../typings/index';

package/lib/esm/components/utils/BaseOrderPrice.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type PropsType } from '../../utils/PropsType';
 import { type baseOrderPricePropTypes } from '../../typings/index';
 export type BaseOrderPriceProps = PropsType<typeof baseOrderPricePropTypes, unknown> & Omit<JSX.IntrinsicElements['span'], 'children'>;

package/lib/esm/components/utils/GenericFieldComponent.d.ts

@@ -44,7 +44,13 @@ type GenericContext<K extends keyof ResourceContext> = Context<ResourceContext[K
 interface Props<E extends TResources[keyof TResources]> {
     children?: (props: TGenericChildrenProps<E>) => JSX.Element;
     resource: E['resource'];
+    /**
+     * Resource attribute to display.
+     */
     attribute: keyof E;
+    /**
+     * Html tag to render. When tag is `img` the value will be used to fill the `src` attribute.
+     */
     tagElement: keyof JSX.IntrinsicElements;
     context: GenericContext<E['resource']>;
 }

package/lib/esm/components/utils/PaymentCardsTemplate.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type PaymentResource } from '../../reducers/PaymentMethodReducer';
 import PaymentSourceContext, { type IconBrand } from '../../context/PaymentSourceContext';
 import { type ChildrenFunction } from '../../typings/index';

package/lib/esm/components/utils/PriceTemplate.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type PriceProps } from '../prices/Price';
 export type PTemplateProps = {
     formattedAmount?: string;

package/lib/esm/components/utils/getAllErrors.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type LineItem } from '@commercelayer/sdk';
 import { type BaseError } from '../../typings/errors';
 import { type TResourceError } from '../errors/Errors';

package/lib/esm/typings/globals.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type DefaultChildrenType = JSX.Element[] | JSX.Element | null;
 type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
 export type TRange<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;

package/lib/esm/utils/filterChildren.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type DefaultChildrenType } from '../typings/globals';
 interface Props<T> {
     children: DefaultChildrenType;

package/lib/esm/utils/getLoaderComponent.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { type LoaderType } from '../typings/index';
 export default function getLoaderComponent(loader: LoaderType): JSX.Element;

package/lib/esm/utils/getPrices.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type Price } from '@commercelayer/sdk';
 import { type PTemplateProps } from '../components/utils/PriceTemplate';
 export declare function getPriceByCode(skuPrices: Price[], code?: string): Price | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/react-components",
-  "version": "4.7.10",
+  "version": "4.7.11",
   "description": "The Official Commerce Layer React Components",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",