@shopbb/helium 0.2.0 → 0.3.0-alpha.2

package/dist/components/CartProvider.js

@@ -0,0 +1,263 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * <CartProvider> + useCart()
+ *
+ * 接管 cart 全生命周期：
+ *   - 自动从 cookie 读取 cart_id 并 fetch
+ *   - 不存在则懒创建
+ *   - linesAdd / linesUpdate / linesRemove 全部带 optimistic update + 失败回滚
+ *   - subscribe(callback) 给外部（如 Analytics）订阅 cart 变化
+ *
+ * 用法：
+ *   <ShopProvider {...}>
+ *     <CartProvider>
+ *       <App />
+ *     </CartProvider>
+ *   </ShopProvider>
+ *
+ *   const { cart, status, linesAdd, linesUpdate, linesRemove } = useCart();
+ *
+ * 注意：必须套在 <ShopProvider> 内（依赖它的 storefrontAccessToken + apiUrl）。
+ */
+import * as React from 'react';
+import { useShop } from './ShopProvider';
+const CartContext = React.createContext(null);
+// ============================================================
+// GraphQL
+// ============================================================
+const CART_FRAGMENT = /* GraphQL */ `
+  fragment CartParts on Cart {
+    id totalQuantity checkoutUrl
+    lines(first: 100) {
+      nodes {
+        id quantity
+        merchandise {
+          ... on ProductVariant {
+            id title
+            image { url altText width height }
+            price { amount currencyCode }
+            product { title handle }
+          }
+        }
+        cost { totalAmount { amount currencyCode } }
+      }
+    }
+    cost {
+      subtotalAmount { amount currencyCode }
+      totalAmount { amount currencyCode }
+    }
+  }
+`;
+const Q_GET_CART = CART_FRAGMENT + `
+  query GetCart($id: ID!) { cart(id: $id) { ...CartParts } }
+`;
+const M_CART_CREATE = CART_FRAGMENT + `
+  mutation Create($input: CartInput) {
+    cartCreate(input: $input) { cart { ...CartParts } userErrors { field message code } }
+  }
+`;
+const M_LINES_ADD = CART_FRAGMENT + `
+  mutation Add($cartId: ID!, $lines: [CartLineInput!]!) {
+    cartLinesAdd(cartId: $cartId, lines: $lines) { cart { ...CartParts } userErrors { field message code } }
+  }
+`;
+const M_LINES_UPDATE = CART_FRAGMENT + `
+  mutation Update($cartId: ID!, $lines: [CartLineUpdateInput!]!) {
+    cartLinesUpdate(cartId: $cartId, lines: $lines) { cart { ...CartParts } userErrors { field message code } }
+  }
+`;
+const M_LINES_REMOVE = CART_FRAGMENT + `
+  mutation Remove($cartId: ID!, $lineIds: [ID!]!) {
+    cartLinesRemove(cartId: $cartId, lineIds: $lineIds) { cart { ...CartParts } userErrors { field message code } }
+  }
+`;
+// ============================================================
+// cookie cart id
+// ============================================================
+const COOKIE_NAME = 'cart';
+function readCartIdFromCookie() {
+    if (typeof document === 'undefined')
+        return null;
+    const m = document.cookie.match(new RegExp('(?:^|; )' + COOKIE_NAME + '=([^;]+)'));
+    if (!m)
+        return null;
+    return `gid://shopbb/Cart/${decodeURIComponent(m[1])}`;
+}
+function saveCartIdToCookie(cartGid) {
+    if (typeof document === 'undefined')
+        return;
+    const id = cartGid.replace(/^gid:\/\/shopbb\/Cart\//, '');
+    const oneYear = 365 * 24 * 60 * 60;
+    document.cookie = `${COOKIE_NAME}=${encodeURIComponent(id)}; path=/; max-age=${oneYear}; SameSite=Lax`;
+}
+export function CartProvider({ children, fetchOnMount = true }) {
+    const shop = useShop();
+    const [cart, setCart] = React.useState(null);
+    const [status, setStatus] = React.useState('uninitialized');
+    const [error, setError] = React.useState(null);
+    const listenersRef = React.useRef(new Set());
+    const gql = React.useCallback(async (query, variables) => {
+        const res = await fetch(shop.apiUrl, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-Storefront-Access-Token': shop.storefrontAccessToken,
+            },
+            body: JSON.stringify({ query, variables }),
+            credentials: 'include',
+        });
+        const json = await res.json();
+        if (json.errors)
+            throw new Error(json.errors[0]?.message || 'GraphQL error');
+        return json.data;
+    }, [shop.apiUrl, shop.storefrontAccessToken]);
+    const notifyListeners = React.useCallback((c) => {
+        for (const fn of listenersRef.current)
+            fn(c);
+    }, []);
+    // 应用新 cart 数据（state + 订阅者）
+    const applyCart = React.useCallback((next) => {
+        setCart(next);
+        notifyListeners(next);
+    }, [notifyListeners]);
+    // 保证有 cart_id，没有就创建
+    const ensureCartId = React.useCallback(async () => {
+        const cookieCartId = readCartIdFromCookie();
+        if (cookieCartId)
+            return cookieCartId;
+        const data = await gql(M_CART_CREATE, { input: { lines: [] } });
+        if (data.cartCreate.userErrors.length > 0) {
+            throw new Error(data.cartCreate.userErrors[0].message);
+        }
+        const newCart = data.cartCreate.cart;
+        saveCartIdToCookie(newCart.id);
+        applyCart(newCart);
+        return newCart.id;
+    }, [gql, applyCart]);
+    // 初始拉取
+    const refetch = React.useCallback(async () => {
+        setStatus('loading');
+        try {
+            const cookieCartId = readCartIdFromCookie();
+            if (!cookieCartId) {
+                applyCart(null);
+                setStatus('idle');
+                return;
+            }
+            const data = await gql(Q_GET_CART, { id: cookieCartId });
+            applyCart(data.cart);
+            setStatus('idle');
+        }
+        catch (err) {
+            setError(err?.message ?? String(err));
+            setStatus('error');
+        }
+    }, [gql, applyCart]);
+    React.useEffect(() => {
+        if (fetchOnMount && status === 'uninitialized') {
+            void refetch();
+        }
+    }, [fetchOnMount, status, refetch]);
+    // optimistic 包装
+    const runMutation = React.useCallback(async (optimisticCart, mutator) => {
+        const prev = cart;
+        if (optimisticCart)
+            applyCart(optimisticCart);
+        setStatus('updating');
+        try {
+            const result = await mutator();
+            if (result.userErrors && result.userErrors.length > 0) {
+                throw new Error(result.userErrors[0].message);
+            }
+            applyCart(result.cart);
+            setStatus('idle');
+            setError(null);
+        }
+        catch (err) {
+            applyCart(prev); // 回滚
+            setError(err?.message ?? String(err));
+            setStatus('error');
+            throw err;
+        }
+    }, [cart, applyCart]);
+    const linesAdd = React.useCallback(async (lines) => {
+        const cartId = await ensureCartId();
+        await runMutation(null, async () => {
+            const data = await gql(M_LINES_ADD, {
+                cartId,
+                lines: lines.map((l) => ({ merchandiseId: l.merchandiseId, quantity: l.quantity ?? 1 })),
+            });
+            return data.cartLinesAdd;
+        });
+    }, [ensureCartId, runMutation, gql]);
+    const linesUpdate = React.useCallback(async (lines) => {
+        // remove 走 remove
+        const toRemove = lines.filter((l) => l.quantity <= 0).map((l) => l.id);
+        const toUpdate = lines.filter((l) => l.quantity > 0);
+        // optimistic: 改 quantity
+        const optimistic = cart != null
+            ? {
+                ...cart,
+                lines: {
+                    ...cart.lines,
+                    nodes: cart.lines.nodes
+                        .map((ln) => {
+                        const upd = toUpdate.find((l) => l.id === ln.id);
+                        return upd ? { ...ln, quantity: upd.quantity } : ln;
+                    })
+                        .filter((ln) => !toRemove.includes(ln.id)),
+                },
+            }
+            : null;
+        const cartId = await ensureCartId();
+        await runMutation(optimistic, async () => {
+            if (toRemove.length > 0) {
+                await gql(M_LINES_REMOVE, { cartId, lineIds: toRemove });
+            }
+            if (toUpdate.length === 0) {
+                const data = await gql(Q_GET_CART, { id: cartId });
+                return { cart: data.cart, userErrors: [] };
+            }
+            const data = await gql(M_LINES_UPDATE, { cartId, lines: toUpdate });
+            return data.cartLinesUpdate;
+        });
+    }, [cart, ensureCartId, runMutation, gql]);
+    const linesRemove = React.useCallback(async (lineIds) => {
+        const optimistic = cart != null
+            ? {
+                ...cart,
+                lines: { ...cart.lines, nodes: cart.lines.nodes.filter((l) => !lineIds.includes(l.id)) },
+            }
+            : null;
+        const cartId = await ensureCartId();
+        await runMutation(optimistic, async () => {
+            const data = await gql(M_LINES_REMOVE, { cartId, lineIds });
+            return data.cartLinesRemove;
+        });
+    }, [cart, ensureCartId, runMutation, gql]);
+    const subscribe = React.useCallback((listener) => {
+        listenersRef.current.add(listener);
+        return () => {
+            listenersRef.current.delete(listener);
+        };
+    }, []);
+    const value = React.useMemo(() => ({ cart, status, error, linesAdd, linesUpdate, linesRemove, refetch, subscribe }), [cart, status, error, linesAdd, linesUpdate, linesRemove, refetch, subscribe]);
+    return _jsx(CartContext.Provider, { value: value, children: children });
+}
+/**
+ * 拿 cart context。Provider 外 throw。
+ */
+export function useCart() {
+    const v = React.useContext(CartContext);
+    if (!v)
+        throw new Error('useCart must be used inside <CartProvider>');
+    return v;
+}
+/**
+ * 非 throw 版本：Provider 外返回 null。
+ * 给可选 fallback 用，比如 <AddToCartButton> 在没 Provider 时退化到 props.onAdd。
+ */
+export function useCartOptional() {
+    return React.useContext(CartContext);
+}
+//# sourceMappingURL=CartProvider.js.map

