@tuturuuu/ui 0.4.1 → 0.6.0

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();
+  });
+});

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

@@ -0,0 +1,235 @@
+'use client';
+
+import { ShoppingCart } from '@tuturuuu/icons';
+import type {
+  InventoryStorefront,
+  InventoryStorefrontListing,
+} from '@tuturuuu/internal-api/inventory';
+import { cn } from '@tuturuuu/utils/format';
+import type { ReactNode } from 'react';
+import { Badge } from '../badge';
+import { StorefrontCartSummary } from './cart-summary';
+import { StorefrontEmptyListings } from './empty-listings';
+import { StorefrontHeroPanel } from './hero-panel';
+import { StorefrontListingCard } from './listing-card';
+import type {
+  StorefrontCartLine,
+  StorefrontSurfaceLabels,
+  StorefrontSurfaceMode,
+} from './types';
+import { mergeStorefrontSurfaceLabels } from './types';
+import {
+  getAccentStyle,
+  getStorefrontListingLimit,
+  sanitizeStorefrontAccentColor,
+  storefrontRadiusClasses,
+  storefrontSurfaceClasses,
+} from './utils';
+
+export function StorefrontSurface({
+  cartLines = [],
+  checkoutHref,
+  className,
+  emptyAction,
+  headerActions,
+  isDemo = false,
+  isSubmitting = false,
+  labels: labelOverrides,
+  listings,
+  mode,
+  notice,
+  onCheckoutSubmit,
+  onDecrement,
+  onIncrement,
+  selectedListingId,
+  storefront,
+}: {
+  cartLines?: StorefrontCartLine[];
+  checkoutHref?: string;
+  className?: string;
+  emptyAction?: ReactNode;
+  headerActions?: ReactNode;
+  isDemo?: boolean;
+  isSubmitting?: boolean;
+  labels?: Partial<StorefrontSurfaceLabels>;
+  listings: InventoryStorefrontListing[];
+  mode: StorefrontSurfaceMode;
+  notice?: ReactNode;
+  onCheckoutSubmit?: (formData: FormData) => void;
+  onDecrement?: (listingId: string) => void;
+  onIncrement?: (listingId: string, maxQuantity: number) => void;
+  selectedListingId?: string;
+  storefront: InventoryStorefront;
+}) {
+  const labels = mergeStorefrontSurfaceLabels(labelOverrides);
+  const accentColor = sanitizeStorefrontAccentColor(storefront.accentColor);
+  const radius = storefrontRadiusClasses[storefront.cornerStyle];
+  const cartEntries = cartLines.flatMap((line) => {
+    const listing = listings.find((item) => item.id === line.listingId);
+    return listing ? [{ line, listing }] : [];
+  });
+  const checkoutEntries = cartEntries.filter(({ line, listing }) => {
+    const quantity = Math.min(
+      line.quantity,
+      getStorefrontListingLimit(listing)
+    );
+    return quantity > 0;
+  });
+  const total = checkoutEntries.reduce((sum, { line, listing }) => {
+    const quantity = Math.min(
+      line.quantity,
+      getStorefrontListingLimit(listing)
+    );
+    return sum + listing.price * quantity;
+  }, 0);
+  const cartQuantity = cartLines.reduce((sum, line) => sum + line.quantity, 0);
+  const visibleListings =
+    mode === 'product' && selectedListingId
+      ? listings.filter((listing) => listing.id === selectedListingId)
+      : listings;
+  const isCheckout = mode === 'checkout';
+  const isPreview = mode === 'preview';
+  const showCartListings = mode === 'cart' || isCheckout;
+  const listingRows = showCartListings
+    ? cartEntries.map(({ listing }) => listing)
+    : visibleListings;
+  const currency = storefront.currency ?? 'USD';
+
+  return (
+    <main
+      className={cn('min-h-dvh bg-background text-foreground', className)}
+      style={getAccentStyle(accentColor)}
+    >
+      {notice ? (
+        <div className="border-border border-b bg-muted/35 px-4 py-2 text-center text-muted-foreground text-sm">
+          {notice}
+        </div>
+      ) : null}
+
+      <header className="border-border border-b bg-background/90 backdrop-blur">
+        <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-3 px-4 py-3">
+          <div className="min-w-0">
+            <div className="flex flex-wrap items-center gap-2 text-muted-foreground text-xs">
+              <span>
+                {storefront.visibility === 'private'
+                  ? labels.privateStore
+                  : labels.publicStore}
+              </span>
+              {isDemo ? (
+                <Badge variant="secondary">{labels.demoBadge}</Badge>
+              ) : null}
+              {isPreview ? (
+                <Badge
+                  className="border-border bg-background"
+                  variant="outline"
+                >
+                  {labels.previewBadge}
+                </Badge>
+              ) : null}
+              {storefront.checkoutMode === 'simulated' ? (
+                <Badge
+                  className="border-border bg-background"
+                  variant="outline"
+                >
+                  {labels.simulatedBadge}
+                </Badge>
+              ) : null}
+              {storefront.checkoutMode === 'disabled' ? (
+                <Badge
+                  className="border-border bg-background"
+                  variant="outline"
+                >
+                  {labels.checkoutDisabledBadge}
+                </Badge>
+              ) : null}
+            </div>
+            <h1 className="mt-0.5 truncate font-semibold text-xl">
+              {storefront.name}
+            </h1>
+          </div>
+          <div className="flex items-center gap-2">
+            {headerActions}
+            <span
+              className={cn(
+                'inline-flex h-9 min-w-12 items-center justify-center gap-2 border bg-card px-3 font-medium text-sm',
+                radius
+              )}
+            >
+              <ShoppingCart className="h-4 w-4" />
+              {cartQuantity}
+            </span>
+          </div>
+        </div>
+      </header>
+
+      <section className="mx-auto grid max-w-7xl gap-4 px-4 py-5 lg:grid-cols-[minmax(0,1fr)_340px]">
+        <div className="min-w-0">
+          <StorefrontHeroPanel
+            currency={currency}
+            labels={labels}
+            listingsCount={listings.length}
+            radius={radius}
+            storefront={storefront}
+          />
+
+          <div
+            className={cn(
+              'mt-4',
+              storefront.layoutStyle === 'list'
+                ? 'grid gap-3'
+                : 'grid gap-3 sm:grid-cols-2 xl:grid-cols-3',
+              storefront.layoutStyle === 'feature' &&
+                '[&>article:first-child]:sm:col-span-2'
+            )}
+          >
+            {listingRows.length === 0 ? (
+              <StorefrontEmptyListings
+                action={emptyAction}
+                labels={labels}
+                radius={radius}
+              />
+            ) : (
+              listingRows.map((listing) => {
+                const line = cartLines.find(
+                  (item) => item.listingId === listing.id
+                );
+
+                return (
+                  <StorefrontListingCard
+                    currency={currency}
+                    isList={storefront.layoutStyle === 'list'}
+                    key={listing.id}
+                    labels={labels}
+                    listing={listing}
+                    onDecrement={onDecrement}
+                    onIncrement={onIncrement}
+                    quantity={line?.quantity ?? 0}
+                    radius={radius}
+                    showInventoryBadges={storefront.showInventoryBadges}
+                    surfaceClassName={
+                      storefrontSurfaceClasses[storefront.surfaceStyle]
+                    }
+                  />
+                );
+              })
+            )}
+          </div>
+        </div>
+
+        <StorefrontCartSummary
+          cartEntries={checkoutEntries}
+          checkoutHref={checkoutHref}
+          currency={currency}
+          isCheckout={isCheckout}
+          isPreview={isPreview}
+          isSubmitting={isSubmitting}
+          labels={labels}
+          onCheckoutSubmit={onCheckoutSubmit}
+          radius={radius}
+          storefront={storefront}
+          total={total}
+        />
+      </section>
+    </main>
+  );
+}

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

