@86d-app/products 0.0.3

package/src/store/components/_hooks.ts

@@ -0,0 +1,78 @@
+"use client";
+
+import { useModuleClient } from "@86d-app/core/client";
+import { useCallback, useRef } from "react";
+
+export function useProductsApi() {
+	const client = useModuleClient();
+	return {
+		listProducts: client.module("products").store["/products"],
+		getFeaturedProducts: client.module("products").store["/products/featured"],
+		getProduct: client.module("products").store["/products/:id"],
+		getRelatedProducts:
+			client.module("products").store["/products/:id/related"],
+		listCategories: client.module("products").store["/categories"],
+	};
+}
+
+export function useCartMutation() {
+	const client = useModuleClient();
+	return {
+		addToCart: client.module("cart").store["/cart"],
+		getCart: client.module("cart").store["/cart/get"],
+	};
+}
+
+export function useReviewsApi() {
+	const client = useModuleClient();
+	return {
+		listProductReviews:
+			client.module("reviews").store["/reviews/products/:productId"],
+		submitReview: client.module("reviews").store["/reviews"],
+	};
+}
+
+export function useInventoryApi() {
+	const client = useModuleClient();
+	return {
+		checkStock: client.module("inventory").store["/inventory/check"],
+		subscribeBackInStock:
+			client.module("inventory").store["/inventory/back-in-stock/subscribe"],
+		checkBackInStock:
+			client.module("inventory").store["/inventory/back-in-stock/check"],
+		unsubscribeBackInStock:
+			client.module("inventory").store["/inventory/back-in-stock/unsubscribe"],
+	};
+}
+
+export function useAnalyticsApi() {
+	const client = useModuleClient();
+	return {
+		recentlyViewed:
+			client.module("analytics").store["/analytics/recently-viewed"],
+	};
+}
+
+/** Fire-and-forget analytics event via the analytics module endpoint. */
+export function useTrack() {
+	const client = useModuleClient();
+	const tracker = client.module("analytics").store["/analytics/events"];
+	const ref = useRef(tracker);
+	ref.current = tracker;
+
+	return useCallback(
+		(params: {
+			type: string;
+			productId?: string;
+			value?: number;
+			data?: Record<string, unknown>;
+		}) => {
+			try {
+				void ref.current.mutate(params);
+			} catch {
+				// Analytics is best-effort
+			}
+		},
+		[],
+	);
+}

package/src/store/components/_types.ts

@@ -0,0 +1,73 @@
+export interface Product {
+	id: string;
+	name: string;
+	slug: string;
+	price: number;
+	compareAtPrice?: number | null;
+	shortDescription?: string | null;
+	description?: string | null;
+	images: string[];
+	isFeatured: boolean;
+	status: string;
+	inventory: number;
+	categoryId?: string | null;
+	tags: string[];
+}
+
+export interface ProductVariant {
+	id: string;
+	name: string;
+	price: number;
+	compareAtPrice?: number | null;
+	inventory: number;
+	options: Record<string, string>;
+}
+
+export interface ProductWithVariants extends Product {
+	variants: ProductVariant[];
+	category?: { id: string; name: string; slug: string } | null;
+}
+
+export interface Category {
+	id: string;
+	name: string;
+	slug: string;
+}
+
+export interface ListResult {
+	products: Product[];
+	total: number;
+	page: number;
+	limit: number;
+}
+
+export interface CollectionCardData {
+	id: string;
+	name: string;
+	slug: string;
+	description?: string | null;
+	image?: string | null;
+}
+
+export interface Review {
+	id: string;
+	authorName: string;
+	rating: number;
+	title?: string | undefined;
+	body: string;
+	isVerifiedPurchase: boolean;
+	helpfulCount: number;
+	createdAt: string;
+}
+
+export interface RatingSummary {
+	average: number;
+	count: number;
+	distribution: Record<string, number>;
+}
+
+export interface ReviewsResponse {
+	reviews: Review[];
+	summary: RatingSummary;
+	total: number;
+}

