Product Grid

Image-led cards with a rating, a price and an add action that works without hover. This is the part of commerce that is genuinely just layout: a Badge for the promo tag, a Button for the action, your own photography. Adding an item swaps the button for a stepper and updates the cart readout.

Product Detail

Gallery on the left, buy box on the right. The variant pickers are a Combobox — searchable, with a description per option — and availability is a StatusPill reading the same stock table the warehouse screen uses. Pick Charcoal ash to see the sold-out state.

Cart

Line items with steppers, a promo field that accepts SPRING10 and rejects everything else, and a free-shipping Progress bar. Empty the cart and the screen hands over to EmptyState — an empty cart is a real state with a way out, not a blank panel.

Checkout

Grouped fields beside a summary that never leaves the screen. FormSection and FormField carry the label, the hint and the error wiring, so a checkout is field definitions rather than a pile of bare <input>s with placeholder-only labels. Press Place order with fields empty to see the invalid state.

Order Confirmation

The reassurance screen: what was bought, what it cost, when it lands. CopyButton puts the order number on the clipboard and RelativeTime dates it — with locale={enUS}, or the package prints Vietnamese into an English page.

Order History

The customer's own list — the same orders the back office sees, at a shopper's density. Item rows, StatusPill from the shared fulfilment table, and FilterChips with live counts. Filter down to Returned and then away again to see both states.

Orders Console

The screen the merchandising team lives in. PageHeader, StatCard, SearchFilterBar, DataTable and TablePagination — sorting, selection, pinned columns, a column menu, skeleton loading and an empty state, none of it hand-rolled. Select a few rows and mark them shipped: the pills change and the stat cards above recalculate, because they read the same array.

Inventory

Stock per variant, per location. The location Combobox re-reads the same rows against another warehouse — switch to the flagship store and watch the low-stock chips move. Press Recount to watch the skeleton loading state the table ships with.

One Label Set Per App

Both consoles above pass the same three objects. The package ships Vietnamese strings — including aria-label and sr-only text — so an English app declares them once and hands them to every table, toolbar and pager. Skip this and you ship a half-translated screen: English headers over a Vietnamese pager.

One string on these screens takes no prop at all: the <nav> name of the breadcrumb that PageHeader renders. It is audible only to a screen reader, which is exactly why it survives a design review — so the orders console drops the breadcrumb and an English app that wants one composes Breadcrumb itself. The sr-only name of the × button on a clearable Combobox is not in that category — it takes clearLabel, and every clearable filter in the toolbars above passes one.

import type {
  DataTableLabels,
  SearchFilterBarLabels,
  TablePaginationLabels,
} from '@comitor/ui'

// The package ships Vietnamese strings — aria-labels and sr-only text included.
// Declare the English set ONCE and hand it to every table on the screen.
// Partial<>: any key you leave out keeps its packaged default.

export const EN_TABLE: Partial<DataTableLabels> = {
  selectAllRows: 'Select every row on this page',
  deselectAllRows: 'Clear the selection',
  selectRow: 'Select this row',
  deselectRow: 'Deselect this row',
  emptyTitle: 'Nothing here yet',
  emptyDescription: 'No records match the current view.',
  columnToggle: 'Columns',
}

export const EN_SEARCH: Partial<SearchFilterBarLabels> = {
  searchPlaceholder: 'Search…',
  unitLabel: 'records',
  clearSearch: 'Clear search',
  filterCount: (count) => `${count} ${count === 1 ? 'filter' : 'filters'}`,
  clearFilters: 'Clear filters',
  // Keys that interpolate a number are FUNCTIONS, not placeholder strings: word order
  // differs between languages, and this one returns a node so the digits keep tabular-nums.
  resultSummary: (resultCount, total, unitLabel) => (
    <>
      <strong className="font-medium text-foreground tabular-nums">{resultCount}</strong>
      {total !== undefined ? ` of ${total}` : ''} {unitLabel}
    </>
  ),
}

export const EN_PAGINATION: Partial<TablePaginationLabels> = {
  region: 'Pagination',
  unitLabel: 'records',
  pageSizePrefix: 'Show',
  pageSizeSelect: (unitLabel) => `${unitLabel} per page`,
  range: (start, end, total, unitLabel) => `${start}–${end} of ${total} ${unitLabel}`,
  pageStatus: (page, pageCount) => `Page ${page} of ${pageCount}`,
  firstPage: 'First page',
  previousPage: 'Previous page',
  nextPage: 'Next page',
  lastPage: 'Last page',
}

Best Practices