@tuturuuu/ui 0.5.0 → 0.6.0

package/src/components/ui/storefront/cart-summary.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { ArrowRight, TriangleAlert } from '@tuturuuu/icons';
+import type { InventoryStorefront } from '@tuturuuu/internal-api/inventory';
+import { cn } from '@tuturuuu/utils/format';
+import type { FormEvent } from 'react';
+import { Badge } from '../badge';
+import { Button } from '../button';
+import { AccentButton } from './accent-button';
+import type { StorefrontCartEntry, StorefrontSurfaceLabels } from './types';
+import { formatStorefrontPrice, storefrontSurfaceClasses } from './utils';
+
+export function StorefrontCartSummary({
+  cartEntries,
+  checkoutHref,
+  currency,
+  isCheckout,
+  isPreview,
+  isSubmitting,
+  labels,
+  onCheckoutSubmit,
+  radius,
+  storefront,
+  total,
+}: {
+  cartEntries: StorefrontCartEntry[];
+  checkoutHref?: string;
+  currency: string;
+  isCheckout: boolean;
+  isPreview: boolean;
+  isSubmitting: boolean;
+  labels: StorefrontSurfaceLabels;
+  onCheckoutSubmit?: (formData: FormData) => void;
+  radius: string;
+  storefront: InventoryStorefront;
+  total: number;
+}) {
+  const hasCart = cartEntries.length > 0;
+  const isCheckoutDisabled = storefront.checkoutMode === 'disabled';
+  const submitDisabled = !hasCart || isSubmitting || isCheckoutDisabled;
+
+  return (
+    <aside
+      className={cn(
+        'h-fit p-4 lg:sticky lg:top-4',
+        storefrontSurfaceClasses[storefront.surfaceStyle],
+        radius
+      )}
+    >
+      <div className="flex items-center justify-between gap-3">
+        <p className="font-semibold">{labels.cart}</p>
+        <Badge className="border-border bg-background" variant="outline">
+          {cartEntries.length}
+        </Badge>
+      </div>
+      <p className="mt-2 text-muted-foreground text-sm leading-6">
+        {labels.reservedCopy}
+      </p>
+      <div className="mt-4 grid gap-2">
+        {cartEntries.map(({ line, listing }) => (
+          <div
+            className="flex items-center justify-between gap-3 text-sm"
+            key={line.listingId}
+          >
+            <span className="min-w-0 truncate">
+              {line.quantity} x {listing.title}
+            </span>
+            <span className="font-medium">
+              {formatStorefrontPrice(listing.price * line.quantity, currency)}
+            </span>
+          </div>
+        ))}
+      </div>
+      <div className="mt-4 flex items-center justify-between border-border border-t pt-4">
+        <span className="text-muted-foreground text-sm">{labels.total}</span>
+        <span className="font-semibold">
+          {formatStorefrontPrice(total, currency)}
+        </span>
+      </div>
+      {!hasCart ? (
+        <p className="mt-4 flex items-center gap-2 rounded-md border border-border bg-muted/40 px-3 py-2 text-muted-foreground text-sm">
+          <TriangleAlert className="h-4 w-4" />
+          {labels.emptyCart}
+        </p>
+      ) : null}
+      {isCheckout ? (
+        <form
+          className="mt-4 grid gap-2"
+          onSubmit={(event: FormEvent<HTMLFormElement>) => {
+            event.preventDefault();
+            onCheckoutSubmit?.(new FormData(event.currentTarget));
+          }}
+        >
+          <input
+            className="h-10 rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+            name="name"
+            placeholder={labels.form.name}
+            required
+          />
+          <input
+            className="h-10 rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+            name="email"
+            placeholder={labels.form.email}
+            required
+            type="email"
+          />
+          <input
+            className="h-10 rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+            name="phone"
+            placeholder={labels.form.phone}
+          />
+          <textarea
+            className="min-h-20 rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+            name="note"
+            placeholder={labels.form.note}
+          />
+          <AccentButton disabled={submitDisabled} radius={radius}>
+            {isSubmitting ? labels.reserving : labels.reserve}
+            <ArrowRight className="h-4 w-4" />
+          </AccentButton>
+        </form>
+      ) : isPreview || isCheckoutDisabled ? (
+        <Button className={cn('mt-4 w-full', radius)} disabled type="button">
+          {labels.checkoutDisabled}
+        </Button>
+      ) : (
+        <Button
+          asChild
+          className={cn('mt-4 w-full', radius)}
+          disabled={!hasCart}
+        >
+          <a aria-disabled={!hasCart} href={hasCart ? checkoutHref : undefined}>
+            {labels.checkout}
+            <ArrowRight className="h-4 w-4" />
+          </a>
+        </Button>
+      )}
+    </aside>
+  );
+}

