@tuturuuu/ui 0.5.0 → 0.6.0

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/task-card/task-card-open-options.test.ts

@@ -0,0 +1,134 @@
+import type { Task } from '@tuturuuu/types/primitives/Task';
+import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
+import { describe, expect, it } from 'vitest';
+import {
+  getTaskCardHydratingOpenOptions,
+  isExternalTaskSnapshot,
+} from './task-card-open-options';
+
+const task = {
+  id: 'task-1',
+  name: 'Visible task',
+  description: '',
+  list_id: 'list-1',
+  display_number: 7,
+  created_at: '2026-06-12T00:00:00.000Z',
+  end_date: null,
+  priority: 'normal',
+} satisfies Task;
+
+const list = {
+  id: 'list-1',
+  name: 'To Do',
+  board_id: 'board-1',
+  position: 0,
+  status: 'not_started',
+  color: 'BLUE',
+  created_at: '2026-06-12T00:00:00.000Z',
+  creator_id: 'user-1',
+  archived: false,
+  deleted: false,
+} satisfies TaskList;
+
+describe('getTaskCardHydratingOpenOptions', () => {
+  it('opens external task cards from the visible snapshot while hydrating source details', () => {
+    const externalTask = {
+      ...task,
+      list_id: 'personal-list',
+      source_workspace_id: 'source-workspace',
+      source_workspace_name: 'Source workspace',
+      source_board_id: 'source-board',
+      source_board_name: 'Source board',
+      source_list_id: 'source-list',
+      source_list_name: 'Doing',
+      source_list_status: 'active',
+      ticket_prefix: 'SRC',
+    } satisfies Task & { ticket_prefix: string };
+
+    expect(
+      getTaskCardHydratingOpenOptions({
+        task: externalTask,
+        boardId: 'personal-board',
+        availableLists: [list],
+        effectiveWorkspaceId: 'personal-workspace',
+        isPersonalWorkspace: true,
+      })
+    ).toEqual({
+      initialTask: {
+        ...externalTask,
+        list_id: 'source-list',
+      },
+      boardId: 'source-board',
+      availableLists: [
+        {
+          id: 'source-list',
+          name: 'Doing',
+          board_id: 'source-board',
+          position: 0,
+          status: 'active',
+          color: 'GRAY',
+          created_at: '2026-06-12T00:00:00.000Z',
+          creator_id: '',
+          archived: false,
+          deleted: false,
+        },
+      ],
+      taskWsId: 'source-workspace',
+      taskWorkspacePersonal: false,
+      initialSharedContext: {
+        boardConfig: {
+          id: 'source-board',
+          name: 'Source board',
+          ws_id: 'source-workspace',
+          ticket_prefix: 'SRC',
+        },
+        availableLists: [
+          {
+            id: 'source-list',
+            name: 'Doing',
+            board_id: 'source-board',
+            position: 0,
+            status: 'active',
+            color: 'GRAY',
+            created_at: '2026-06-12T00:00:00.000Z',
+            creator_id: '',
+            archived: false,
+            deleted: false,
+          },
+        ],
+        workspaceLabels: [],
+        workspaceMembers: [],
+        workspaceProjects: [],
+      },
+    });
+  });
+
+  it('keeps local board metadata for non-source personal tasks', () => {
+    expect(
+      getTaskCardHydratingOpenOptions({
+        task,
+        boardId: 'board-1',
+        availableLists: [list],
+        effectiveWorkspaceId: 'workspace-1',
+        isPersonalWorkspace: true,
+      })
+    ).toEqual({
+      initialTask: task,
+      boardId: 'board-1',
+      availableLists: [list],
+      taskWsId: 'workspace-1',
+      taskWorkspacePersonal: true,
+      initialSharedContext: undefined,
+    });
+  });
+
+  it('treats source metadata as an external task snapshot', () => {
+    expect(
+      isExternalTaskSnapshot({
+        ...task,
+        source_workspace_id: 'source-workspace',
+      })
+    ).toBe(true);
+    expect(isExternalTaskSnapshot(task)).toBe(false);
+  });
+});

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-open-options.ts