@@ -0,0 +1,99 @@
+import type { InventoryStorefrontListing } from '@tuturuuu/internal-api/inventory';
+
+export type StorefrontCartLine = {
+  listingId: string;
+  quantity: number;
+};
+
+export type StorefrontCartEntry = {
+  line: StorefrontCartLine;
+  listing: InventoryStorefrontListing;
+};
+
+export type StorefrontSurfaceMode =
+  | 'cart'
+  | 'checkout'
+  | 'preview'
+  | 'product'
+  | 'store';
+
+export type StorefrontSurfaceLabels = {
+  add: string;
+  available: string;
+  browse: string;
+  bundle: string;
+  cart: string;
+  checkout: string;
+  checkoutDisabled: string;
+  checkoutDisabledBadge: string;
+  demoBadge: string;
+  emptyCart: string;
+  emptyListingsDescription: string;
+  emptyListingsTitle: string;
+  fallbackDescription: string;
+  form: {
+    email: string;
+    name: string;
+    note: string;
+    phone: string;
+  };
+  privateStore: string;
+  previewBadge: string;
+  product: string;
+  publicStore: string;
+  quantity: string;
+  reserve: string;
+  reserving: string;
+  reservedCopy: string;
+  simulatedBadge: string;
+  soldOut: string;
+  total: string;
+};
+
+export const defaultStorefrontSurfaceLabels: StorefrontSurfaceLabels = {
+  add: 'Add',
+  available: 'available',
+  browse: 'Browse',
+  bundle: 'Bundle',
+  cart: 'Cart',
+  checkout: 'Checkout',
+  checkoutDisabled: 'Checkout is disabled in preview',
+  checkoutDisabledBadge: 'Checkout disabled',
+  demoBadge: 'Demo',
+  emptyCart: 'Add a listing to start checkout.',
+  emptyListingsDescription:
+    'Publish a listing to make this storefront ready for buyers.',
+  emptyListingsTitle: 'No listings yet',
+  fallbackDescription: 'This listing is available for checkout.',
+  form: {
+    email: 'Email',
+    name: 'Name',
+    note: 'Order note',
+    phone: 'Phone',
+  },
+  privateStore: 'Private',
+  previewBadge: 'Preview',
+  product: 'Product',
+  publicStore: 'Public',
+  quantity: 'Qty',
+  reserve: 'Reserve with Polar',
+  reserving: 'Reserving...',
+  reservedCopy:
+    'Review your cart, then continue with the available checkout mode.',
+  simulatedBadge: 'Simulated checkout',
+  soldOut: 'Sold out',
+  total: 'Total',
+};
+
+export function mergeStorefrontSurfaceLabels(
+  labels?: Partial<StorefrontSurfaceLabels>
+) {
+  return {
+    ...defaultStorefrontSurfaceLabels,
+    ...labels,
+    form: {
+      ...defaultStorefrontSurfaceLabels.form,
+      ...labels?.form,
+    },
+  };
+}

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