package/src/components/ui/storefront/empty-listings.tsx

@@ -0,0 +1,32 @@
+import { PackageOpen } from '@tuturuuu/icons';
+import { cn } from '@tuturuuu/utils/format';
+import type { ReactNode } from 'react';
+import type { StorefrontSurfaceLabels } from './types';
+
+export function StorefrontEmptyListings({
+  action,
+  labels,
+  radius,
+}: {
+  action?: ReactNode;
+  labels: StorefrontSurfaceLabels;
+  radius: string;
+}) {
+  return (
+    <div
+      className={cn(
+        'grid min-h-56 place-items-center border border-dashed bg-muted/25 p-6 text-center sm:col-span-2 xl:col-span-3',
+        radius
+      )}
+    >
+      <div className="max-w-sm">
+        <PackageOpen className="mx-auto h-8 w-8 text-muted-foreground" />
+        <p className="mt-3 font-semibold">{labels.emptyListingsTitle}</p>
+        <p className="mt-1 text-muted-foreground text-sm leading-6">
+          {labels.emptyListingsDescription}
+        </p>
+        {action ? <div className="mt-4">{action}</div> : null}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/storefront/hero-panel.tsx

@@ -0,0 +1,70 @@
+import { Store } from '@tuturuuu/icons';
+import type { InventoryStorefront } from '@tuturuuu/internal-api/inventory';
+import { cn } from '@tuturuuu/utils/format';
+import { Badge } from '../badge';
+import { StorefrontImagePanel } from './image-panel';
+import type { StorefrontSurfaceLabels } from './types';
+import { storefrontSurfaceClasses } from './utils';
+
+export function StorefrontHeroPanel({
+  currency,
+  labels,
+  listingsCount,
+  radius,
+  storefront,
+}: {
+  currency: string;
+  labels: StorefrontSurfaceLabels;
+  listingsCount: number;
+  radius: string;
+  storefront: InventoryStorefront;
+}) {
+  return (
+    <section
+      className={cn(
+        'grid min-h-44 overflow-hidden',
+        storefrontSurfaceClasses[storefront.surfaceStyle],
+        radius,
+        storefront.themePreset === 'editorial'
+          ? 'md:grid-cols-[minmax(0,1.15fr)_360px]'
+          : 'md:grid-cols-[minmax(0,1fr)_280px]'
+      )}
+    >
+      <div className="flex min-w-0 flex-col justify-between gap-6 p-5">
+        <div>
+          <div className="flex items-center gap-2 text-muted-foreground text-xs">
+            <Store className="h-4 w-4" />
+            <span>{labels.browse}</span>
+          </div>
+          <h2
+            className={cn(
+              'mt-3 text-balance font-semibold tracking-normal',
+              storefront.themePreset === 'editorial'
+                ? 'text-3xl md:text-4xl'
+                : 'text-2xl'
+            )}
+          >
+            {storefront.name}
+          </h2>
+          <p className="mt-2 max-w-2xl text-muted-foreground text-sm leading-6">
+            {storefront.description ?? labels.fallbackDescription}
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <Badge className="border-border bg-background" variant="outline">
+            {listingsCount} {labels.product}
+          </Badge>
+          <Badge className="border-border bg-background" variant="outline">
+            {currency}
+          </Badge>
+        </div>
+      </div>
+
+      <StorefrontImagePanel
+        className="min-h-44 md:min-h-full"
+        imageUrl={storefront.heroImageUrl}
+        label={storefront.name}
+      />
+    </section>
+  );
+}

package/src/components/ui/storefront/image-panel.tsx

@@ -0,0 +1,40 @@
+import { PackageOpen } from '@tuturuuu/icons';
+import { cn } from '@tuturuuu/utils/format';
+import { getListingInitials } from './utils';
+
+export function StorefrontImagePanel({
+  className,
+  imageUrl,
+  label,
+}: {
+  className?: string;
+  imageUrl: string | null;
+  label: string;
+}) {
+  if (imageUrl) {
+    return (
+      // biome-ignore lint/performance/noImgElement: storefront images are workspace-controlled external URLs
+      <img
+        alt=""
+        className={cn('w-full object-cover', className)}
+        src={imageUrl}
+      />
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'grid w-full place-items-center border-border bg-muted/55 text-muted-foreground',
+        className
+      )}
+    >
+      <div className="grid place-items-center gap-2 text-center">
+        <PackageOpen className="h-6 w-6" />
+        <span className="max-w-24 truncate font-semibold text-sm">
+          {getListingInitials(label) || label}
+        </span>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/storefront/index.ts

@@ -0,0 +1,12 @@
+export { StorefrontSurface } from './storefront-surface';
+export type {
+  StorefrontCartEntry,
+  StorefrontCartLine,
+  StorefrontSurfaceLabels,
+  StorefrontSurfaceMode,
+} from './types';
+export {
+  formatStorefrontPrice,
+  getStorefrontListingLimit,
+  sanitizeStorefrontAccentColor,
+} from './utils';

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

@@ -0,0 +1,129 @@
+'use client';
+
+import { Minus, Plus } from '@tuturuuu/icons';
+import type { InventoryStorefrontListing } from '@tuturuuu/internal-api/inventory';
+import { cn } from '@tuturuuu/utils/format';
+import { Badge } from '../badge';
+import { Button } from '../button';
+import { AccentButton } from './accent-button';
+import { StorefrontImagePanel } from './image-panel';
+import type { StorefrontSurfaceLabels } from './types';
+import { formatStorefrontPrice, getStorefrontListingLimit } from './utils';
+
+export function StorefrontListingCard({
+  currency,
+  isList,
+  labels,
+  listing,
+  onDecrement,
+  onIncrement,
+  quantity,
+  radius,
+  showInventoryBadges,
+  surfaceClassName,
+}: {
+  currency: string;
+  isList: boolean;
+  labels: StorefrontSurfaceLabels;
+  listing: InventoryStorefrontListing;
+  onDecrement?: (listingId: string) => void;
+  onIncrement?: (listingId: string, maxQuantity: number) => void;
+  quantity: number;
+  radius: string;
+  showInventoryBadges: boolean;
+  surfaceClassName: string;
+}) {
+  const limit = getStorefrontListingLimit(listing);
+  const disabled = limit === 0 || quantity >= limit;
+  const canChange = Boolean(onIncrement || onDecrement);
+
+  return (
+    <article
+      className={cn(
+        surfaceClassName,
+        radius,
+        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'
+      )}
+    >
+      <StorefrontImagePanel
+        className={cn(isList ? 'aspect-square' : 'aspect-[4/3]')}
+        imageUrl={listing.imageUrl}
+        label={listing.title}
+      />
+      <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>
+          <Badge className="border-border bg-background" variant="outline">
+            {listing.listingType === 'bundle' ? labels.bundle : labels.product}
+          </Badge>
+        </div>
+        <p className="mt-1 line-clamp-2 text-muted-foreground text-sm leading-6">
+          {listing.description ?? labels.fallbackDescription}
+        </p>
+        {showInventoryBadges ? (
+          <p className="mt-2 text-muted-foreground text-xs">
+            {limit === 0
+              ? labels.soldOut
+              : `${listing.availableQuantity ?? labels.available} ${
+                  typeof listing.availableQuantity === 'number'
+                    ? labels.available
+                    : ''
+                }`.trim()}
+          </p>
+        ) : null}
+      </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">
+              {formatStorefrontPrice(listing.compareAtPrice, currency)}
+            </p>
+          ) : null}
+        </div>
+        {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)}
+                type="button"
+                variant="outline"
+              >
+                <Minus className="h-4 w-4" />
+              </Button>
+              <span className="min-w-8 text-center font-medium text-sm">
+                {quantity}
+              </span>
+              <Button
+                aria-label={`${labels.quantity} +`}
+                className={cn('h-8 w-8 p-0', radius)}
+                disabled={disabled}
+                onClick={() => onIncrement?.(listing.id, limit)}
+                type="button"
+                variant="outline"
+              >
+                <Plus className="h-4 w-4" />
+              </Button>
+            </div>
+          ) : (
+            <AccentButton
+              disabled={disabled}
+              onClick={() => onIncrement?.(listing.id, limit)}
+              radius={radius}
+            >
+              <Plus className="h-4 w-4" />
+              {limit === 0 ? labels.soldOut : labels.add}
+            </AccentButton>
+          )
+        ) : null}
+      </div>
+    </article>
+  );
+}