package/dist/components/CartProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartProvider.js","sourceRoot":"","sources":["../../src/components/CartProvider.tsx"],"names":[],"mappings":"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"}

package/dist/components/Image.d.ts

@@ -0,0 +1,39 @@
+/**
+ * <Image> — 响应式商品图片
+ *
+ * 对齐 @shopify/hydrogen 的 <Image>：
+ *   - 自动生成 srcset（5 个分辨率档：375 / 750 / 1024 / 1536 / 1920）
+ *   - sizes 媒体查询
+ *   - loading="lazy" 默认（首屏可关）
+ *   - decoding="async"
+ *   - aspectRatio 占位（不抖）
+ *   - 自动 alt
+ *
+ * srcset 里的 url 通过 ?width= query 表达，服务端可忽略或接 cdn-cgi/image。
+ *
+ * 用法：
+ *   <Image data={{ url, altText, width, height }} sizes="(min-width: 768px) 50vw, 100vw" />
+ *   <Image data={...} aspectRatio="1/1" />
+ *   <Image data={...} loading="eager" />   // 首屏
+ */
+import * as React from 'react';
+export interface ImageData {
+    url: string;
+    altText?: string | null;
+    width?: number | null;
+    height?: number | null;
+}
+export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'srcSet' | 'loading'> {
+    /** 必传：图片对象 */
+    data: ImageData;
+    /** 媒体查询 sizes，例如 (min-width: 768px) 50vw, 100vw */
+    sizes?: string;
+    /** 强制宽高比，例如 '1/1' '4/3' '16/9' */
+    aspectRatio?: string;
+    /** lazy（默认） / eager（首屏图用） */
+    loading?: 'lazy' | 'eager';
+    /** 自定义 srcset 档位 */
+    widths?: number[];
+}
+export declare function Image(props: ImageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Image.d.ts.map

package/dist/components/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../src/components/Image.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC/G,cAAc;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAkBD,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,2CAmCtC"}

package/dist/components/Image.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// 默认 srcset 档位
+const DEFAULT_WIDTHS = [375, 750, 1024, 1536, 1920];
+/** 给 url 加 ?width=N query */
+function withWidth(url, width) {
+    try {
+        const u = new URL(url);
+        u.searchParams.set('width', String(width));
+        return u.toString();
+    }
+    catch {
+        // 不是绝对 URL，按相对路径处理
+        const sep = url.includes('?') ? '&' : '?';
+        return `${url}${sep}width=${width}`;
+    }
+}
+export function Image(props) {
+    const { data, sizes, aspectRatio, loading = 'lazy', widths = DEFAULT_WIDTHS, style, alt: altProp, ...rest } = props;
+    const srcset = widths.map((w) => `${withWidth(data.url, w)} ${w}w`).join(', ');
+    // src 用中间档位
+    const src = withWidth(data.url, widths[Math.floor(widths.length / 2)]);
+    const finalStyle = {
+        ...(aspectRatio ? { aspectRatio, objectFit: 'cover' } : null),
+        ...style,
+    };
+    return (_jsx("img", { ...rest, src: src, srcSet: srcset, sizes: sizes, alt: altProp ?? data.altText ?? '', loading: loading, decoding: "async", width: data.width || undefined, height: data.height || undefined, style: finalStyle }));
+}
+//# sourceMappingURL=Image.js.map

package/dist/components/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../src/components/Image.tsx"],"names":[],"mappings":";AAyCA,eAAe;AACf,MAAM,cAAc,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AAEpD,6BAA6B;AAC7B,SAAS,SAAS,CAAC,GAAW,EAAE,KAAa;IAC3C,IAAI,CAAC;QACH,MAAM,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;QACvB,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QAC3C,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC;IACtB,CAAC;IAAC,MAAM,CAAC;QACP,mBAAmB;QACnB,MAAM,GAAG,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;QAC1C,OAAO,GAAG,GAAG,GAAG,GAAG,SAAS,KAAK,EAAE,CAAC;IACtC,CAAC;AACH,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,EACJ,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,GAAG,MAAM,EAChB,MAAM,GAAG,cAAc,EACvB,KAAK,EACL,GAAG,EAAE,OAAO,EACZ,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/E,YAAY;IACZ,MAAM,GAAG,GAAG,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAEvE,MAAM,UAAU,GAAwB;QACtC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,OAAgB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QACtE,GAAG,KAAK;KACT,CAAC;IAEF,OAAO,CACL,iBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,OAAO,IAAI,IAAI,CAAC,OAAO,IAAI,EAAE,EAClC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAC,OAAO,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS,EAC9B,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,SAAS,EAChC,KAAK,EAAE,UAAU,GACjB,CACH,CAAC;AACJ,CAAC"}

package/dist/components/Money.d.ts

@@ -0,0 +1,41 @@
+/**
+ * <Money> — 货币格式化
+ *
+ * 对齐 @shopify/hydrogen 的 <Money>。
+ * - 自动按 currencyCode + locale 用 Intl.NumberFormat 格式化
+ * - 支持 withoutCurrency / withoutTrailingZeros
+ * - 支持 as 渲染成任意元素（默认 <span>）
+ * - 支持 measurement（unit price，例如 ¥9.99/100g）
+ *
+ * 用法：
+ *   <Money data={{ amount: '9.99', currencyCode: 'CNY' }} />
+ *   <Money data={{ ... }} withoutCurrency />
+ *   <Money data={{ ... }} as="div" measurement={{ referenceUnit: 'kg', quantity: 0.1 }} />
+ */
+import * as React from 'react';
+export interface MoneyData {
+    amount: string;
+    currencyCode: string;
+}
+export interface MoneyMeasurement {
+    /** 比如 'kg' / '100g' / 'l' */
+    referenceUnit: string;
+    /** 比如 0.1 表示每 100g */
+    quantity?: number;
+}
+export interface MoneyProps extends React.HTMLAttributes<HTMLElement> {
+    /** 必传：金额对象 */
+    data: MoneyData;
+    /** 不显示货币符号，只显示数字 */
+    withoutCurrency?: boolean;
+    /** 整数时不显示 .00 */
+    withoutTrailingZeros?: boolean;
+    /** locale 字符串（zh-CN / en-US / ...）。默认按 currencyCode 推断 */
+    locale?: string;
+    /** 渲染元素，默认 span */
+    as?: keyof JSX.IntrinsicElements;
+    /** unit price：渲染 ¥99.00/100g */
+    measurement?: MoneyMeasurement;
+}
+export declare function Money(props: MoneyProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Money.d.ts.map

package/dist/components/Money.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Money.d.ts","sourceRoot":"","sources":["../../src/components/Money.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,6BAA6B;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACnE,cAAc;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,oBAAoB;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB;IACjB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;IACjC,gCAAgC;IAChC,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAChC;AAYD,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,2CAwDtC"}

package/dist/components/Money.js

@@ -0,0 +1,53 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { useShopOptional } from './ShopProvider';
+// currencyCode → 默认 locale 推断
+const DEFAULT_LOCALE_BY_CURRENCY = {
+    CNY: 'zh-CN',
+    USD: 'en-US',
+    EUR: 'de-DE',
+    GBP: 'en-GB',
+    JPY: 'ja-JP',
+    KRW: 'ko-KR',
+};
+export function Money(props) {
+    const { data, withoutCurrency, withoutTrailingZeros, locale: localeProp, as, measurement, ...rest } = props;
+    const Tag = as || 'span';
+    const shop = useShopOptional();
+    const locale = localeProp ||
+        shop?.locale ||
+        DEFAULT_LOCALE_BY_CURRENCY[data.currencyCode] ||
+        'en-US';
+    const amount = Number(data.amount);
+    let formatted;
+    try {
+        const opts = withoutCurrency
+            ? {
+                minimumFractionDigits: withoutTrailingZeros && Number.isInteger(amount) ? 0 : 2,
+                maximumFractionDigits: 2,
+            }
+            : {
+                style: 'currency',
+                currency: data.currencyCode,
+                minimumFractionDigits: withoutTrailingZeros && Number.isInteger(amount) ? 0 : 2,
+                maximumFractionDigits: 2,
+            };
+        formatted = new Intl.NumberFormat(locale, opts).format(amount);
+    }
+    catch {
+        // Fallback：Intl 不支持的 currencyCode
+        formatted = withoutCurrency ? amount.toFixed(2) : `${data.currencyCode} ${amount.toFixed(2)}`;
+    }
+    // measurement suffix（unit price）
+    let suffix = '';
+    if (measurement) {
+        const q = measurement.quantity ?? 1;
+        if (q === 1) {
+            suffix = `/${measurement.referenceUnit}`;
+        }
+        else {
+            suffix = `/${q}${measurement.referenceUnit}`;
+        }
+    }
+    return (_jsxs(Tag, { ...rest, "data-money": data.amount, "data-money-currency": data.currencyCode, children: [formatted, suffix] }));
+}
+//# sourceMappingURL=Money.js.map

package/dist/components/Money.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Money.js","sourceRoot":"","sources":["../../src/components/Money.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AA6BjD,8BAA8B;AAC9B,MAAM,0BAA0B,GAA2B;IACzD,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;CACb,CAAC;AAEF,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,EACJ,IAAI,EACJ,eAAe,EACf,oBAAoB,EACpB,MAAM,EAAE,UAAU,EAClB,EAAE,EACF,WAAW,EACX,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,GAAG,GAAQ,EAAE,IAAI,MAAM,CAAC;IAC9B,MAAM,IAAI,GAAG,eAAe,EAAE,CAAC;IAC/B,MAAM,MAAM,GACV,UAAU;QACV,IAAI,EAAE,MAAM;QACZ,0BAA0B,CAAC,IAAI,CAAC,YAAY,CAAC;QAC7C,OAAO,CAAC;IACV,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAEnC,IAAI,SAAiB,CAAC;IACtB,IAAI,CAAC;QACH,MAAM,IAAI,GAA6B,eAAe;YACpD,CAAC,CAAC;gBACE,qBAAqB,EAAE,oBAAoB,IAAI,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC/E,qBAAqB,EAAE,CAAC;aACzB;YACH,CAAC,CAAC;gBACE,KAAK,EAAE,UAAU;gBACjB,QAAQ,EAAE,IAAI,CAAC,YAAY;gBAC3B,qBAAqB,EAAE,oBAAoB,IAAI,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC/E,qBAAqB,EAAE,CAAC;aACzB,CAAC;QACN,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACjE,CAAC;IAAC,MAAM,CAAC;QACP,kCAAkC;QAClC,SAAS,GAAG,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,YAAY,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAChG,CAAC;IAED,iCAAiC;IACjC,IAAI,MAAM,GAAG,EAAE,CAAC;IAChB,IAAI,WAAW,EAAE,CAAC;QAChB,MAAM,CAAC,GAAG,WAAW,CAAC,QAAQ,IAAI,CAAC,CAAC;QACpC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YACZ,MAAM,GAAG,IAAI,WAAW,CAAC,aAAa,EAAE,CAAC;QAC3C,CAAC;aAAM,CAAC;YACN,MAAM,GAAG,IAAI,CAAC,GAAG,WAAW,CAAC,aAAa,EAAE,CAAC;QAC/C,CAAC;IACH,CAAC;IAED,OAAO,CACL,MAAC,GAAG,OAAK,IAAI,gBAAc,IAAI,CAAC,MAAM,yBAAuB,IAAI,CAAC,YAAY,aAC3E,SAAS,EACT,MAAM,IACH,CACP,CAAC;AACJ,CAAC"}

package/dist/components/ProductOptionsProvider.d.ts

@@ -0,0 +1,70 @@
+/**
+ * <ProductOptionsProvider> + useProductOptions()
+ *
+ * 给商品详情页用。包住 product 后，自动管理 selectedVariantId 状态 +
+ * 暴露当前 variant、available options、setOption 等。
+ *
+ * 用法：
+ *   <ProductOptionsProvider product={product}>
+ *     <ProductDetailBody />
+ *   </ProductOptionsProvider>
+ *
+ *   function ProductDetailBody() {
+ *     const { selectedVariant, options, setOptionValue } = useProductOptions();
+ *     return ...;
+ *   }
+ */
+import * as React from 'react';
+interface SelectedOption {
+    name: string;
+    value: string;
+}
+interface ProductVariantLike {
+    id: string;
+    availableForSale: boolean;
+    selectedOptions?: SelectedOption[];
+    price?: {
+        amount: string;
+        currencyCode: string;
+    };
+    compareAtPrice?: {
+        amount: string;
+        currencyCode: string;
+    } | null;
+}
+interface ProductLike {
+    id: string;
+    options?: Array<{
+        name: string;
+        values: string[];
+    }>;
+    variants: {
+        nodes: ProductVariantLike[];
+    };
+}
+export interface ProductOptionItem {
+    name: string;
+    values: Array<{
+        value: string;
+        available: boolean;
+        isSelected: boolean;
+    }>;
+}
+export interface ProductOptionsContextValue {
+    product: ProductLike;
+    selectedVariant: ProductVariantLike | null;
+    selectedOptions: Record<string, string>;
+    options: ProductOptionItem[];
+    setOptionValue: (name: string, value: string) => void;
+    setVariantById: (variantId: string) => void;
+}
+export interface ProductOptionsProviderProps {
+    product: ProductLike;
+    /** 初始 selectedVariantId；默认第一个可购 variant */
+    initialVariantId?: string;
+    children: React.ReactNode;
+}
+export declare function ProductOptionsProvider(props: ProductOptionsProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useProductOptions(): ProductOptionsContextValue;
+export {};
+//# sourceMappingURL=ProductOptionsProvider.d.ts.map

package/dist/components/ProductOptionsProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductOptionsProvider.d.ts","sourceRoot":"","sources":["../../src/components/ProductOptionsProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,UAAU,cAAc;IAAG,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;CAAE;AAEzD,UAAU,kBAAkB;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,KAAK,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,YAAY,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,cAAc,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,YAAY,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CAClE;AAED,UAAU,WAAW;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,CAAC;IACpD,QAAQ,EAAE;QAAE,KAAK,EAAE,kBAAkB,EAAE,CAAA;KAAE,CAAC;CAC3C;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,OAAO,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CAC3E;AAED,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,WAAW,CAAC;IACrB,eAAe,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAC3C,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAID,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,WAAW,CAAC;IACrB,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,2CAoFxE;AAED,wBAAgB,iBAAiB,IAAI,0BAA0B,CAI9D"}

package/dist/components/ProductOptionsProvider.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * <ProductOptionsProvider> + useProductOptions()
+ *
+ * 给商品详情页用。包住 product 后，自动管理 selectedVariantId 状态 +
+ * 暴露当前 variant、available options、setOption 等。
+ *
+ * 用法：
+ *   <ProductOptionsProvider product={product}>
+ *     <ProductDetailBody />
+ *   </ProductOptionsProvider>
+ *
+ *   function ProductDetailBody() {
+ *     const { selectedVariant, options, setOptionValue } = useProductOptions();
+ *     return ...;
+ *   }
+ */
+import * as React from 'react';
+const Ctx = React.createContext(null);
+export function ProductOptionsProvider(props) {
+    const { product, initialVariantId, children } = props;
+    const variants = product.variants.nodes;
+    const findDefault = React.useCallback(() => {
+        if (initialVariantId) {
+            const found = variants.find((v) => v.id === initialVariantId);
+            if (found)
+                return found;
+        }
+        return variants.find((v) => v.availableForSale) ?? variants[0] ?? null;
+    }, [initialVariantId, variants]);
+    const [selectedVariantId, setSelectedVariantId] = React.useState(findDefault()?.id ?? null);
+    React.useEffect(() => {
+        setSelectedVariantId(findDefault()?.id ?? null);
+    }, [findDefault]);
+    const selectedVariant = variants.find((v) => v.id === selectedVariantId) ?? null;
+    const selectedOptions = React.useMemo(() => {
+        const m = {};
+        for (const so of selectedVariant?.selectedOptions ?? [])
+            m[so.name] = so.value;
+        return m;
+    }, [selectedVariant]);
+    const options = React.useMemo(() => {
+        const dimMap = new Map();
+        // 收集所有 option 维度
+        if (product.options?.length) {
+            for (const opt of product.options) {
+                dimMap.set(opt.name, new Set(opt.values));
+            }
+        }
+        else {
+            for (const v of variants) {
+                for (const so of v.selectedOptions ?? []) {
+                    if (!dimMap.has(so.name))
+                        dimMap.set(so.name, new Set());
+                    dimMap.get(so.name).add(so.value);
+                }
+            }
+        }
+        return Array.from(dimMap.entries()).map(([name, vals]) => ({
+            name,
+            values: Array.from(vals).map((v) => ({
+                value: v,
+                available: variants.some((variant) => variant.availableForSale &&
+                    variant.selectedOptions?.some((so) => so.name === name && so.value === v)),
+                isSelected: selectedOptions[name] === v,
+            })),
+        }));
+    }, [product, variants, selectedOptions]);
+    const setOptionValue = React.useCallback((name, value) => {
+        const next = { ...selectedOptions, [name]: value };
+        // 找匹配 variant
+        const target = variants.find((v) => Object.entries(next).every(([n, val]) => v.selectedOptions?.some((so) => so.name === n && so.value === val)));
+        if (target)
+            setSelectedVariantId(target.id);
+    }, [selectedOptions, variants]);
+    const setVariantById = React.useCallback((id) => setSelectedVariantId(id), []);
+    const value = {
+        product,
+        selectedVariant,
+        selectedOptions,
+        options,
+        setOptionValue,
+        setVariantById,
+    };
+    return _jsx(Ctx.Provider, { value: value, children: children });
+}
+export function useProductOptions() {
+    const v = React.useContext(Ctx);
+    if (!v)
+        throw new Error('useProductOptions must be used inside <ProductOptionsProvider>');
+    return v;
+}
+//# sourceMappingURL=ProductOptionsProvider.js.map

package/dist/components/ProductOptionsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductOptionsProvider.js","sourceRoot":"","sources":["../../src/components/ProductOptionsProvider.tsx"],"names":[],"mappings":"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"}