@@ -0,0 +1,127 @@
+import type { Task } from '@tuturuuu/types/primitives/Task';
+import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
+import type { SharedTaskContext } from '../../../shared/task-edit-dialog/hooks/use-task-data';
+
+interface TaskCardOpenOptionsInput {
+  task: Task;
+  boardId: string;
+  availableLists?: TaskList[];
+  effectiveWorkspaceId?: string;
+  isPersonalWorkspace: boolean;
+}
+
+export function isExternalTaskSnapshot(task: Task) {
+  return (
+    task.is_personal_external === true ||
+    Boolean(task.personal_board_id) ||
+    Boolean(task.source_workspace_id) ||
+    Boolean(task.source_board_id)
+  );
+}
+
+function normalizeSourceListStatus(status?: string | null): TaskList['status'] {
+  switch (status) {
+    case 'documents':
+    case 'not_started':
+    case 'active':
+    case 'review':
+    case 'done':
+    case 'closed':
+      return status;
+    default:
+      return 'not_started';
+  }
+}
+
+function getTaskTicketPrefix(task: Task) {
+  return 'ticket_prefix' in task && typeof task.ticket_prefix === 'string'
+    ? task.ticket_prefix
+    : undefined;
+}
+
+function buildInitialSourceList(
+  task: Task,
+  sourceBoardId: string
+): TaskList | undefined {
+  if (!task.source_list_id) {
+    return undefined;
+  }
+
+  return {
+    id: task.source_list_id,
+    name: task.source_list_name ?? task.source_list_id,
+    archived: false,
+    deleted: false,
+    created_at: task.created_at,
+    board_id: sourceBoardId,
+    creator_id: '',
+    status: normalizeSourceListStatus(task.source_list_status),
+    color: 'GRAY',
+    position: 0,
+  };
+}
+
+function buildInitialSourceContext(
+  task: Task,
+  sourceWorkspaceId?: string,
+  sourceBoardId?: string
+): SharedTaskContext | undefined {
+  if (!sourceBoardId) {
+    return undefined;
+  }
+
+  const sourceList = buildInitialSourceList(task, sourceBoardId);
+
+  return {
+    boardConfig: {
+      id: sourceBoardId,
+      name: task.source_board_name ?? sourceBoardId,
+      ws_id: sourceWorkspaceId,
+      ticket_prefix: getTaskTicketPrefix(task),
+    },
+    availableLists: sourceList ? [sourceList] : undefined,
+    workspaceLabels: task.labels ?? [],
+    workspaceMembers:
+      task.assignees?.map((assignee) => ({
+        id: assignee.id,
+        user_id: assignee.id,
+        display_name: assignee.display_name ?? assignee.email ?? assignee.id,
+        avatar_url: assignee.avatar_url ?? null,
+      })) ?? [],
+    workspaceProjects: task.projects ?? [],
+  };
+}
+
+export function getTaskCardHydratingOpenOptions({
+  task,
+  boardId,
+  availableLists,
+  effectiveWorkspaceId,
+  isPersonalWorkspace,
+}: TaskCardOpenOptionsInput) {
+  const sourceWorkspaceId = task.source_workspace_id;
+  const sourceBoardId = task.source_board_id;
+  const initialSharedContext = buildInitialSourceContext(
+    task,
+    sourceWorkspaceId ?? undefined,
+    sourceBoardId ?? undefined
+  );
+  const initialTask = {
+    ...task,
+    list_id: task.source_list_id ?? task.list_id,
+  };
+
+  return {
+    initialTask,
+    boardId: sourceBoardId ?? boardId,
+    availableLists:
+      sourceBoardId && initialSharedContext?.availableLists
+        ? initialSharedContext.availableLists
+        : sourceBoardId
+          ? undefined
+          : availableLists,
+    taskWsId: sourceWorkspaceId ?? effectiveWorkspaceId,
+    taskWorkspacePersonal: sourceWorkspaceId ? false : isPersonalWorkspace,
+    initialSharedContext,
+  };
+}