package/src/store/components/_utils.ts

@@ -0,0 +1,14 @@
+export function formatPrice(cents: number): string {
+	return new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency: "USD",
+	}).format(cents / 100);
+}
+
+export function formatDate(iso: string): string {
+	return new Intl.DateTimeFormat("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "numeric",
+	}).format(new Date(iso));
+}

package/src/store/components/back-in-stock-notify.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useState } from "react";
+import { useInventoryApi } from "./_hooks";
+
+interface BackInStockNotifyProps {
+	productId: string;
+	variantId?: string | undefined;
+	productName: string;
+}
+
+export function BackInStockNotify({
+	productId,
+	variantId,
+	productName,
+}: BackInStockNotifyProps) {
+	const [email, setEmail] = useState("");
+	const [submitted, setSubmitted] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const api = useInventoryApi();
+
+	const subscribeMutation = api.subscribeBackInStock.useMutation({
+		onSuccess: () => {
+			setSubmitted(true);
+			setError(null);
+		},
+		onError: () => {
+			setError("Something went wrong. Please try again.");
+		},
+	});
+
+	const handleSubmit = (e: React.FormEvent) => {
+		e.preventDefault();
+		if (!email.trim()) return;
+		setError(null);
+		subscribeMutation.mutate({
+			productId,
+			variantId,
+			email: email.trim(),
+			productName,
+		});
+	};
+
+	if (submitted) {
+		return (
+			<div className="mt-3 rounded-md border border-border bg-muted/30 p-3">
+				<div className="flex items-center gap-2">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="16"
+						height="16"
+						viewBox="0 0 256 256"
+						fill="currentColor"
+						className="text-foreground"
+						aria-hidden="true"
+					>
+						<path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z" />
+					</svg>
+					<p className="font-medium text-foreground text-xs">
+						We'll notify you
+					</p>
+				</div>
+				<p className="mt-1 text-muted-foreground text-xs">
+					We'll send an email to <strong>{email}</strong> when this item is back
+					in stock.
+				</p>
+			</div>
+		);
+	}
+
+	return (
+		<div className="mt-3 rounded-md border border-border bg-muted/30 p-3">
+			<p className="font-medium text-foreground text-xs">Out of stock</p>
+			<p className="mt-0.5 text-muted-foreground text-xs">
+				Get notified when this item is available again.
+			</p>
+			<form onSubmit={handleSubmit} className="mt-2 flex items-center gap-2">
+				<input
+					type="email"
+					value={email}
+					onChange={(e) => setEmail(e.target.value)}
+					placeholder="your@email.com"
+					required
+					className="h-9 flex-1 rounded-md border border-border bg-background px-3 text-foreground text-sm placeholder:text-muted-foreground/50 focus:border-foreground/30 focus:outline-none"
+				/>
+				<button
+					type="submit"
+					disabled={subscribeMutation.isPending || !email.trim()}
+					className="h-9 rounded-md bg-foreground px-3.5 font-medium text-background text-sm transition-opacity hover:opacity-85 disabled:opacity-40"
+				>
+					{subscribeMutation.isPending ? "..." : "Notify me"}
+				</button>
+			</form>
+			{error && <p className="mt-1.5 text-red-500 text-xs">{error}</p>}
+		</div>
+	);
+}

package/src/store/components/collection-card.mdx

@@ -0,0 +1,42 @@
+<a
+  href={`/collections/${props.collection.slug}`}
+  className="group relative flex flex-col"
+>
+  <div className="relative aspect-[16/10] overflow-hidden rounded-lg bg-muted">
+    {props.collection.image ? (
+      <img
+        src={props.collection.image}
+        alt={props.collection.name}
+        className="h-full w-full object-cover object-center transition-transform duration-700 ease-out group-hover:scale-105"
+      />
+    ) : (
+      <div className="flex h-full w-full items-center justify-center bg-muted text-muted-foreground/25">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="28"
+          height="28"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <rect width="7" height="7" x="3" y="3" rx="1" />
+          <rect width="7" height="7" x="14" y="3" rx="1" />
+          <rect width="7" height="7" x="3" y="14" rx="1" />
+          <rect width="7" height="7" x="14" y="14" rx="1" />
+        </svg>
+      </div>
+    )}
+  </div>
+  <div className="mt-3">
+    <p className="text-foreground text-sm">{props.collection.name}</p>
+    {props.collection.description && (
+      <p className="mt-0.5 line-clamp-1 text-muted-foreground text-xs">
+        {props.collection.description}
+      </p>
+    )}
+  </div>
+</a>

