@86d-app/products 0.0.3

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

@@ -0,0 +1,12 @@
+"use client";
+
+import FilterChipTemplate from "./filter-chip.mdx";
+
+export interface FilterChipProps {
+	label: string;
+	onRemove: () => void;
+}
+
+export function FilterChip({ label, onRemove }: FilterChipProps) {
+	return <FilterChipTemplate label={label} onRemove={onRemove} />;
+}

package/src/store/components/index.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import type { MDXComponents } from "mdx/types";
+import type { CollectionCardData, Product } from "./_types";
+import { CollectionCard } from "./collection-card";
+import { CollectionDetail } from "./collection-detail";
+import { CollectionGrid } from "./collection-grid";
+import { FeaturedProducts } from "./featured-products";
+import { FilterChip } from "./filter-chip";
+import { ProductCard } from "./product-card";
+import { ProductDetail } from "./product-detail";
+import { ProductListing } from "./product-listing";
+import { ProductReviewsSection } from "./product-reviews-section";
+import { RecentlyViewedProducts } from "./recently-viewed";
+import { RelatedProducts } from "./related-products";
+import { StarDisplay } from "./star-display";
+import { StarPicker } from "./star-picker";
+import { StockBadge } from "./stock-badge";
+
+export default {
+	ProductCard: ({ product }: { product: Product }) => (
+		<ProductCard product={product} />
+	),
+	FeaturedProducts,
+	ProductListing,
+	ProductDetail,
+	RelatedProducts,
+	CollectionCard: ({ collection }: { collection: CollectionCardData }) => (
+		<CollectionCard collection={collection} />
+	),
+	CollectionGrid,
+	CollectionDetail,
+	FilterChip,
+	StarDisplay,
+	StarPicker,
+	StockBadge,
+	ProductReviewsSection,
+	RecentlyViewedProducts,
+} satisfies MDXComponents;

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

@@ -0,0 +1,69 @@
+<a
+  href={`/products/${props.product.slug}`}
+  className="group relative flex flex-col"
+>
+  <div className="relative aspect-[3/4] overflow-hidden rounded-lg bg-muted">
+    {props.image ? (
+      <img
+        src={props.image}
+        alt={props.product.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 text-muted-foreground/30">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <rect width="18" height="18" x="3" y="3" rx="2" />
+          <circle cx="9" cy="9" r="2" />
+          <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+        </svg>
+      </div>
+    )}
+    {props.hasDiscount && (
+      <span className="absolute top-2.5 left-2.5 rounded-full bg-foreground px-2 py-0.5 font-medium text-background text-xs tabular-nums">
+        −{props.discountPct}%
+      </span>
+    )}
+    {props.product.inventory === 0 && (
+      <span className="absolute top-2.5 right-2.5 rounded-full bg-background/80 px-2 py-0.5 text-muted-foreground text-xs backdrop-blur-sm">
+        Sold out
+      </span>
+    )}
+    {props.showAddToCart && (
+      <div className="absolute inset-x-2.5 bottom-2.5 translate-y-1 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100">
+        <button
+          type="button"
+          onClick={props.onAddToCart}
+          disabled={props.isAddingToCart}
+          className="w-full rounded-md bg-foreground/95 py-2 font-medium text-background text-xs backdrop-blur-sm transition-colors hover:bg-foreground disabled:opacity-50"
+          aria-label={`Add ${props.product.name} to cart`}
+        >
+          {props.isAddingToCart ? "Adding…" : "Add to cart"}
+        </button>
+      </div>
+    )}
+  </div>
+  <div className="mt-3 flex flex-col gap-0.5">
+    <p className="line-clamp-1 text-foreground text-sm">{props.product.name}</p>
+    <div className="flex items-baseline gap-1.5">
+      <span className="text-foreground text-sm tabular-nums">
+        {props.priceFormatted}
+      </span>
+      {props.compareAtPriceFormatted && (
+        <span className="text-muted-foreground/60 text-xs tabular-nums line-through">
+          {props.compareAtPriceFormatted}
+        </span>
+      )}
+    </div>
+  </div>
+</a>

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

@@ -0,0 +1,71 @@
+"use client";
+
+import { useStoreContext } from "@86d-app/core/client";
+import { memo } from "react";
+import { useCartMutation, useTrack } from "./_hooks";
+import type { Product } from "./_types";
+import { formatPrice } from "./_utils";
+import ProductCardTemplate from "./product-card.mdx";
+
+export interface ProductCardProps {
+	product: Product;
+	showAddToCart?: boolean;
+}
+
+export const ProductCard = memo(function ProductCard({
+	product,
+	showAddToCart = true,
+}: ProductCardProps) {
+	const cartApi = useCartMutation();
+	const track = useTrack();
+	// biome-ignore lint/suspicious/noExplicitAny: store context shape varies per app
+	const store = useStoreContext<{ cart: any }>();
+
+	const addToCartMutation = cartApi.addToCart.useMutation({
+		onSuccess: () => {
+			void cartApi.getCart.invalidate();
+			store.cart.openDrawer();
+			track({
+				type: "addToCart",
+				productId: product.id,
+				value: product.price,
+				data: { name: product.name, quantity: 1 },
+			});
+		},
+	});
+
+	const image = product.images[0];
+	const hasDiscount =
+		product.compareAtPrice != null && product.compareAtPrice > product.price;
+	const discountPct = hasDiscount
+		? Math.round((1 - product.price / (product.compareAtPrice as number)) * 100)
+		: 0;
+
+	const handleAddToCart = (e: React.MouseEvent) => {
+		e.preventDefault();
+		addToCartMutation.mutate({
+			productId: product.id,
+			quantity: 1,
+			price: product.price,
+			productName: product.name,
+			productSlug: product.slug,
+			productImage: image,
+		});
+	};
+
+	return (
+		<ProductCardTemplate
+			product={product}
+			image={image}
+			showAddToCart={showAddToCart && product.inventory > 0}
+			hasDiscount={hasDiscount}
+			discountPct={discountPct}
+			priceFormatted={formatPrice(product.price)}
+			compareAtPriceFormatted={
+				hasDiscount ? formatPrice(product.compareAtPrice as number) : null
+			}
+			isAddingToCart={addToCartMutation.isPending}
+			onAddToCart={handleAddToCart}
+		/>
+	);
+});

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

@@ -0,0 +1,30 @@
+<div className="py-4 sm:py-6">
+  {/* Breadcrumbs */}
+  {props.breadcrumbs}
+
+  <div className="grid gap-8 lg:grid-cols-2 lg:gap-12">
+    {/* Image gallery */}
+    {props.imageGallery}
+
+    {/* Product info */}
+    <div className="flex flex-col gap-4 lg:sticky lg:top-20 lg:self-start">
+      {props.categoryLink}
+      <h1 className="font-display font-semibold text-foreground text-xl tracking-tight sm:text-2xl">
+        {props.name}
+      </h1>
+      {props.reviewSummaryLink}
+      {props.priceBlock}
+      {props.stockBadge}
+      {props.shortDescription}
+      {props.variantSelector}
+      {props.addToCartBlock}
+      {props.outOfStockNotice}
+      {props.descriptionBlock}
+      {props.tagsBlock}
+    </div>
+  </div>
+
+  {props.reviewsSection}
+  {props.relatedProducts}
+  {props.recentlyViewed}
+</div>