@@ -0,0 +1,90 @@
+import type {
+  InventoryStorefront,
+  InventoryStorefrontListing,
+} from '@tuturuuu/internal-api/inventory';
+import type { CSSProperties } from 'react';
+
+export const storefrontRadiusClasses: Record<
+  InventoryStorefront['cornerStyle'],
+  string
+> = {
+  compact: 'rounded-md',
+  rounded: 'rounded-lg',
+  soft: 'rounded-2xl',
+};
+
+export const storefrontSurfaceClasses: Record<
+  InventoryStorefront['surfaceStyle'],
+  string
+> = {
+  glass:
+    'border border-border/70 bg-card/75 shadow-sm shadow-foreground/5 backdrop-blur',
+  soft: 'border border-border/70 bg-muted/35 shadow-sm shadow-foreground/5',
+  solid: 'border border-border bg-card shadow-sm shadow-foreground/5',
+};
+
+export type StorefrontAccentStyle = CSSProperties & {
+  '--storefront-accent'?: string;
+  '--storefront-accent-foreground'?: string;
+};
+
+export function sanitizeStorefrontAccentColor(value?: string | null) {
+  const normalized = value?.trim();
+  if (!normalized) return null;
+
+  if (/^#[0-9a-f]{3}$/i.test(normalized)) {
+    const [, r, g, b] = normalized;
+    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
+  }
+
+  if (/^#[0-9a-f]{6}$/i.test(normalized)) {
+    return normalized.toLowerCase();
+  }
+
+  return null;
+}
+
+export function getStorefrontListingLimit(listing: InventoryStorefrontListing) {
+  const available =
+    typeof listing.availableQuantity === 'number'
+      ? listing.availableQuantity
+      : Number.POSITIVE_INFINITY;
+
+  return Math.max(0, Math.min(listing.maxPerOrder, available));
+}
+
+export function formatStorefrontPrice(value: number, currency: string) {
+  return new Intl.NumberFormat(undefined, {
+    currency,
+    maximumFractionDigits: 0,
+    style: 'currency',
+  }).format(value);
+}
+
+export function getListingInitials(title: string) {
+  return title
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase())
+    .join('');
+}
+
+export function getAccentStyle(
+  accentColor: string | null
+): StorefrontAccentStyle {
+  if (!accentColor) return {};
+
+  return {
+    '--storefront-accent': accentColor,
+    '--storefront-accent-foreground': getAccentForeground(accentColor),
+  };
+}
+
+function getAccentForeground(hexColor: string) {
+  const red = Number.parseInt(hexColor.slice(1, 3), 16);
+  const green = Number.parseInt(hexColor.slice(3, 5), 16);
+  const blue = Number.parseInt(hexColor.slice(5, 7), 16);
+  const luminance = (0.299 * red + 0.587 * green + 0.114 * blue) / 255;
+  return luminance > 0.64 ? '#111111' : '#ffffff';
+}