package/src/store/components/collection-card.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import type { CollectionCardData } from "./_types";
+import CollectionCardTemplate from "./collection-card.mdx";
+
+export interface CollectionCardProps {
+	collection: CollectionCardData;
+}
+
+export function CollectionCard({ collection }: CollectionCardProps) {
+	return <CollectionCardTemplate collection={collection} />;
+}

package/src/store/components/collection-detail.mdx

@@ -0,0 +1,12 @@
+<div className="py-4 sm:py-6">
+  {props.breadcrumbs}
+  {props.heroImage}
+  <div className="mb-6">
+    <h1 className="font-display font-semibold text-foreground text-xl tracking-tight sm:text-2xl">
+      {props.name}
+    </h1>
+    {props.description}
+    {props.productCount}
+  </div>
+  {props.gridContent}
+</div>

package/src/store/components/collection-detail.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { useModuleClient } from "@86d-app/core/client";
+import type { CollectionCardData, Product } from "./_types";
+import CollectionDetailTemplate from "./collection-detail.mdx";
+import { ProductCard } from "./product-card";
+
+export interface CollectionDetailProps {
+	slug?: string;
+	params?: Record<string, string>;
+}
+
+export function CollectionDetail(props: CollectionDetailProps) {
+	const slug = props.slug ?? props.params?.slug;
+	const client = useModuleClient();
+	const getCollection = client.module("products").store["/collections/:id"];
+
+	const { data, isLoading } = getCollection.useQuery(
+		{ params: { id: slug ?? "" } },
+		{ enabled: !!slug },
+	) as {
+		data:
+			| {
+					collection: CollectionCardData & { products: Product[] };
+			  }
+			| undefined;
+		isLoading: boolean;
+	};
+
+	const collection = data?.collection ?? null;
+
+	if (!slug) {
+		return (
+			<div className="rounded-md border border-border bg-muted/30 p-4 text-muted-foreground">
+				<p className="font-medium">Collection not found</p>
+				<p className="mt-1 text-sm">No collection was specified.</p>
+				<a href="/collections" className="mt-3 inline-block text-sm underline">
+					Back to collections
+				</a>
+			</div>
+		);
+	}
+
+	if (isLoading) {
+		return (
+			<div className="py-6">
+				<div className="mb-6 space-y-2">
+					<div className="h-6 w-1/4 animate-pulse rounded bg-muted" />
+					<div className="h-4 w-1/3 animate-pulse rounded bg-muted" />
+				</div>
+				<div className="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 lg:grid-cols-4">
+					{Array.from({ length: 4 }).map((_, i) => (
+						<div key={i}>
+							<div className="aspect-[3/4] animate-pulse rounded-lg bg-muted" />
+							<div className="mt-3 space-y-1.5">
+								<div className="h-3.5 w-3/4 animate-pulse rounded bg-muted-foreground/10" />
+								<div className="h-3.5 w-1/3 animate-pulse rounded bg-muted-foreground/10" />
+							</div>
+						</div>
+					))}
+				</div>
+			</div>
+		);
+	}
+
+	if (!collection) {
+		return (
+			<div className="flex flex-col items-center justify-center py-24 text-center">
+				<p className="font-medium text-foreground text-sm">
+					Collection not found
+				</p>
+				<a
+					href="/collections"
+					className="mt-2 text-muted-foreground text-sm transition-colors hover:text-foreground"
+				>
+					Back to collections
+				</a>
+			</div>
+		);
+	}
+
+	// --- Pre-computed JSX blocks for template ---
+
+	const breadcrumbs = (
+		<nav className="mb-6 flex items-center gap-1.5 text-muted-foreground text-xs">
+			<a href="/" className="transition-colors hover:text-foreground">
+				Home
+			</a>
+			<span className="text-border">/</span>
+			<a
+				href="/collections"
+				className="transition-colors hover:text-foreground"
+			>
+				Collections
+			</a>
+			<span className="text-border">/</span>
+			<span className="truncate text-foreground">{collection.name}</span>
+		</nav>
+	);
+
+	const heroImage = collection.image ? (
+		<div className="mb-6 aspect-[3/1] overflow-hidden rounded-lg">
+			<img
+				src={collection.image}
+				alt={collection.name}
+				className="h-full w-full object-cover"
+			/>
+		</div>
+	) : null;
+
+	const description = collection.description ? (
+		<p className="mt-1.5 max-w-xl text-muted-foreground text-sm leading-relaxed">
+			{collection.description}
+		</p>
+	) : null;
+
+	const productCount = (
+		<p className="mt-1.5 text-muted-foreground/60 text-xs tabular-nums">
+			{collection.products.length}{" "}
+			{collection.products.length === 1 ? "product" : "products"}
+		</p>
+	);
+
+	const gridContent =
+		collection.products.length === 0 ? (
+			<div className="flex flex-col items-center justify-center py-20 text-center">
+				<p className="text-muted-foreground text-sm">
+					No products in this collection yet
+				</p>
+			</div>
+		) : (
+			<div className="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 lg:grid-cols-4">
+				{collection.products.map((product) => (
+					<ProductCard key={product.id} product={product} />
+				))}
+			</div>
+		);
+
+	return (
+		<CollectionDetailTemplate
+			breadcrumbs={breadcrumbs}
+			heroImage={heroImage}
+			name={collection.name}
+			description={description}
+			productCount={productCount}
+			gridContent={gridContent}
+		/>
+	);
+}

