@tuturuuu/ui 0.7.0 → 0.9.0

package/src/components/ui/storefront/listing-card.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Minus, Plus } from '@tuturuuu/icons';
+import { Minus, Plus, SlidersHorizontal } from '@tuturuuu/icons';
 import type { InventoryStorefrontListing } from '@tuturuuu/internal-api/inventory';
 import { cn } from '@tuturuuu/utils/format';
 import { Badge } from '../badge';
@@ -8,7 +8,12 @@ import { Button } from '../button';
 import { AccentButton } from './accent-button';
 import { StorefrontImagePanel } from './image-panel';
 import type { StorefrontSurfaceLabels } from './types';
-import { formatStorefrontPrice, getStorefrontListingLimit } from './utils';
+import {
+  formatStorefrontPrice,
+  getStorefrontListingFromPrice,
+  getStorefrontListingLimit,
+  listingHasVariants,
+} from './utils';
 
 export function StorefrontListingCard({
   currency,
@@ -17,6 +22,7 @@ export function StorefrontListingCard({
   listing,
   onDecrement,
   onIncrement,
+  onOpenDetail,
   quantity,
   radius,
   showInventoryBadges,
@@ -26,35 +32,73 @@ export function StorefrontListingCard({
   isList: boolean;
   labels: StorefrontSurfaceLabels;
   listing: InventoryStorefrontListing;
-  onDecrement?: (listingId: string) => void;
-  onIncrement?: (listingId: string, maxQuantity: number) => void;
+  onDecrement?: (listingId: string, variantId?: string | null) => void;
+  onIncrement?: (
+    listingId: string,
+    maxQuantity: number,
+    variantId?: string | null
+  ) => void;
+  onOpenDetail?: (listingId: string) => void;
   quantity: number;
   radius: string;
   showInventoryBadges: boolean;
   surfaceClassName: string;
 }) {
+  const hasVariants = listingHasVariants(listing);
   const limit = getStorefrontListingLimit(listing);
   const disabled = limit === 0 || quantity >= limit;
   const canChange = Boolean(onIncrement || onDecrement);
+  const fromPrice = getStorefrontListingFromPrice(listing);
+  const openDetail = onOpenDetail ? () => onOpenDetail(listing.id) : undefined;
 
   return (
     <article
       className={cn(
         surfaceClassName,
         radius,
+        'group relative overflow-hidden transition duration-200 hover:-translate-y-0.5 hover:shadow-foreground/10 hover:shadow-md',
         isList
-          ? 'grid gap-3 p-3 sm:grid-cols-[112px_minmax(0,1fr)_auto] sm:items-center'
-          : 'grid min-h-full gap-4 p-3'
+          ? 'grid gap-4 p-3 sm:grid-cols-[112px_minmax(0,1fr)_auto] sm:items-center'
+          : 'flex min-h-full flex-col gap-4 p-3'
       )}
     >
-      <StorefrontImagePanel
-        className={cn(isList ? 'aspect-square' : 'aspect-[4/3]')}
-        imageUrl={listing.imageUrl}
-        label={listing.title}
-      />
+      <div className="relative">
+        <button
+          aria-label={listing.title}
+          className={cn(
+            'block w-full overflow-hidden text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',
+            radius
+          )}
+          disabled={!openDetail}
+          onClick={openDetail}
+          type="button"
+        >
+          <StorefrontImagePanel
+            className={cn(
+              'overflow-hidden transition duration-300 group-hover:scale-[1.02]',
+              radius,
+              isList ? 'aspect-square' : 'aspect-[4/3]'
+            )}
+            imageUrl={listing.imageUrl}
+            label={listing.title}
+          />
+        </button>
+        {limit === 0 ? (
+          <span className="absolute inset-x-2 top-2 inline-flex w-fit items-center rounded-full bg-foreground/85 px-2.5 py-0.5 font-medium text-background text-xs">
+            {labels.soldOut}
+          </span>
+        ) : null}
+      </div>
       <div className="min-w-0">
         <div className="flex flex-wrap items-center gap-2">
-          <p className="min-w-0 truncate font-semibold">{listing.title}</p>
+          <button
+            className="min-w-0 truncate text-left font-semibold transition hover:text-[var(--storefront-accent-text,var(--primary))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-default disabled:hover:text-foreground"
+            disabled={!openDetail}
+            onClick={openDetail}
+            type="button"
+          >
+            {listing.title}
+          </button>
           <Badge className="border-border bg-background" variant="outline">
             {listing.listingType === 'bundle' ? labels.bundle : labels.product}
           </Badge>
@@ -76,23 +120,41 @@ export function StorefrontListingCard({
       </div>
 
       <div className="mt-auto flex flex-wrap items-center justify-between gap-3">
-        <div>
-          <p className="font-semibold">
-            {formatStorefrontPrice(listing.price, currency)}
-          </p>
-          {listing.compareAtPrice ? (
-            <p className="text-muted-foreground text-xs line-through">
+        <div className="min-w-0">
+          {hasVariants ? (
+            <p className="truncate font-semibold tabular-nums">
+              <span className="font-normal text-muted-foreground text-xs">
+                {labels.fromPrice}{' '}
+              </span>
+              {formatStorefrontPrice(fromPrice, currency)}
+            </p>
+          ) : (
+            <p className="truncate font-semibold tabular-nums">
+              {formatStorefrontPrice(listing.price, currency)}
+            </p>
+          )}
+          {!hasVariants && listing.compareAtPrice ? (
+            <p className="truncate text-muted-foreground text-xs line-through">
               {formatStorefrontPrice(listing.compareAtPrice, currency)}
             </p>
           ) : null}
         </div>
-        {canChange ? (
+        {hasVariants ? (
+          <AccentButton
+            disabled={limit === 0 || !openDetail}
+            onClick={openDetail}
+            radius={radius}
+          >
+            <SlidersHorizontal className="h-4 w-4" />
+            {limit === 0 ? labels.soldOut : labels.selectOptions}
+          </AccentButton>
+        ) : canChange ? (
           quantity > 0 ? (
             <div className="flex items-center gap-1">
               <Button
                 aria-label={`${labels.quantity} -`}
                 className={cn('h-8 w-8 p-0', radius)}
-                onClick={() => onDecrement?.(listing.id)}
+                onClick={() => onDecrement?.(listing.id, null)}
                 type="button"
                 variant="outline"
               >
@@ -105,7 +167,7 @@ export function StorefrontListingCard({
                 aria-label={`${labels.quantity} +`}
                 className={cn('h-8 w-8 p-0', radius)}
                 disabled={disabled}
-                onClick={() => onIncrement?.(listing.id, limit)}
+                onClick={() => onIncrement?.(listing.id, limit, null)}
                 type="button"
                 variant="outline"
               >
@@ -115,7 +177,7 @@ export function StorefrontListingCard({
           ) : (
             <AccentButton
               disabled={disabled}
-              onClick={() => onIncrement?.(listing.id, limit)}
+              onClick={() => onIncrement?.(listing.id, limit, null)}
               radius={radius}
             >
               <Plus className="h-4 w-4" />

package/src/components/ui/storefront/merch-sections.tsx

@@ -0,0 +1,70 @@
+import type { InventoryStorefrontSection } from '@tuturuuu/internal-api/inventory';
+import { cn } from '@tuturuuu/utils/format';
+import { StorefrontImagePanel } from './image-panel';
+import { getSafeStorefrontHttpUrl } from './utils';
+
+export function StorefrontMerchSections({
+  radius,
+  sections,
+}: {
+  radius: string;
+  sections: InventoryStorefrontSection[];
+}) {
+  const visibleSections = sections
+    .filter((section) => section.status === 'published')
+    .filter((section) => section.sectionType !== 'cover')
+    .filter((section) => {
+      const sectionHref = getSafeStorefrontHttpUrl(section.href);
+      return Boolean(
+        section.title?.trim() ||
+          section.description?.trim() ||
+          section.imageUrl?.trim() ||
+          sectionHref
+      );
+    })
+    .sort((a, b) => a.sortOrder - b.sortOrder);
+
+  if (visibleSections.length === 0) return null;
+
+  return (
+    <div className="mt-4 grid gap-3">
+      {visibleSections.map((section) => {
+        const sectionHref = getSafeStorefrontHttpUrl(section.href);
+
+        return (
+          <section
+            className={cn(
+              'grid overflow-hidden border border-border bg-card md:grid-cols-[minmax(0,1fr)_280px]',
+              radius
+            )}
+            key={section.id}
+          >
+            <div className="flex min-w-0 flex-col justify-center gap-2 p-4">
+              {section.title ? (
+                <h2 className="font-semibold text-lg">{section.title}</h2>
+              ) : null}
+              {section.description ? (
+                <p className="text-muted-foreground text-sm leading-6">
+                  {section.description}
+                </p>
+              ) : null}
+              {sectionHref ? (
+                <a
+                  className="mt-1 w-fit font-medium text-sm underline-offset-4 hover:underline"
+                  href={sectionHref}
+                >
+                  {sectionHref.replace(/^https?:\/\//u, '')}
+                </a>
+              ) : null}
+            </div>
+            <StorefrontImagePanel
+              className="min-h-36 md:min-h-full"
+              imageUrl={section.imageUrl}
+              label={section.title ?? 'Storefront section'}
+            />
+          </section>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/ui/storefront/product-detail.tsx

@@ -0,0 +1,289 @@
+'use client';
+
+import { ArrowRight, Minus, Plus, ShoppingCart, Zap } from '@tuturuuu/icons';
+import type {
+  InventoryListingVariant,
+  InventoryStorefrontListing,
+} from '@tuturuuu/internal-api/inventory';
+import { cn } from '@tuturuuu/utils/format';
+import { useMemo, useState } from 'react';
+import { Badge } from '../badge';
+import { Button } from '../button';
+import { AccentButton } from './accent-button';
+import { StorefrontImagePanel } from './image-panel';
+import type { StorefrontCartLine, StorefrontSurfaceLabels } from './types';
+import {
+  formatStorefrontPrice,
+  getStorefrontLinePrice,
+  getStorefrontListingLimit,
+  getStorefrontListingVariants,
+  getStorefrontVariantLimit,
+  storefrontCartLineKey,
+} from './utils';
+
+/**
+ * Full-bleed product page: a large image alongside a details rail with price,
+ * savings, availability, description, option/variant selectors, and the
+ * quantity / add-to-cart / buy-now controls. Shared by both the dedicated
+ * product route and the product detail dialog.
+ */
+export function StorefrontProductDetail({
+  cartHref,
+  cartLines,
+  currency,
+  isSubmitting = false,
+  labels,
+  listing,
+  onBuyNow,
+  onDecrement,
+  onIncrement,
+  quantity,
+  radius,
+  showInventoryBadges,
+  surfaceClassName,
+}: {
+  cartHref?: string;
+  cartLines?: StorefrontCartLine[];
+  currency: string;
+  isSubmitting?: boolean;
+  labels: StorefrontSurfaceLabels;
+  listing: InventoryStorefrontListing;
+  onBuyNow?: (listingId: string, variantId?: string | null) => void;
+  onDecrement?: (listingId: string, variantId?: string | null) => void;
+  onIncrement?: (
+    listingId: string,
+    maxQuantity: number,
+    variantId?: string | null
+  ) => void;
+  quantity: number;
+  radius: string;
+  showInventoryBadges: boolean;
+  surfaceClassName: string;
+}) {
+  const options = listing.options ?? [];
+  const variants = useMemo(
+    () => getStorefrontListingVariants(listing),
+    [listing]
+  );
+  const hasVariants = variants.length > 0;
+
+  // Track the selected value per option group (groupId -> valueId).
+  const [selected, setSelected] = useState<Record<string, string>>({});
+
+  const selectedVariant: InventoryListingVariant | undefined = useMemo(() => {
+    if (!hasVariants || options.length === 0) return undefined;
+    return variants.find((variant) =>
+      options.every((group) => {
+        const optionValue = variant.optionValues.find(
+          (value) => value.groupId === group.id
+        );
+        return optionValue && selected[group.id] === optionValue.valueId;
+      })
+    );
+  }, [hasVariants, options, selected, variants]);
+
+  const needsSelection = hasVariants && !selectedVariant;
+  const limit = selectedVariant
+    ? getStorefrontVariantLimit(listing, selectedVariant)
+    : getStorefrontListingLimit(listing);
+  const displayPrice = getStorefrontLinePrice(listing, selectedVariant);
+  const compareAtPrice = selectedVariant
+    ? selectedVariant.compareAtPrice
+    : listing.compareAtPrice;
+  const imageUrl = selectedVariant?.imageUrl ?? listing.imageUrl;
+  const availableQuantity = selectedVariant
+    ? selectedVariant.availableQuantity
+    : listing.availableQuantity;
+
+  const cartQuantity = useMemo(() => {
+    if (!cartLines) return quantity;
+    const key = storefrontCartLineKey(listing.id, selectedVariant?.id);
+    return (
+      cartLines.find(
+        (line) => storefrontCartLineKey(line.listingId, line.variantId) === key
+      )?.quantity ?? 0
+    );
+  }, [cartLines, listing.id, quantity, selectedVariant?.id]);
+
+  const canChange = Boolean(onIncrement || onDecrement);
+  const variantId = selectedVariant?.id ?? null;
+  const soldOut = limit === 0;
+  const addDisabled = needsSelection || soldOut || cartQuantity >= limit;
+  const buyNowDisabled = needsSelection || soldOut || isSubmitting;
+  const savingsPercent =
+    compareAtPrice && compareAtPrice > displayPrice
+      ? Math.round((1 - displayPrice / compareAtPrice) * 100)
+      : 0;
+
+  return (
+    <div className="grid gap-6 lg:grid-cols-2">
+      <div className={cn('overflow-hidden', surfaceClassName, radius)}>
+        <StorefrontImagePanel
+          className="aspect-square"
+          imageUrl={imageUrl}
+          label={listing.title}
+          priority
+        />
+      </div>
+
+      <div className="flex flex-col gap-5">
+        <div className="flex flex-wrap items-center gap-2">
+          <Badge className="border-border bg-background" variant="outline">
+            {listing.listingType === 'bundle' ? labels.bundle : labels.product}
+          </Badge>
+          {savingsPercent > 0 ? (
+            <Badge
+              className="border-transparent bg-[var(--storefront-accent,var(--primary))] text-[var(--storefront-accent-foreground,var(--primary-foreground))]"
+              variant="outline"
+            >
+              -{savingsPercent}%
+            </Badge>
+          ) : null}
+        </div>
+
+        <h2 className="text-balance font-semibold text-3xl tracking-tight md:text-4xl">
+          {listing.title}
+        </h2>
+
+        <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+          {needsSelection ? (
+            <span className="text-muted-foreground text-sm">
+              {labels.fromPrice}{' '}
+              <span className="font-semibold text-foreground text-xl tabular-nums">
+                {formatStorefrontPrice(displayPrice, currency)}
+              </span>
+            </span>
+          ) : (
+            <>
+              <span className="font-semibold text-2xl tabular-nums">
+                {formatStorefrontPrice(displayPrice, currency)}
+              </span>
+              {compareAtPrice ? (
+                <span className="text-lg text-muted-foreground tabular-nums line-through">
+                  {formatStorefrontPrice(compareAtPrice, currency)}
+                </span>
+              ) : null}
+            </>
+          )}
+        </div>
+
+        {options.length > 0 ? (
+          <div className="grid gap-4">
+            {options.map((group) => (
+              <div className="grid gap-2" key={group.id}>
+                <span className="font-medium text-sm">{group.name}</span>
+                <div className="flex flex-wrap gap-2">
+                  {group.values.map((value) => {
+                    const isActive = selected[group.id] === value.id;
+                    return (
+                      <button
+                        aria-pressed={isActive}
+                        className={cn(
+                          'inline-flex h-10 items-center justify-center border px-3 font-medium text-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',
+                          radius,
+                          isActive
+                            ? 'border-[var(--storefront-accent-border,var(--border))] bg-[var(--storefront-accent-soft,var(--muted))] text-[var(--storefront-accent-text,var(--primary))]'
+                            : 'border-border bg-card hover:bg-muted/45'
+                        )}
+                        key={value.id}
+                        onClick={() =>
+                          setSelected((current) => ({
+                            ...current,
+                            [group.id]: value.id,
+                          }))
+                        }
+                        type="button"
+                      >
+                        {value.label}
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : null}
+
+        {showInventoryBadges && !needsSelection ? (
+          <p className="text-muted-foreground text-sm">
+            {soldOut
+              ? labels.soldOut
+              : typeof availableQuantity === 'number'
+                ? `${availableQuantity} ${labels.available}`
+                : labels.available}
+          </p>
+        ) : null}
+
+        <p className="text-pretty text-muted-foreground leading-7">
+          {listing.description ?? labels.fallbackDescription}
+        </p>
+
+        <div className="mt-auto flex flex-wrap items-center gap-3 border-border border-t pt-5">
+          {canChange ? (
+            needsSelection ? (
+              <Button className={cn('h-11', radius)} disabled type="button">
+                {labels.selectOptions}
+              </Button>
+            ) : cartQuantity > 0 ? (
+              <div className="flex items-center gap-1">
+                <Button
+                  aria-label={`${labels.quantity} -`}
+                  className={cn('h-11 w-11 p-0', radius)}
+                  onClick={() => onDecrement?.(listing.id, variantId)}
+                  type="button"
+                  variant="outline"
+                >
+                  <Minus className="h-4 w-4" />
+                </Button>
+                <span className="min-w-10 text-center font-semibold tabular-nums">
+                  {cartQuantity}
+                </span>
+                <Button
+                  aria-label={`${labels.quantity} +`}
+                  className={cn('h-11 w-11 p-0', radius)}
+                  disabled={addDisabled}
+                  onClick={() => onIncrement?.(listing.id, limit, variantId)}
+                  type="button"
+                  variant="outline"
+                >
+                  <Plus className="h-4 w-4" />
+                </Button>
+              </div>
+            ) : (
+              <AccentButton
+                disabled={addDisabled}
+                onClick={() => onIncrement?.(listing.id, limit, variantId)}
+                radius={radius}
+              >
+                <Plus className="h-4 w-4" />
+                {soldOut ? labels.soldOut : labels.add}
+              </AccentButton>
+            )
+          ) : null}
+
+          {onBuyNow ? (
+            <Button
+              className={cn('h-11', radius)}
+              disabled={buyNowDisabled}
+              onClick={() => onBuyNow(listing.id, variantId)}
+              type="button"
+            >
+              <Zap className="size-4 shrink-0" />
+              {labels.buyNow}
+            </Button>
+          ) : null}
+
+          {cartHref && cartQuantity > 0 ? (
+            <Button asChild className={cn('h-11', radius)} variant="outline">
+              <a href={cartHref}>
+                <ShoppingCart className="size-4 shrink-0" />
+                {labels.cart}
+                <ArrowRight className="size-4 shrink-0" />
+              </a>
+            </Button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/storefront/product-dialog.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import type { InventoryStorefrontListing } from '@tuturuuu/internal-api/inventory';
+import { Dialog, DialogContent, DialogTitle } from '../dialog';
+import { StorefrontProductDetail } from './product-detail';
+import type { StorefrontCartLine, StorefrontSurfaceLabels } from './types';
+
+/**
+ * Large product detail dialog opened from a listing card. Reuses the same
+ * StorefrontProductDetail body as the dedicated product route, so the dialog
+ * and the deep-link page stay visually identical.
+ */
+export function StorefrontProductDialog({
+  cartHref,
+  cartLines,
+  currency,
+  isSubmitting,
+  labels,
+  listing,
+  onBuyNow,
+  onDecrement,
+  onIncrement,
+  onOpenChange,
+  radius,
+  showInventoryBadges,
+  surfaceClassName,
+}: {
+  cartHref?: string;
+  cartLines?: StorefrontCartLine[];
+  currency: string;
+  isSubmitting?: boolean;
+  labels: StorefrontSurfaceLabels;
+  listing: InventoryStorefrontListing | null;
+  onBuyNow?: (listingId: string, variantId?: string | null) => void;
+  onDecrement?: (listingId: string, variantId?: string | null) => void;
+  onIncrement?: (
+    listingId: string,
+    maxQuantity: number,
+    variantId?: string | null
+  ) => void;
+  onOpenChange: (open: boolean) => void;
+  radius: string;
+  showInventoryBadges: boolean;
+  surfaceClassName: string;
+}) {
+  return (
+    <Dialog onOpenChange={onOpenChange} open={Boolean(listing)}>
+      <DialogContent className="max-h-[90vh] w-[calc(100%-1.5rem)] max-w-5xl overflow-y-auto sm:w-[calc(100%-2rem)]">
+        {listing ? (
+          <>
+            <DialogTitle className="sr-only">{listing.title}</DialogTitle>
+            <StorefrontProductDetail
+              cartHref={cartHref}
+              cartLines={cartLines}
+              currency={currency}
+              isSubmitting={isSubmitting}
+              labels={labels}
+              listing={listing}
+              onBuyNow={onBuyNow}
+              onDecrement={onDecrement}
+              onIncrement={onIncrement}
+              quantity={0}
+              radius={radius}
+              showInventoryBadges={showInventoryBadges}
+              surfaceClassName={surfaceClassName}
+            />
+          </>
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  );
+}