package/src/components/ui/tu-do/boards/boardId/kanban/bulk/__tests__/bulk-mutations-move.test.tsx

@@ -10,6 +10,10 @@ import type { ReactElement, ReactNode } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { useBulkOperations } from '../bulk-operations';
 
+const { mockDispatchTaskSoundCue } = vi.hoisted(() => ({
+  mockDispatchTaskSoundCue: vi.fn(),
+}));
+
 vi.mock('next-intl', () => ({
   useTranslations: () => {
     const translate = (key: string, values?: Record<string, unknown>) =>
@@ -49,6 +53,10 @@ vi.mock('@tuturuuu/ui/sonner', () => ({
   },
 }));
 
+vi.mock('../../../../../shared/task-sound-effects', () => ({
+  dispatchTaskSoundCue: mockDispatchTaskSoundCue,
+}));
+
 describe('bulk move mutations', () => {
   let queryClient: QueryClient;
   let wrapper: ({ children }: { children: ReactNode }) => ReactElement;
@@ -172,5 +180,11 @@ describe('bulk move mutations', () => {
         personal_list_id: 'list-2',
       })
     );
+    expect(mockDispatchTaskSoundCue).toHaveBeenCalledTimes(1);
+    expect(mockDispatchTaskSoundCue).toHaveBeenCalledWith({
+      count: 2,
+      cue: 'move',
+      intensity: 1.2,
+    });
   });
 });

package/src/components/ui/tu-do/boards/boardId/kanban/bulk/bulk-operations.ts

@@ -2,6 +2,10 @@
 
 import type { Task } from '@tuturuuu/types/primitives/Task';
 import { useEffect } from 'react';