package/src/store/components/collection-grid.mdx

@@ -0,0 +1,9 @@
+<section className="py-12 sm:py-14">
+  <div className="mb-6 flex items-baseline justify-between">
+    <h2 className="font-display font-semibold text-foreground text-lg tracking-tight sm:text-xl">
+      {props.title}
+    </h2>
+    {props.viewAllLink}
+  </div>
+  {props.gridContent}
+</section>

package/src/store/components/collection-grid.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useModuleClient } from "@86d-app/core/client";
+import type { CollectionCardData } from "./_types";
+import { CollectionCard } from "./collection-card";
+import CollectionGridTemplate from "./collection-grid.mdx";
+
+export interface CollectionGridProps {
+	title?: string;
+	featured?: boolean;
+}
+
+export function CollectionGrid({
+	title = "Collections",
+	featured,
+}: CollectionGridProps) {
+	const client = useModuleClient();
+	const listCollections = client.module("products").store["/collections"];
+
+	// biome-ignore lint/suspicious/noExplicitAny: query input requires string values
+	const queryInput: Record<string, any> = {};
+	if (featured) queryInput.featured = "true";
+
+	const { data, isLoading } = listCollections.useQuery(queryInput) as {
+		data: { collections: CollectionCardData[] } | undefined;
+		isLoading: boolean;
+	};
+
+	const collections = data?.collections ?? [];
+
+	if (isLoading) {
+		return (
+			<section className="py-12 sm:py-14">
+				<div className="mb-6">
+					<h2 className="font-display font-semibold text-foreground text-lg tracking-tight sm:text-xl">
+						{title}
+					</h2>
+				</div>
+				<div className="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 lg:grid-cols-3">
+					{Array.from({ length: 3 }).map((_, i) => (
+						<div key={i}>
+							<div className="aspect-[16/10] animate-pulse rounded-lg bg-muted" />
+							<div className="mt-3 space-y-1.5">
+								<div className="h-3.5 w-1/2 animate-pulse rounded bg-muted-foreground/10" />
+								<div className="h-3 w-3/4 animate-pulse rounded bg-muted-foreground/10" />
+							</div>
+						</div>
+					))}
+				</div>
+			</section>
+		);
+	}
+
+	if (collections.length === 0) return null;
+
+	const viewAllLink = (
+		<a
+			href="/collections"
+			className="text-muted-foreground text-sm transition-colors hover:text-foreground"
+		>
+			View all
+		</a>
+	);
+
+	const gridContent = (
+		<div className="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 lg:grid-cols-3">
+			{collections.map((collection) => (
+				<CollectionCard key={collection.id} collection={collection} />
+			))}
+		</div>
+	);
+
+	return (
+		<CollectionGridTemplate
+			title={title}
+			viewAllLink={viewAllLink}
+			gridContent={gridContent}
+		/>
+	);
+}