package/src/components/ui/storefront/storefront-surface.test.tsx

@@ -0,0 +1,85 @@
+import { render, screen } from '@testing-library/react';
+import type { InventoryStorefront } from '@tuturuuu/internal-api/inventory';
+import { describe, expect, it } from 'vitest';
+import { StorefrontSurface } from './storefront-surface';
+import { sanitizeStorefrontAccentColor } from './utils';
+
+const storefront: InventoryStorefront = {
+  accentColor: '#abc',
+  cornerStyle: 'rounded',
+  createdAt: '2026-06-12T00:00:00.000Z',
+  currency: 'USD',
+  checkoutMode: 'polar',
+  description: 'Buyer-facing copy',
+  heroImageUrl: null,
+  id: 'storefront-1',
+  layoutStyle: 'grid',
+  listingsCount: 0,
+  name: 'Preview Store',
+  showInventoryBadges: true,
+  slug: 'preview-store',
+  status: 'published',
+  surfaceStyle: 'soft',
+  themePreset: 'catalog',
+  updatedAt: '2026-06-12T00:00:00.000Z',
+  visibility: 'public',
+  wsId: 'ws-1',
+};
+
+describe('StorefrontSurface', () => {
+  it('sanitizes hex accent colors only', () => {
+    expect(sanitizeStorefrontAccentColor('#abc')).toBe('#aabbcc');
+    expect(sanitizeStorefrontAccentColor('#123abc')).toBe('#123abc');
+    expect(sanitizeStorefrontAccentColor('red')).toBeNull();
+  });
+
+  it('renders a preview empty state without enabling checkout', () => {
+    render(
+      <StorefrontSurface
+        labels={{
+          checkoutDisabled: 'Preview checkout disabled',
+          emptyListingsDescription: 'Create a listing next.',
+          emptyListingsTitle: 'No buyer listings',
+        }}
+        listings={[]}
+        mode="preview"
+        storefront={storefront}
+      />
+    );
+
+    expect(screen.getAllByText('Preview Store')).toHaveLength(2);
+    expect(screen.getByText('No buyer listings')).toBeInTheDocument();
+    expect(screen.getByText('Create a listing next.')).toBeInTheDocument();
+    expect(screen.getByText('Preview checkout disabled')).toBeDisabled();
+  });
+
+  it('shows simulated checkout mode badges', () => {
+    render(
+      <StorefrontSurface
+        labels={{ simulatedBadge: 'Simulated checkout' }}
+        listings={[]}
+        mode="store"
+        storefront={{ ...storefront, checkoutMode: 'simulated' }}
+      />
+    );
+
+    expect(screen.getByText('Simulated checkout')).toBeInTheDocument();
+  });
+
+  it('shows disabled checkout mode badges and blocks checkout', () => {
+    render(
+      <StorefrontSurface
+        labels={{
+          checkoutDisabled: 'Checkout unavailable',
+          checkoutDisabledBadge: 'Checkout disabled',
+        }}
+        listings={[]}
+        mode="store"
+        storefront={{ ...storefront, checkoutMode: 'disabled' }}
+      />
+    );
+
+    expect(screen.getByText('Checkout disabled')).toBeInTheDocument();
+    expect(screen.getByText('Checkout unavailable')).toBeDisabled();
+  });
+});