+import {
+  dispatchTaskSoundCue,
+  type TaskSoundCue,
+} from '../../../../shared/task-sound-effects';
 import {
   useBulkClearAssignees,
   useBulkClearLabels,
@@ -31,6 +35,14 @@ import { useBulkOperationI18n } from './bulk-operation-i18n';
 import type { BulkOperationsConfig } from './bulk-operation-types';
 import { getBulkTaskWorkspaceGroups } from './bulk-operation-utils';
 
+function dispatchBulkTaskSoundCue(cue: TaskSoundCue, count: number) {
+  dispatchTaskSoundCue({
+    cue,
+    count,
+    intensity: count > 1 ? 1.2 : 1,
+  });
+}
+
 export function useBulkOperations(config: BulkOperationsConfig) {
   const i18n = useBulkOperationI18n();
 
@@ -213,11 +225,13 @@ export function useBulkOperations(config: BulkOperationsConfig) {
       const taskIds = Array.from(selectedTasks);
       if (!taskIds.length) return;
       await priorityMutation.mutateAsync({ priority, taskIds });
+      dispatchBulkTaskSoundCue('update', taskIds.length);
     },
     bulkUpdateEstimation: async (points: number | null) => {
       const taskIds = Array.from(selectedTasks);
       if (!taskIds.length) return;
       await estimationMutation.mutateAsync({ points, taskIds });
+      dispatchBulkTaskSoundCue('update', taskIds.length);
     },
     bulkUpdateDueDate: async (
       preset: 'today' | 'tomorrow' | 'this_week' | 'next_week' | 'clear'
@@ -225,16 +239,19 @@ export function useBulkOperations(config: BulkOperationsConfig) {
       const taskIds = Array.from(selectedTasks);
       if (!taskIds.length) return;
       await dueDateMutation.mutateAsync({ preset, taskIds });
+      dispatchBulkTaskSoundCue('update', taskIds.length);
     },
     bulkUpdateCustomDueDate: async (date: Date | null) => {
       const taskIds = Array.from(selectedTasks);
       if (!taskIds.length) return;
       await customDueDateMutation.mutateAsync({ date, taskIds });
+      dispatchBulkTaskSoundCue('update', taskIds.length);
     },
     bulkMoveToList: async (listId: string, listName: string) => {
       const taskIds = Array.from(selectedTasks);
       if (!taskIds.length) return;
       await moveToListMutation.mutateAsync({ listId, listName, taskIds });
+      dispatchBulkTaskSoundCue('move', taskIds.length);
     },
     bulkMoveToStatus: async (status: 'done' | 'closed') => {
       const taskIds = Array.from(selectedTasks);
@@ -242,51 +259,61 @@ export function useBulkOperations(config: BulkOperationsConfig) {
       const listId = getListIdByStatus(status);
       if (!listId) return;
       await statusMutation.mutateAsync({ status, taskIds });
+      dispatchBulkTaskSoundCue('complete', taskIds.length);
     },
     bulkAddLabel: async (labelId: string) => {
       const taskIds = Array.from(selectedTasks);
       if (!taskIds.length) return;
       await addLabelMutation.mutateAsync({ labelId, taskIds });
+      dispatchBulkTaskSoundCue('update', taskIds.length);
     },
     bulkRemoveLabel: async (labelId: string) => {
       const taskIds = Array.from(selectedTasks);
       if (!taskIds.length) return;
       await removeLabelMutation.mutateAsync({ labelId, taskIds });
+      dispatchBulkTaskSoundCue('update', taskIds.length);
     },
     bulkAddProject: async (projectId: string) => {
       const taskIds = Array.from(selectedTasks);
       if (!taskIds.length) return;
       await addProjectMutation.mutateAsync({ projectId, taskIds });
+      dispatchBulkTaskSoundCue('update', taskIds.length);
     },
     bulkRemoveProject: async (projectId: string) => {
       const taskIds = Array.from(selectedTasks);
       if (!taskIds.length) return;
       await removeProjectMutation.mutateAsync({ projectId, taskIds });
+      dispatchBulkTaskSoundCue('update', taskIds.length);
     },
     bulkAddAssignee: async (assigneeId: string) => {
       const taskIds = Array.from(selectedTasks);
       if (!taskIds.length) return;
       await addAssigneeMutation.mutateAsync({ assigneeId, taskIds });
+      dispatchBulkTaskSoundCue('update', taskIds.length);
     },
     bulkRemoveAssignee: async (assigneeId: string) => {
       const taskIds = Array.from(selectedTasks);
       if (!taskIds.length) return;
       await removeAssigneeMutation.mutateAsync({ assigneeId, taskIds });
+      dispatchBulkTaskSoundCue('update', taskIds.length);
     },
     bulkClearLabels: async () => {
       const taskIds = Array.from(selectedTasks);
       if (!taskIds.length) return;
       await clearLabelsMutation.mutateAsync({ taskIds });
+      dispatchBulkTaskSoundCue('update', taskIds.length);
     },
     bulkClearProjects: async () => {
       const taskIds = Array.from(selectedTasks);
       if (!taskIds.length) return;
       await clearProjectsMutation.mutateAsync({ taskIds });
+      dispatchBulkTaskSoundCue('update', taskIds.length);
     },
     bulkClearAssignees: async () => {
       const taskIds = Array.from(selectedTasks);
       if (!taskIds.length) return;
       await clearAssigneesMutation.mutateAsync({ taskIds });
+      dispatchBulkTaskSoundCue('update', taskIds.length);
     },
     bulkDeleteTasks: async () => {
       const taskIds = Array.from(selectedTasks);
@@ -298,6 +325,7 @@ export function useBulkOperations(config: BulkOperationsConfig) {
         taskIds,
       });
       await deleteMutation.mutateAsync({ taskIds, workspaceGroups });
+      dispatchBulkTaskSoundCue('delete', taskIds.length);
     },
     bulkMoveToBoard: async (targetBoardId: string, targetListId: string) => {
       const taskIds = Array.from(selectedTasks);
@@ -307,6 +335,7 @@ export function useBulkOperations(config: BulkOperationsConfig) {
         targetListId,
         taskIds,
       });
+      dispatchBulkTaskSoundCue('move', taskIds.length);
     },
     getListIdByStatus,
   };