@haus-storefront-react/order-lines 0.0.1

package/index.css

@@ -0,0 +1 @@
+._icon_qkmq5_1{width:var(--icon-width, 24px);height:var(--icon-height, 24px);display:var(--icon-display, inline-flex);align-items:center;flex:0 0 auto}._icon_qkmq5_1._spin_qkmq5_8{animation:_spin_qkmq5_8 1s linear infinite}@keyframes _spin_qkmq5_8{0%{transform:rotate(0)}to{transform:rotate(359deg)}}._button_pv27b_1{box-sizing:content-box;display:var(--button-display, inline-flex);flex-direction:var(--button-flex-direction, row);align-items:var(--button-align-items, center);justify-content:var(--button-justify-content, center);gap:var(--button-gap, var(--ec-spacing-xxs, 4px));width:var(--button-width, fit-content);max-width:var(--button-max-width, calc(100% - 32px) );max-height:var(--button-max-height, inherit);min-width:var(--button-min-width, fit-content);min-height:var(--button-min-height, fit-content);height:var(--button-height, fit-content);padding:var(--button-padding, var(--ec-spacing-xxs, 4px) var(--ec-spacing-sm, 16px));border:var(--button-border, 1px solid var(--button-background-color, #b3d6cd));border-radius:var(--button-border-radius, var(--ec-border-radius-sm, 8px));color:var(--button-color, var(--ec-font-color, #000));font-size:var(--button-font-size, 14px);background-color:var(--button-background-color, var(--ec-primary-color, #b3d6cd));transition:var(--button-transition, var(--ec-transition-ease-in-out));text-decoration:var(--button-text-decoration, none);font-family:var(--button-font-family, inherit);font-weight:var(--button-font-weight, inherit);--spinner-margin: 0}._button_pv27b_1:hover{cursor:pointer;background-color:var(--button-background-color-hover, var(--ec-primary-color-300, #8bbdb2))}._button_pv27b_1:focus:not(:focus-visible){outline:none}._button_pv27b_1:disabled{cursor:not-allowed;opacity:.5}._btnIcon_pv27b_38{width:var(--button-icon-width, 24px);height:var(--button-icon-height, 24px);display:flex;align-items:center;justify-content:center}._btnIcon_pv27b_38 svg{width:100%;height:100%}

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/order-lines';
+export * from './lib/use-order-lines-props';

package/index.mjs

@@ -0,0 +1,6 @@
+import { O as s, a, u as o } from "./index-Bkhe0b4T.mjs";
+export {
+  s as OrderLines,
+  a as createOrderLinesScope,
+  o as useOrderLinesProps
+};

package/lib/order-lines.d.ts

@@ -0,0 +1,196 @@
+import { OrderLine, CurrencyCode, Price as PriceType, AsChildProps } from '@haus-storefront-react/shared-types';
+import { Scope } from '@haus-storefront-react/common-utils';
+import { ButtonHTMLAttributes, ImgHTMLAttributes } from 'react';
+import { UseOrderLinesResult } from './use-order-lines-props';
+import * as React from 'react';
+type ScopedProps<P> = P & {
+    __scopeOrderLines?: Scope;
+};
+declare const createOrderLinesScope: {
+    (): (scope: Scope) => {
+        [x: string]: {
+            [x: string]: React.Context<any>[] | React.Context<React.Context<any>>[];
+        };
+    };
+    scopeName: string;
+};
+type OrderLinesContextValue = UseOrderLinesResult & {
+    isAdjustable: boolean;
+    isRemovable: boolean;
+};
+interface OrderLinesRootProps {
+    children?: (props: OrderLinesContextValue) => React.ReactNode;
+    orderCode?: string;
+    adjustable?: boolean;
+    removable?: boolean;
+}
+interface OrderLineItemProps {
+    children?: React.ReactNode;
+    orderLine: OrderLine;
+}
+interface OrderLineImageProps extends ImgHTMLAttributes<HTMLImageElement>, AsChildProps {
+    alt?: string;
+}
+interface OrderLineRemoveProps extends ButtonHTMLAttributes<HTMLButtonElement>, AsChildProps {
+}
+interface OrderLineQuantityProps extends AsChildProps {
+    min?: number;
+    max?: number;
+    step?: number;
+}
+interface OrderLinesPriceProps {
+    children?: (props: {
+        price: PriceType;
+        priceWithTax: PriceType;
+        currencyCode: CurrencyCode;
+        isPromotion: boolean;
+        isCampaign: boolean;
+        isFromPrice: boolean;
+        ordinaryPrice?: PriceType;
+    }) => React.ReactNode;
+    withDiscountPrice?: boolean;
+}
+/**
+ * OrderLines is a headless component for managing order lines in a cart or order.
+ * It provides functionality for displaying, adjusting quantities, and removing items.
+ *
+ * @example
+ * ```tsx
+ * <OrderLines.Root>
+ *   {({ data: orderLines }) => (
+ *     orderLines?.map((line) => (
+ *       <OrderLines.Item key={line.id} orderLine={line}>
+ *         <OrderLines.Image />
+ *         <OrderLines.Price>
+ *           {({ price, currencyCode, isFromPrice }) => (
+ *             <div>
+ *               {isFromPrice ? 'From ' : ''}
+ *               <Price price={price} currencyCode={currencyCode} />
+ *             </div>
+ *           )}
+ *         </OrderLines.Price>
+ *         <OrderLines.Quantity>
+ *           <OrderLines.Quantity.Decrement>-</OrderLines.Quantity.Decrement>
+ *           <OrderLines.Quantity.Input />
+ *           <OrderLines.Quantity.Increment>+</OrderLines.Quantity.Increment>
+ *         </OrderLines.Quantity>
+ *         <OrderLines.Remove>Remove</OrderLines.Remove>
+ *       </OrderLines.Item>
+ *     ))
+ *   )}
+ * </OrderLines.Root>
+ * ```
+ */
+export declare const OrderLines: {
+    /**
+     * Root component for OrderLines. Provides context for all child components.
+     *
+     * @param props.orderCode - Optional order code for fetching specific order
+     * @param props.adjustable - Whether quantities can be adjusted (default: true)
+     * @param props.removable - Whether items can be removed (default: true)
+     * @param props.children - Render prop that receives order lines data and functions
+     */
+    Root: {
+        ({ children, orderCode, adjustable, removable, __scopeOrderLines, }: ScopedProps<OrderLinesRootProps>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * Item component for a single order line. Must be used within OrderLines.Root.
+     *
+     * @param props.orderLine - The order line data to display
+     */
+    Item: {
+        ({ children, orderLine, __scopeOrderLines, }: ScopedProps<OrderLineItemProps>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * Image component for displaying the order line's featured asset.
+     * Must be used within OrderLines.Item.
+     *
+     * @param props.alt - Optional alt text for the image
+     */
+    Image: {
+        ({ alt, asChild, __scopeOrderLines, ...props }: ScopedProps<OrderLineImageProps>): import("react/jsx-runtime").JSX.Element | null;
+        displayName: string;
+    };
+    /**
+     * Remove button component for removing an order line.
+     * Must be used within OrderLines.Item.
+     */
+    Remove: {
+        ({ children, asChild, __scopeOrderLines, ...props }: ScopedProps<OrderLineRemoveProps>): import("react/jsx-runtime").JSX.Element | null;
+        displayName: string;
+    };
+    /**
+     * Quantity buttons component for an order line.
+     * Must be used within OrderLines.Item.
+     *
+     * @param props.min - Minimum quantity (default: 1)
+     * @param props.max - Maximum quantity
+     * @param props.step - Step size for quantity changes (default: 1)
+     */
+    Quantity: {
+        Root: {
+            ({ children, min, max, step, __scopeOrderLines, }: ScopedProps<OrderLineQuantityProps>): import("react/jsx-runtime").JSX.Element | null;
+            displayName: string;
+        };
+        Decrement: {
+            ({ children, className, asChild, __scopeQuantityButtons, ...props }: import('@haus-storefront-react/common-ui').QuantityButtonsDecrementProps & {
+                __scopeQuantityButtons?: Scope;
+            }): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Input: {
+            ({ className, asChild, __scopeQuantityButtons, ...props }: import('@haus-storefront-react/common-ui').QuantityButtonsInputProps & {
+                __scopeQuantityButtons?: Scope;
+            }): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Increment: {
+            ({ children, className, asChild, __scopeQuantityButtons, ...props }: import('@haus-storefront-react/common-ui').QuantityButtonsIncrementProps & {
+                __scopeQuantityButtons?: Scope;
+            }): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Remove: ({ children, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+    };
+    /**
+     * Price component for an order line.
+     * Must be used within OrderLines.Item.
+     *
+     * @example
+     * ```tsx
+     * <OrderLines.Price>
+     *   {({ price, currencyCode, isFromPrice, isCampaign, ordinaryPrice }) => (
+     *     <div>
+     *       {isCampaign && ordinaryPrice && (
+     *         <div className="original-price">
+     *           <span price={ordinaryPrice} currencyCode={currencyCode} />
+     *         </div>
+     *       )}
+     *       <div className="current-price">
+     *         {isFromPrice ? 'From ' : ''}
+     *         <span price={price} currencyCode={currencyCode} />
+     *       </div>
+     *     </div>
+     *   )}
+     * </OrderLines.Price>
+     * ```
+     *
+     * @param props.withDiscountPrice - Whether to show discounted price
+     * @param props.children - Function that receives price information and returns React nodes:
+     *   - price: The current price
+     *   - priceWithTax: The current price with tax
+     *   - currencyCode: The currency code
+     *   - isPromotion: Whether the price is a promotion
+     *   - isCampaign: Whether the price is part of a campaign
+     *   - isFromPrice: Whether the price is a "from" price
+     *   - ordinaryPrice: The original price before campaign/promotion
+     */
+    Price: {
+        ({ children, withDiscountPrice, __scopeOrderLines, }: ScopedProps<OrderLinesPriceProps>): React.ReactNode;
+        displayName: string;
+    };
+};
+export { createOrderLinesScope };
+export type { OrderLinesRootProps, OrderLineItemProps, OrderLineImageProps, OrderLineRemoveProps, OrderLineQuantityProps, OrderLinesPriceProps, };

package/lib/use-order-lines-props.d.ts

@@ -0,0 +1,26 @@
+import { Maybe, OrderLine } from '@haus-storefront-react/shared-types';
+import { UseQueryResult } from '@tanstack/react-query';
+import { ButtonHTMLAttributes, InputHTMLAttributes } from 'react';
+export type UseOrderLinesResult = UseQueryResult<Maybe<OrderLine[]>, Error> & {
+    adjustOrderLine: (orderLineId: string, quantity: number) => Promise<unknown>;
+    removeOrderLine: (lineId: string) => Promise<unknown>;
+    adjustError: Error | null;
+    removeError: Error | null;
+    isAdjusting: boolean;
+    isRemoving: boolean;
+    getRemoveProps: (props?: Partial<ButtonHTMLAttributes<HTMLButtonElement>>) => ButtonHTMLAttributes<HTMLButtonElement>;
+    getAdjustProps: (props?: Partial<InputHTMLAttributes<HTMLInputElement>>) => InputHTMLAttributes<HTMLInputElement>;
+    getDecrementProps: (props?: Partial<ButtonHTMLAttributes<HTMLButtonElement>>) => ButtonHTMLAttributes<HTMLButtonElement>;
+    getIncrementProps: (props?: Partial<ButtonHTMLAttributes<HTMLButtonElement>>) => ButtonHTMLAttributes<HTMLButtonElement>;
+};
+interface UseOrderLinesOptions {
+    orderCode?: string;
+    adjustable?: boolean;
+    removable?: boolean;
+    fetchActiveOrder?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+export declare const useOrderLinesProps: ({ orderCode, adjustable, removable, fetchActiveOrder, min, max, step, }?: UseOrderLinesOptions) => UseOrderLinesResult;
+export {};

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@haus-storefront-react/order-lines",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  },
+  "dependencies": {
+    "@haus-storefront-react/common-ui": "0.0.1",
+    "@haus-storefront-react/common-utils": "0.0.1",
+    "@haus-storefront-react/core": "0.0.1",
+    "@haus-storefront-react/hooks": "0.0.1",
+    "@haus-storefront-react/shared-types": "0.0.1"
+  }
+}