@develemit/storefront 0.0.0-stage → 0.3.0

package/dist/index.js

@@ -0,0 +1,686 @@
+"use client";
+import { n as e, t } from "./sort-for-display-Cj6GMeCY.js";
+import { createContext as n, useCallback as r, useContext as i, useEffect as a, useMemo as o, useReducer as s, useRef as c, useState as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { cartLineSchema as p } from "@develemit/commerce-contracts";
+// src/lib/theme.ts
+var m = {
+	colorBg: "--sf-color-bg",
+	colorSurface: "--sf-color-surface",
+	colorFg: "--sf-color-fg",
+	colorMuted: "--sf-color-muted",
+	colorAccent: "--sf-color-accent",
+	colorAccentFg: "--sf-color-accent-fg",
+	colorBorder: "--sf-color-border",
+	colorSold: "--sf-color-sold",
+	radius: "--sf-radius",
+	fontDisplay: "--sf-font-display",
+	fontBody: "--sf-font-body",
+	spaceUnit: "--sf-space-unit"
+};
+function h(e) {
+	let t = {};
+	for (let n of Object.keys(m)) {
+		let r = e[n];
+		r !== void 0 && (t[m[n]] = r);
+	}
+	return t;
+}
+// src/lib/provider.tsx
+var g = {
+	renderLink: ({ href: e, children: t, className: n }) => /* @__PURE__ */ d("a", {
+		href: e,
+		className: n,
+		children: t
+	}),
+	renderImage: ({ src: e, alt: t, sizes: n, className: r, priority: i }) => /* @__PURE__ */ d("img", {
+		src: e,
+		alt: t,
+		sizes: n,
+		className: r,
+		loading: i ? "eager" : "lazy",
+		decoding: "async",
+		fetchPriority: i ? "high" : void 0
+	}),
+	locale: "en-US",
+	hrefs: {
+		product: (e) => `/shop/${e}`,
+		category: (e) => `/shop?category=${e}`
+	}
+}, _ = n(g);
+function v({ children: e, hrefs: t, ...n }) {
+	let r = {
+		...g,
+		...n,
+		hrefs: {
+			...g.hrefs,
+			...t
+		}
+	};
+	return /* @__PURE__ */ d(_.Provider, {
+		value: r,
+		children: e
+	});
+}
+function y() {
+	return i(_);
+}
+// src/components/price-tag/price-tag.tsx
+function b({ priceCents: t, currency: n, sold: r = !1, className: i }) {
+	let { locale: a } = y(), o = [
+		"sf-price",
+		r && "sf-price--sold",
+		i
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ d("span", {
+		className: o,
+		children: e(t, n, a)
+	});
+}
+// src/components/availability-badge/availability-badge.tsx
+var x = {
+	oneOfAKind: "One of a kind",
+	sold: "Sold",
+	reserved: "On hold",
+	available: "Available"
+};
+function S({ availability: e, quantity: t, labels: n, className: r }) {
+	let i = {
+		...x,
+		...n
+	}, a, o;
+	e === "sold" ? (a = "sold", o = i.sold) : e === "reserved" ? (a = "reserved", o = i.reserved) : t === 1 ? (a = "unique", o = i.oneOfAKind) : (a = "available", o = i.available);
+	let s = [
+		"sf-badge",
+		`sf-badge--${a}`,
+		r
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ d("span", {
+		role: "status",
+		className: s,
+		children: o
+	});
+}
+// src/components/product-card/product-card.tsx
+function C({ product: e, labels: t, sizes: n, priority: r }) {
+	let { renderLink: i, renderImage: a, hrefs: o } = y(), s = e.availability === "sold", c = e.images[0], l = ["sf-card", s && "sf-card--sold"].filter(Boolean).join(" ");
+	return /* @__PURE__ */ d("article", {
+		className: l,
+		children: i({
+			href: o.product(e.slug),
+			className: "sf-card__link",
+			children: /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("div", {
+				className: "sf-card__media",
+				children: c ? a({
+					src: c.url,
+					alt: c.alt,
+					sizes: n,
+					className: "sf-card__image",
+					priority: r
+				}) : /* @__PURE__ */ d("div", {
+					className: "sf-card__placeholder",
+					"aria-hidden": "true"
+				})
+			}), /* @__PURE__ */ f("div", {
+				className: "sf-card__body",
+				children: [
+					/* @__PURE__ */ d("h3", {
+						className: "sf-card__title",
+						children: e.name
+					}),
+					/* @__PURE__ */ d(b, {
+						priceCents: e.priceCents,
+						currency: e.currency,
+						sold: s
+					}),
+					/* @__PURE__ */ d(S, {
+						availability: e.availability,
+						quantity: e.quantity,
+						labels: t
+					})
+				]
+			})] })
+		})
+	});
+}
+// src/components/product-grid/product-grid.tsx
+function w({ products: e, emptyState: t, labels: n, priorityCount: r = 0 }) {
+	return e.length === 0 ? /* @__PURE__ */ d("div", {
+		className: "sf-grid-empty",
+		children: t ?? "No products found."
+	}) : /* @__PURE__ */ d("ul", {
+		className: "sf-grid",
+		children: e.map((e, t) => /* @__PURE__ */ d("li", {
+			className: "sf-grid__item",
+			children: /* @__PURE__ */ d(C, {
+				product: e,
+				labels: n,
+				priority: t < r
+			})
+		}, e.id))
+	});
+}
+// src/components/category-filter/category-filter.tsx
+function T({ categories: e, selected: t, onSelect: n, allLabel: r = "All", label: i = "Categories", formatLabel: a, sortCategories: o }) {
+	let { renderLink: s, hrefs: c } = y(), l = o ? [...e].sort(o) : e, u = n !== void 0, p = (e, r, i) => {
+		let a = t === e, o = `sf-filter__item${a ? " sf-filter__item--active" : ""}`;
+		return /* @__PURE__ */ d("li", { children: u ? /* @__PURE__ */ d("button", {
+			type: "button",
+			className: o,
+			"aria-pressed": a,
+			onClick: () => n(e),
+			children: r
+		}) : s({
+			href: i,
+			className: o,
+			children: r
+		}) }, e ?? "__all");
+	};
+	return /* @__PURE__ */ d("nav", {
+		"aria-label": i,
+		className: "sf-filter",
+		children: /* @__PURE__ */ f("ul", {
+			className: "sf-filter__list",
+			children: [p(void 0, r, c.category("")), l.map((e) => p(e.slug, a ? a(e) : e.label, c.category(e.slug)))]
+		})
+	});
+}
+// src/components/product-gallery/product-gallery.tsx
+function E({ images: e, sizes: t }) {
+	let { renderImage: n } = y(), [r, i] = l(0);
+	return e.length === 0 ? null : /* @__PURE__ */ f("div", {
+		className: "sf-gallery",
+		role: "group",
+		"aria-roledescription": "carousel",
+		"aria-label": "Product images",
+		tabIndex: 0,
+		onKeyDown: (t) => {
+			if (t.key === "ArrowRight") i((t) => (t + 1) % e.length);
+			else if (t.key === "ArrowLeft") i((t) => (t - 1 + e.length) % e.length);
+			else if (t.key === "Home") i(0);
+			else if (t.key === "End") i(e.length - 1);
+			else return;
+			t.preventDefault();
+		},
+		children: [/* @__PURE__ */ d("div", {
+			className: "sf-gallery__stage",
+			children: e.map((e, i) => /* @__PURE__ */ d("div", {
+				className: "sf-gallery__slide",
+				hidden: i !== r,
+				children: n({
+					src: e.url,
+					alt: e.alt,
+					sizes: t,
+					priority: i === r,
+					className: "sf-gallery__image"
+				})
+			}, e.url))
+		}), e.length > 1 && /* @__PURE__ */ d("div", {
+			className: "sf-gallery__thumbs",
+			children: e.map((t, a) => /* @__PURE__ */ d("button", {
+				type: "button",
+				className: `sf-gallery__thumb${a === r ? " sf-gallery__thumb--active" : ""}`,
+				"aria-label": `Show image ${a + 1} of ${e.length}`,
+				"aria-current": a === r,
+				onClick: () => i(a),
+				children: n({
+					src: t.url,
+					alt: "",
+					className: "sf-gallery__thumb-image"
+				})
+			}, t.url))
+		})]
+	});
+}
+// src/views/shop-view.tsx
+function D({ products: e, categories: n, activeCategory: r, slots: i = {}, labels: a, allLabel: o, formatCategoryLabel: s, sortCategories: c, nextHref: l, loadMoreLabel: u = "Load more" }) {
+	let { renderLink: p } = y();
+	return /* @__PURE__ */ f("div", {
+		className: "sf-shop",
+		children: [
+			i.header,
+			i.intro,
+			/* @__PURE__ */ d(T, {
+				categories: n,
+				selected: r,
+				allLabel: o,
+				formatLabel: s,
+				sortCategories: c
+			}),
+			/* @__PURE__ */ d(w, {
+				products: t(e),
+				emptyState: i.emptyState,
+				labels: a,
+				priorityCount: 6
+			}),
+			l && /* @__PURE__ */ d("div", {
+				className: "sf-shop__pager",
+				children: p({
+					href: l,
+					className: "sf-shop__more",
+					children: u
+				})
+			})
+		]
+	});
+}
+// src/views/product-detail-view.tsx
+function O({ product: e, slots: t = {}, labels: n }) {
+	return /* @__PURE__ */ f("article", {
+		className: "sf-detail",
+		children: [/* @__PURE__ */ d(E, { images: e.images }), /* @__PURE__ */ f("div", {
+			className: "sf-detail__body",
+			children: [
+				/* @__PURE__ */ d("h1", {
+					className: "sf-detail__title",
+					children: e.name
+				}),
+				/* @__PURE__ */ d(b, {
+					priceCents: e.priceCents,
+					currency: e.currency
+				}),
+				/* @__PURE__ */ d(S, {
+					availability: e.availability,
+					quantity: e.quantity,
+					labels: n
+				}),
+				/* @__PURE__ */ d("p", {
+					className: "sf-detail__description",
+					children: e.description
+				}),
+				(e.materials || e.dimensions) && /* @__PURE__ */ f("dl", {
+					className: "sf-detail__specs",
+					children: [e.materials && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("dt", { children: "Materials" }), /* @__PURE__ */ d("dd", { children: e.materials })] }), e.dimensions && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("dt", { children: "Dimensions" }), /* @__PURE__ */ d("dd", { children: e.dimensions })] })]
+				}),
+				t.actions && /* @__PURE__ */ d("div", {
+					className: "sf-detail__actions",
+					children: t.actions
+				}),
+				t.afterDetails
+			]
+		})]
+	});
+}
+// src/views/featured-products.tsx
+function k({ products: e, heading: t = "Featured", labels: n }) {
+	return e.length === 0 ? null : /* @__PURE__ */ f("section", {
+		className: "sf-featured",
+		children: [/* @__PURE__ */ d("h2", {
+			className: "sf-featured__heading",
+			children: t
+		}), /* @__PURE__ */ d(w, {
+			products: e,
+			labels: n,
+			priorityCount: 6
+		})]
+	});
+}
+// src/cart/cart-reducer.ts
+var A = { lines: [] };
+function j(e, t) {
+	let n = e.lines[0];
+	if (n && n.currency !== t.currency) return {
+		state: e,
+		added: !1,
+		capped: !1,
+		reason: "currency-mismatch"
+	};
+	let r = e.lines.find((e) => e.productId === t.productId);
+	if (!r) {
+		let n = Math.min(t.quantity, t.maxQuantity);
+		return {
+			state: { lines: [...e.lines, {
+				...t,
+				quantity: n
+			}] },
+			added: !0,
+			capped: n < t.quantity
+		};
+	}
+	if (r.quantity >= r.maxQuantity) return {
+		state: e,
+		added: !1,
+		capped: !0
+	};
+	let i = Math.min(r.quantity + t.quantity, r.maxQuantity);
+	return {
+		state: { lines: e.lines.map((e) => e.productId === t.productId ? {
+			...e,
+			quantity: i
+		} : e) },
+		added: !0,
+		capped: r.quantity + t.quantity > r.maxQuantity
+	};
+}
+function M(e, t) {
+	switch (t.type) {
+		case "add": return j(e, t.line).state;
+		case "remove": return { lines: e.lines.filter((e) => e.productId !== t.productId) };
+		case "setQuantity": return t.quantity <= 0 ? M(e, {
+			type: "remove",
+			productId: t.productId
+		}) : { lines: e.lines.map((e) => e.productId === t.productId ? {
+			...e,
+			quantity: Math.min(t.quantity, e.maxQuantity)
+		} : e) };
+		case "clear": return A;
+		case "hydrate": return t.state;
+	}
+}
+function N(e) {
+	return e.lines.reduce((e, t) => e + t.priceCents * t.quantity, 0);
+}
+function P(e) {
+	return e.lines.reduce((e, t) => e + t.quantity, 0);
+}
+// src/cart/cart-storage.ts
+function F(e = "sf-cart") {
+	return {
+		load() {
+			if (typeof window > "u") return A;
+			try {
+				let t = window.localStorage.getItem(e);
+				if (!t) return A;
+				let n = JSON.parse(t);
+				return { lines: (Array.isArray(n?.lines) ? n.lines : []).flatMap((e) => {
+					let t = p.safeParse(e);
+					return t.success ? [t.data] : [];
+				}) };
+			} catch {
+				return A;
+			}
+		},
+		save(t) {
+			if (typeof window < "u") try {
+				window.localStorage.setItem(e, JSON.stringify(t));
+			} catch {}
+		}
+	};
+}
+// src/cart/cart-provider.tsx
+var I = n(null), L = F();
+function R({ storage: e = L, children: t }) {
+	let [n, i] = s(M, A), [u, f] = l(!1), [p, m] = l(!1), h = c(n);
+	a(() => {
+		h.current = n;
+	}, [n]), a(() => {
+		let t = !1;
+		return Promise.resolve(e.load()).then((e) => {
+			t || (i({
+				type: "hydrate",
+				state: e
+			}), f(!0));
+		}), () => {
+			t = !0;
+		};
+	}, [e]), a(() => {
+		u && e.save(n);
+	}, [
+		u,
+		n,
+		e
+	]);
+	let g = r((e) => {
+		let t = j(h.current, e);
+		return t.added && (h.current = t.state, i({
+			type: "add",
+			line: e
+		})), t;
+	}, []), _ = o(() => ({
+		lines: n.lines,
+		itemCount: P(n),
+		subtotalCents: N(n),
+		currency: n.lines[0]?.currency ?? null,
+		hydrated: u,
+		isOpen: p,
+		open: () => m(!0),
+		close: () => m(!1),
+		add: g,
+		remove: (e) => i({
+			type: "remove",
+			productId: e
+		}),
+		setQuantity: (e, t) => i({
+			type: "setQuantity",
+			productId: e,
+			quantity: t
+		}),
+		clear: () => i({ type: "clear" })
+	}), [
+		n,
+		u,
+		p,
+		g
+	]);
+	return /* @__PURE__ */ d(I.Provider, {
+		value: _,
+		children: t
+	});
+}
+function z() {
+	let e = i(I);
+	if (!e) throw Error("useCart must be used inside <CartProvider>");
+	return e;
+}
+// src/components/add-to-cart-button/add-to-cart-button.tsx
+var B = {
+	add: "Add to cart",
+	inCart: "In your cart",
+	unavailable: "Unavailable"
+};
+function V({ product: e, labels: t, openOnAdd: n = !0, className: r }) {
+	let i = z(), a = {
+		...B,
+		...t
+	}, o = i.lines.find((t) => t.productId === e.id)?.quantity ?? 0, s = e.availability !== "available", c = o >= e.quantity, l = !i.hydrated || s || c, u = s ? a.unavailable : c ? a.inCart : a.add;
+	function f() {
+		i.add({
+			productId: e.id,
+			slug: e.slug,
+			name: e.name,
+			priceCents: e.priceCents,
+			currency: e.currency,
+			imageUrl: e.images[0]?.url,
+			quantity: 1,
+			maxQuantity: e.quantity
+		}).added && n && i.open();
+	}
+	return /* @__PURE__ */ d("button", {
+		type: "button",
+		className: ["sf-button", r].filter(Boolean).join(" "),
+		disabled: l,
+		onClick: f,
+		children: u
+	});
+}
+// src/components/cart-line-item/cart-line-item.tsx
+var H = {
+	remove: "Remove",
+	quantity: "Quantity"
+};
+function U({ line: t, labels: n }) {
+	let { remove: r, setQuantity: i } = z(), { locale: a, renderLink: o, renderImage: s, hrefs: c } = y(), l = {
+		...H,
+		...n
+	}, u = t.maxQuantity > 1;
+	return /* @__PURE__ */ f("li", {
+		className: "sf-cart-line",
+		children: [t.imageUrl && s({
+			src: t.imageUrl,
+			alt: "",
+			sizes: "80px",
+			className: "sf-cart-line__image"
+		}), /* @__PURE__ */ f("div", {
+			className: "sf-cart-line__body",
+			children: [
+				o({
+					href: c.product(t.slug),
+					className: "sf-cart-line__name",
+					children: t.name
+				}),
+				/* @__PURE__ */ d("span", {
+					className: "sf-cart-line__price",
+					children: e(t.priceCents * t.quantity, t.currency, a)
+				}),
+				u && /* @__PURE__ */ f("label", {
+					className: "sf-cart-line__qty",
+					children: [l.quantity, /* @__PURE__ */ d("input", {
+						type: "number",
+						min: 1,
+						max: t.maxQuantity,
+						value: t.quantity,
+						onChange: (e) => i(t.productId, Number(e.target.value))
+					})]
+				}),
+				/* @__PURE__ */ d("button", {
+					type: "button",
+					className: "sf-link-button sf-cart-line__remove",
+					onClick: () => r(t.productId),
+					"aria-label": `${l.remove} ${t.name}`,
+					children: l.remove
+				})
+			]
+		})]
+	});
+}
+// src/lib/parse-duration.ts
+function W(e) {
+	let t = /^\s*(-?\d*\.?\d+)\s*(ms|s)\s*$/.exec(e);
+	if (!t) return 0;
+	let n = Number(t[1]);
+	return Math.max(0, t[2] === "s" ? n * 1e3 : n);
+}
+// src/components/cart-drawer/use-drawer-presence.ts
+function G(e, t) {
+	let [n, r] = l(0), [i, o] = l(e), [s, c] = l(!1);
+	return i !== e && (o(e), c(!e && n > 0)), a(() => {
+		e && t.current && r(W(getComputedStyle(t.current).getPropertyValue("--sf-motion-duration")));
+	}, [e, t]), a(() => {
+		if (!s) return;
+		let e = setTimeout(() => c(!1), n);
+		return () => clearTimeout(e);
+	}, [s, n]), {
+		mounted: e || s,
+		state: e ? "open" : "closed"
+	};
+}
+// src/components/cart-summary/cart-summary.tsx
+function K({ onCheckout: t, checkoutLabel: n = "Checkout", checkoutDisabled: r = !1, labels: i }) {
+	let a = z(), { locale: o } = y(), s = i?.subtotal ?? "Subtotal";
+	return /* @__PURE__ */ f("div", {
+		className: "sf-cart-summary",
+		children: [/* @__PURE__ */ f("p", {
+			className: "sf-cart-summary__row",
+			children: [/* @__PURE__ */ d("span", { children: s }), /* @__PURE__ */ d("span", {
+				className: "sf-price",
+				children: e(a.subtotalCents, a.currency ?? "USD", o)
+			})]
+		}), /* @__PURE__ */ d("button", {
+			type: "button",
+			className: "sf-button",
+			disabled: r || !t || a.lines.length === 0,
+			onClick: t,
+			children: n
+		})]
+	});
+}
+// src/components/cart-drawer/cart-drawer.tsx
+var q = {
+	title: "Your cart",
+	close: "Close",
+	empty: "Your cart is empty."
+}, J = "a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+function Y({ labels: e, summary: t, slots: n }) {
+	let r = z(), i = {
+		...q,
+		...e
+	}, o = c(null), s = c(null), { isOpen: l } = r, p = G(l, s);
+	if (a(() => {
+		if (!l) return;
+		let e = document.activeElement;
+		return o.current?.querySelector(J)?.focus(), () => e?.focus();
+	}, [l]), !p.mounted) return null;
+	function m(e) {
+		if (e.key === "Escape") {
+			e.stopPropagation(), r.close();
+			return;
+		}
+		if (e.key !== "Tab") return;
+		let t = Array.from(o.current?.querySelectorAll(J) ?? []);
+		if (t.length === 0) return;
+		let n = t[0], i = t[t.length - 1];
+		e.shiftKey && document.activeElement === n ? (e.preventDefault(), i.focus()) : !e.shiftKey && document.activeElement === i && (e.preventDefault(), n.focus());
+	}
+	return /* @__PURE__ */ d("div", {
+		ref: s,
+		className: "sf-drawer-backdrop",
+		"data-state": p.state,
+		onClick: r.close,
+		children: /* @__PURE__ */ f("div", {
+			ref: o,
+			className: "sf-drawer",
+			"data-state": p.state,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": "sf-drawer-title",
+			onKeyDown: m,
+			onClick: (e) => e.stopPropagation(),
+			children: [/* @__PURE__ */ f("div", {
+				className: "sf-drawer__header",
+				children: [/* @__PURE__ */ d("h2", {
+					id: "sf-drawer-title",
+					className: "sf-drawer__title",
+					children: i.title
+				}), /* @__PURE__ */ d("button", {
+					type: "button",
+					className: "sf-drawer__close",
+					"aria-label": i.close,
+					onClick: r.close,
+					children: /* @__PURE__ */ d("span", {
+						"aria-hidden": "true",
+						children: "×"
+					})
+				})]
+			}), r.lines.length === 0 ? /* @__PURE__ */ d("div", {
+				className: "sf-drawer__empty",
+				children: n?.empty ?? /* @__PURE__ */ d("p", { children: i.empty })
+			}) : /* @__PURE__ */ f(u, { children: [
+				/* @__PURE__ */ d("ul", {
+					className: "sf-drawer__lines",
+					children: r.lines.map((e) => /* @__PURE__ */ d(U, { line: e }, e.productId))
+				}),
+				/* @__PURE__ */ d(K, { ...t }),
+				n?.summaryNote && /* @__PURE__ */ d("div", {
+					className: "sf-drawer__note",
+					children: n.summaryNote
+				})
+			] })]
+		})
+	});
+}
+// src/components/cart-button/cart-button.tsx
+function X({ label: e = "Cart", className: t, icon: n, labelHidden: r = !1, hideZeroCount: i = !1 }) {
+	let a = z(), o = a.hydrated ? a.itemCount : 0, s = !(i && o === 0), c = s ? r ? `${e}, ${a.itemCount} items` : void 0 : `${e}, empty`;
+	return /* @__PURE__ */ f("button", {
+		type: "button",
+		className: ["sf-cart-button", t].filter(Boolean).join(" "),
+		"aria-haspopup": "dialog",
+		"aria-label": c,
+		onClick: a.open,
+		children: [
+			n,
+			/* @__PURE__ */ d("span", {
+				className: r ? "sf-visually-hidden" : void 0,
+				children: e
+			}),
+			s && /* @__PURE__ */ d("span", {
+				className: "sf-cart-button__count",
+				"aria-label": `${a.itemCount} items`,
+				children: o
+			})
+		]
+	});
+}
+export { V as AddToCartButton, S as AvailabilityBadge, X as CartButton, Y as CartDrawer, U as CartLineItem, R as CartProvider, K as CartSummary, T as CategoryFilter, k as FeaturedProducts, b as PriceTag, C as ProductCard, O as ProductDetailView, E as ProductGallery, w as ProductGrid, D as ShopView, v as StorefrontProvider, j as addLine, M as cartReducer, B as defaultAddToCartLabels, x as defaultAvailabilityLabels, q as defaultCartDrawerLabels, H as defaultCartLineItemLabels, A as emptyCart, e as formatPrice, P as itemCount, F as localStorageCartStorage, t as sortForDisplay, N as subtotalCents, h as themeToCssVars, z as useCart, y as useStorefront };
+
+//# sourceMappingURL=index.js.map