package/src/store/components/featured-products.mdx

@@ -0,0 +1,9 @@
+<section className="py-12 sm:py-14">
+  <div className="mb-6 flex items-baseline justify-between">
+    <h2 className="font-display font-semibold text-foreground text-lg tracking-tight sm:text-xl">
+      {props.title}
+    </h2>
+    {props.viewAllLink}
+  </div>
+  {props.gridContent}
+</section>

package/src/store/components/featured-products.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useProductsApi } from "./_hooks";
+import FeaturedProductsTemplate from "./featured-products.mdx";
+import { ProductCard } from "./product-card";
+
+export interface FeaturedProductsProps {
+	limit?: number;
+	title?: string;
+}
+
+export function FeaturedProducts({
+	limit = 4,
+	title = "Featured Products",
+}: FeaturedProductsProps) {
+	const api = useProductsApi();
+	const { data, isLoading } = api.getFeaturedProducts.useQuery({
+		limit: String(limit),
+	}) as {
+		data: { products: import("./_types").Product[] } | undefined;
+		isLoading: boolean;
+	};
+
+	const products = data?.products ?? [];
+
+	if (isLoading) {
+		return (
+			<section className="py-12 sm:py-14">
+				<div className="mb-6 flex items-baseline justify-between">
+					<h2 className="font-display font-semibold text-foreground text-lg tracking-tight sm:text-xl">
+						{title}
+					</h2>
+				</div>
+				<div className="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 lg:grid-cols-4">
+					{Array.from({ length: limit }).map((_, i) => (
+						<div key={i}>
+							<div className="aspect-[3/4] animate-pulse rounded-lg bg-muted" />
+							<div className="mt-3 space-y-1.5">
+								<div className="h-3.5 w-3/4 animate-pulse rounded bg-muted-foreground/10" />
+								<div className="h-3.5 w-1/3 animate-pulse rounded bg-muted-foreground/10" />
+							</div>
+						</div>
+					))}
+				</div>
+			</section>
+		);
+	}
+
+	if (products.length === 0) return null;
+
+	const viewAllLink = (
+		<a
+			href="/products"
+			className="text-muted-foreground text-sm transition-colors hover:text-foreground"
+		>
+			View all
+		</a>
+	);
+
+	const gridContent = (
+		<div className="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 lg:grid-cols-4">
+			{products.map((product) => (
+				<ProductCard key={product.id} product={product} />
+			))}
+		</div>
+	);
+
+	return (
+		<FeaturedProductsTemplate
+			title={title}
+			viewAllLink={viewAllLink}
+			gridContent={gridContent}
+		/>
+	);
+}

package/src/store/components/filter-chip.mdx

@@ -0,0 +1,25 @@
+<span className="inline-flex items-center gap-1 rounded-full border border-border bg-muted/50 py-0.5 pr-1.5 pl-2.5 text-foreground text-xs">
+  {props.label}
+  <button
+    type="button"
+    onClick={() => props.onRemove()}
+    className="flex h-4 w-4 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted-foreground/20 hover:text-foreground"
+    aria-label={`Remove ${props.label} filter`}
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="10"
+      height="10"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  </button>
+</span>