@spree/dashboard-ui 1.0.0-rc.3 → 1.0.0-rc.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spree/dashboard-ui",
   "license": "MIT",
-  "version": "1.0.0-rc.3",
+  "version": "1.0.0-rc.5",
   "description": "Spree Dashboard design system — shadcn primitives, headless composed components, and design tokens. Source-only package; consumers compile via their own Vite/Tailwind setup. Developer Preview.",
   "author": "Vendo Connect Inc.",
   "homepage": "https://spreecommerce.org",
@@ -37,7 +37,6 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "@tanstack/react-hotkeys": "^0.10.0",
     "@tanstack/react-router": "^1.169.2",
     "i18next": "^26.2.0",
     "react": "^19.2.6",
@@ -60,37 +59,41 @@
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
-    "@fontsource-variable/geist": "5.2.8",
-    "@fontsource-variable/geist-mono": "5.2.7",
-    "@tanstack/react-table": "8.21.3",
-    "@tiptap/core": "3.31.3",
-    "@tiptap/extension-image": "3.31.3",
-    "@tiptap/extension-link": "3.31.3",
-    "@tiptap/extension-placeholder": "3.31.3",
-    "@tiptap/pm": "3.31.3",
-    "@tiptap/react": "3.31.3",
-    "@tiptap/starter-kit": "3.31.3",
+    "@fontsource-variable/geist": "5.3.0",
+    "@fontsource-variable/geist-mono": "5.3.0",
+    "@tanstack/react-hotkeys": "^0.14.3",
+    "@tanstack/react-table": "9.3.1",
+    "@tiptap/core": "3.32.0",
+    "@tiptap/extension-bubble-menu": "3.32.0",
+    "@tiptap/extension-floating-menu": "3.32.0",
+    "@tiptap/extension-image": "3.32.0",
+    "@tiptap/extension-link": "3.32.0",
+    "@tiptap/extension-placeholder": "3.32.0",
+    "@tiptap/pm": "3.32.0",
+    "@tiptap/react": "3.32.0",
+    "@tiptap/starter-kit": "3.32.0",
     "@uiw/react-json-view": "1.12.2",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",
-    "date-fns": "4.1.0",
+    "date-fns": "4.4.0",
     "date-fns-tz": "3.2.0",
-    "flag-icons": "7.5.0",
-    "lucide-react": "1.47.0",
-    "react-colorful": "5.7.0",
-    "react-day-picker": "9.14.0",
+    "flag-icons": "7.6.0",
+    "lucide-react": "1.58.0",
+    "react-colorful": "5.8.1",
+    "react-day-picker": "10.0.2",
     "recharts": "3.10.1",
-    "shadcn": "4.21.0",
-    "tailwind-merge": "3.5.0",
-    "tw-animate-css": "1.4.0"
+    "shadcn": "4.22.0",
+    "tailwind-merge": "3.7.0",
+    "tw-animate-css": "1.4.0",
+    "@spree/core": "^0.2.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "tailwindcss": "^4.2.4",
-    "typescript": "~6.0.3",
-    "vite": "^8.0.16"
+    "typescript": "~7.0.2",
+    "vite": "^8.3.4"
   },
   "scripts": {
     "lint": "biome check src",

package/src/index.ts

@@ -32,6 +32,7 @@ export { decimalPlacesMessage, requiredMessage } from './lib/validation-messages
 // ---------------------------------------------------------------------------
 export * from './spree/address-block'
 export * from './spree/address-book-row'
+export * from './spree/address-select'
 export * from './spree/back-button'
 export * from './spree/bulk-dialog'
 export * from './spree/bulk-price-table'
@@ -117,6 +118,7 @@ export * from './ui/empty'
 export * from './ui/field'
 export * from './ui/input'
 export * from './ui/input-group'
+export * from './ui/item'
 export * from './ui/label'
 export * from './ui/media-preview'
 export * from './ui/pagination'

package/src/spree/address-block.tsx

@@ -1,3 +1,4 @@
+import { intlDisplayName } from '@spree/core'
 import { useTranslation } from 'react-i18next'
 
 /**
@@ -28,24 +29,20 @@ function localizedCountryName(
   iso?: string | null,
   name?: string | null,
 ): string | null {
-  if (iso) {
-    try {
-      const localized = new Intl.DisplayNames([locale, 'en'], { type: 'region' }).of(iso)
-      if (localized) return localized
-    } catch {
-      // Runtime without Intl.DisplayNames coverage — fall back below.
-    }
-  }
-  return name ?? iso ?? null
+  const localized = iso ? intlDisplayName('region', locale, iso) : undefined
+  return localized || (name ?? iso ?? null)
 }
 
 export function AddressBlock({
   title,
   address,
+  emptyText,
 }: {
   /** Omitted where the surrounding card already names the address. */
   title?: string
   address: AddressBlockValue | null | undefined
+  /** Shown in place of the address when there is none. Defaults to "Not provided". */
+  emptyText?: string
 }) {
   const { t, i18n } = useTranslation()
   return (
@@ -67,7 +64,7 @@ export function AddressBlock({
         </div>
       ) : (
         <span className="text-sm text-muted-foreground">
-          {t('admin.components.address_block.not_provided')}
+          {emptyText ?? t('admin.components.address_block.not_provided')}
         </span>
       )}
     </div>

package/src/spree/address-book-row.tsx

@@ -1,14 +1,8 @@
 import { useTranslation } from 'react-i18next'
 import { Badge } from '../ui/badge'
-import { Button } from '../ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../ui/dropdown-menu'
+import { Item, ItemActions, ItemContent, ItemTitle } from '../ui/item'
 import { AddressBlock, type AddressBlockValue } from './address-block'
-import { EllipsisVerticalIcon, PencilIcon, TrashIcon } from './icons'
+import { RowActions } from './row-actions'
 
 /** What every address book row needs, whoever owns the book. */
 export interface AddressBookEntry extends AddressBlockValue {
@@ -29,6 +23,7 @@ export interface AddressBookEntry extends AddressBlockValue {
 export function AddressBookRow({
   address,
   canEdit = true,
+  inheritedFrom,
   onEdit,
   onRemove,
   onSetDefaultBilling,
@@ -36,6 +31,11 @@ export function AddressBookRow({
 }: {
   address: AddressBookEntry
   canEdit?: boolean
+  /**
+   * Names the book this entry is inherited from. An inherited entry is read
+   * only here, and its defaults are its owner's, so neither is shown.
+   */
+  inheritedFrom?: string | null
   onEdit: () => void
   onRemove: () => void
   /** Omit either to hide that action — a book with one address has no choice. */
@@ -43,54 +43,54 @@ export function AddressBookRow({
   onSetDefaultShipping?: () => void
 }) {
   const { t } = useTranslation()
+  const inherited = inheritedFrom != null
+  const isDefaultBilling = !inherited && address.is_default_billing
+  const isDefaultShipping = !inherited && address.is_default_shipping
 
   return (
-    <div className="flex items-start justify-between gap-2 rounded-md border p-3">
-      <div className="flex min-w-0 flex-col gap-1">
-        <span className="flex flex-wrap items-center gap-2">
-          {address.label && (
-            <span className="font-medium text-foreground text-sm">{address.label}</span>
-          )}
-          {address.is_default_billing && (
-            <Badge variant="outline">{t('admin.address_book.default_billing')}</Badge>
-          )}
-          {address.is_default_shipping && (
-            <Badge variant="outline">{t('admin.address_book.default_shipping')}</Badge>
-          )}
-        </span>
-        <AddressBlock address={address} />
-      </div>
-
-      {canEdit && (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon-xs" className="shrink-0">
-              <EllipsisVerticalIcon className="size-4" />
-              <span className="sr-only">{t('admin.actions.actions_menu')}</span>
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={onEdit}>
-              <PencilIcon className="size-4" />
-              {t('admin.actions.edit')}
-            </DropdownMenuItem>
-            {onSetDefaultBilling && !address.is_default_billing && (
-              <DropdownMenuItem onClick={onSetDefaultBilling}>
-                {t('admin.address_book.set_default_billing')}
-              </DropdownMenuItem>
+    <Item variant="outline" className="items-start">
+      <ItemContent className="min-w-0">
+        {(address.label || inherited || isDefaultBilling || isDefaultShipping) && (
+          <ItemTitle className="flex-wrap">
+            {address.label}
+            {inherited && (
+              <Badge variant="secondary">
+                {t('admin.address_book.inherited_from', { name: inheritedFrom })}
+              </Badge>
+            )}
+            {isDefaultBilling && (
+              <Badge variant="outline">{t('admin.address_book.default_billing')}</Badge>
             )}
-            {onSetDefaultShipping && !address.is_default_shipping && (
-              <DropdownMenuItem onClick={onSetDefaultShipping}>
-                {t('admin.address_book.set_default_shipping')}
-              </DropdownMenuItem>
+            {isDefaultShipping && (
+              <Badge variant="outline">{t('admin.address_book.default_shipping')}</Badge>
             )}
-            <DropdownMenuItem variant="destructive" onClick={onRemove}>
-              <TrashIcon className="size-4" />
-              {t('admin.actions.delete')}
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+          </ItemTitle>
+        )}
+        <AddressBlock address={address} />
+      </ItemContent>
+
+      {canEdit && !inherited && (
+        <ItemActions>
+          <RowActions
+            actions={[
+              { key: 'edit', onSelect: onEdit },
+              {
+                key: 'set_default_billing',
+                label: t('admin.address_book.set_default_billing'),
+                visible: !!onSetDefaultBilling && !address.is_default_billing,
+                onSelect: () => onSetDefaultBilling?.(),
+              },
+              {
+                key: 'set_default_shipping',
+                label: t('admin.address_book.set_default_shipping'),
+                visible: !!onSetDefaultShipping && !address.is_default_shipping,
+                onSelect: () => onSetDefaultShipping?.(),
+              },
+              { key: 'delete', destructive: true, onSelect: onRemove },
+            ]}
+          />
+        </ItemActions>
       )}
-    </div>
+    </Item>
   )
 }

package/src/spree/address-select.tsx

@@ -0,0 +1,105 @@
+import { useTranslation } from 'react-i18next'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select'
+import type { AddressBlockValue } from './address-block'
+
+/** One entry a picker may offer, from whichever book it came out of. */
+export interface AddressOption extends AddressBlockValue {
+  id: string
+  label?: string | null
+}
+
+/**
+ * A set of entries under the name of the book they came from — a customer's
+ * own addresses, a company's sites. Groups are rendered in the order given.
+ */
+export interface AddressOptionGroup {
+  key: string
+  heading: string
+  addresses: AddressOption[]
+}
+
+/** The one-line form a picker shows: the entry's own name, then the street. */
+export function summarizeAddress(address: AddressOption): string {
+  const place = [address.address1, address.city, address.state_text, address.postal_code]
+    .filter(Boolean)
+    .join(', ')
+
+  const who = address.label || address.company || address.full_name
+
+  return [who, place].filter(Boolean).join(' — ')
+}
+
+/**
+ * Picks one saved address out of the books a purchase may draw on.
+ *
+ * Headless: the groups arrive as props, so the same control serves a buyer's
+ * own book, a company's sites, and both at once — which is the B2B case, where
+ * an order for a company may ship to that company's sites and to the ones it
+ * inherits from the companies above it.
+ *
+ * Base UI resolves the trigger's label from `items`, so the summary line shows
+ * instead of the raw prefixed id.
+ */
+export function AddressSelect({
+  id,
+  value,
+  onValueChange,
+  groups,
+  placeholder,
+  emptyLabel,
+  disabled,
+}: {
+  id?: string
+  /** The chosen address id, or `''` for "none picked". */
+  value: string
+  onValueChange: (value: string) => void
+  groups: AddressOptionGroup[]
+  placeholder?: string
+  /** Offered first so a merchant can take the choice back. */
+  emptyLabel?: string
+  disabled?: boolean
+}) {
+  const { t } = useTranslation()
+  const none = emptyLabel ?? t('admin.address_select.none')
+
+  const items = [
+    { value: '', label: none },
+    ...groups.flatMap((group) =>
+      group.addresses.map((address) => ({
+        value: address.id,
+        label: summarizeAddress(address),
+      })),
+    ),
+  ]
+
+  return (
+    <Select items={items} value={value} onValueChange={onValueChange} disabled={disabled}>
+      <SelectTrigger id={id}>
+        <SelectValue placeholder={placeholder ?? none} />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="">{none}</SelectItem>
+        {groups
+          .filter((group) => group.addresses.length > 0)
+          .map((group) => (
+            <SelectGroup key={group.key}>
+              <SelectLabel>{group.heading}</SelectLabel>
+              {group.addresses.map((address) => (
+                <SelectItem key={address.id} value={address.id}>
+                  {summarizeAddress(address)}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          ))}
+      </SelectContent>
+    </Select>
+  )
+}

package/src/spree/bulk-price-table.tsx

@@ -1,8 +1,16 @@
-import type { ColumnDef } from '@tanstack/react-table'
 import { PlusIcon, XIcon } from 'lucide-react'
 import { useMemo } from 'react'
+import { Alert, AlertDescription } from '../ui/alert'
 import { Button } from '../ui/button'
-import { DataGrid, DecimalCell, editableRowIndex, MoneyCell, ReadOnlyCell } from './data-grid'
+import {
+  DataGrid,
+  type DataGridColumn,
+  DecimalCell,
+  editableRowIndex,
+  MoneyCell,
+  ReadOnlyCell,
+} from './data-grid'
+import { CircleAlertIcon } from './icons'
 import { SearchInput } from './search-input'
 
 export interface BulkPriceRow {
@@ -131,7 +139,7 @@ export function BulkPriceTable({
   isLoading,
   error,
 }: BulkPriceTableProps) {
-  const columns = useMemo<ColumnDef<BulkPriceRow>[]>(
+  const columns = useMemo<DataGridColumn<BulkPriceRow>[]>(
     () => [
       {
         id: 'variant',
@@ -203,7 +211,7 @@ export function BulkPriceTable({
                   />
                 )
               },
-            } satisfies ColumnDef<BulkPriceRow>,
+            } satisfies DataGridColumn<BulkPriceRow>,
           ]
         : []),
       {
@@ -291,7 +299,7 @@ export function BulkPriceTable({
                   </Button>
                 )
               },
-            } satisfies ColumnDef<BulkPriceRow>,
+            } satisfies DataGridColumn<BulkPriceRow>,
           ]
         : []),
     ],
@@ -312,12 +320,10 @@ export function BulkPriceTable({
     // table in a card does.
     <div className="flex h-full flex-col gap-3">
       {error && (
-        <div
-          role="alert"
-          className="mx-3 shrink-0 rounded-md border border-destructive/50 bg-destructive/10 px-3 py-2 text-destructive text-sm"
-        >
-          {error}
-        </div>
+        <Alert variant="destructive" className="mx-3 w-auto shrink-0">
+          <CircleAlertIcon />
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
       )}
       {showToolbar && (
         // Always-mounted toolbar. Conditionally rendering the search input

package/src/spree/bulk-variants-table.tsx

@@ -1,6 +1,13 @@
-import type { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
-import { DataGrid, DecimalCell, ReadOnlyCell, SelectCell, SwitchCell, TextCell } from './data-grid'
+import {
+  DataGrid,
+  type DataGridColumn,
+  DecimalCell,
+  ReadOnlyCell,
+  SelectCell,
+  SwitchCell,
+  TextCell,
+} from './data-grid'
 
 export interface BulkVariantsRow {
   id: string
@@ -139,7 +146,7 @@ export function BulkVariantsTable({
   cartonOptions,
   onChange,
 }: BulkVariantsTableProps) {
-  const columns = useMemo<ColumnDef<BulkVariantsRow>[]>(() => {
+  const columns = useMemo<DataGridColumn<BulkVariantsRow>[]>(() => {
     // Keyboard column coordinates, fixed per column: variant label is
     // read-only (unregistered), then sku=1, barcode=2, weight=3, unit=4,
     // height=5, width=6, depth=7, unit=8, preorderable=9, backorder=10,
@@ -148,7 +155,7 @@ export function BulkVariantsTable({
     const numericHeader = (label: string) => () => <span className="block text-right">{label}</span>
     const rowLabel = (r: BulkVariantsRow) => r.variantLabel ?? labels.variantDefault
 
-    const defs: ColumnDef<BulkVariantsRow>[] = [
+    const defs: DataGridColumn<BulkVariantsRow>[] = [
       {
         id: 'variant',
         header: labels.variant,
@@ -182,7 +189,7 @@ export function BulkVariantsTable({
           />
         ),
       },
-      ...DECIMAL_COLUMNS.map<ColumnDef<BulkVariantsRow>>(({ field, col }) => ({
+      ...DECIMAL_COLUMNS.map<DataGridColumn<BulkVariantsRow>>(({ field, col }) => ({
         id: field,
         header: numericHeader(labels[field]),
         cell: ({ row }) => (

package/src/spree/calculator-summary.tsx

@@ -13,6 +13,9 @@
  * Lives on the frontend (rather than as a server-rendered string) so
  * draft edits update the row immediately, before any save.
  */
+
+import { formatMoney, isDecimalString } from '@spree/core'
+
 export interface CalculatorPayload {
   /**
    * Display name for the calculator, already localized by the caller — this
@@ -101,7 +104,12 @@ function formatField(
 ): string | null {
   if (value === null || value === undefined || value === '') return null
   if (property.format === 'currency') return null
-  if (property.format === 'money') return formatMoney(value, currency)
+  if (property.format === 'money') {
+    const amount = String(value)
+    return (
+      formatMoney(amount, currency) || (isDecimalString(amount) ? `${amount} ${currency}` : amount)
+    )
+  }
   if (/(?:^|_)percent$/.test(key)) return `${value}%`
 
   const type = (Array.isArray(property.type) ? property.type : [property.type]).find(
@@ -115,19 +123,6 @@ function formatField(
   return `${humanize(key)}: ${value}`
 }
 
-function formatMoney(value: unknown, currency: string): string {
-  const amount = String(value)
-  if (!/^-?\d+(\.\d+)?$/.test(amount)) return amount
-  try {
-    // `Intl` reads a numeric string exactly; its ES2022 typings only list numbers.
-    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(
-      amount as unknown as number,
-    )
-  } catch {
-    return `${amount} ${currency}`
-  }
-}
-
 function humanize(key: string): string {
   const spaced = key.replace(/_/g, ' ').trim()
   return spaced.charAt(0).toUpperCase() + spaced.slice(1)

package/src/spree/claim-resolve-dialog.tsx

@@ -1,3 +1,4 @@
+import { CLAIM_RESOLUTIONS, type ClaimResolution, isPositiveMoney } from '@spree/core'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '../ui/button'
@@ -11,12 +12,12 @@ import {
 } from '../ui/dialog'
 import { Field, FieldLabel } from '../ui/field'
 import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from '../ui/input-group'
+import { Item, ItemActions, ItemContent, ItemTitle } from '../ui/item'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
 import { Switch } from '../ui/switch'
 import type { RefundMethod } from './return-dialogs'
 
-/** How a claim is settled. */
-export type ClaimResolution = 'refund' | 'replacement' | 'refund_and_replacement'
+export type { ClaimResolution }
 
 /** One claimed line, as the resolve form needs it. */
 export type ClaimLineForResolve = {
@@ -73,12 +74,10 @@ export function ClaimResolveDialog({
     .filter(([, on]) => on)
     .map(([id]) => id)
 
-  const resolutionOptions = (['refund', 'replacement', 'refund_and_replacement'] as const).map(
-    (value) => ({
-      value,
-      label: t(`admin.pages.orders.detail.claims.resolutions.${value}`),
-    }),
-  )
+  const resolutionOptions = CLAIM_RESOLUTIONS.map((value) => ({
+    value,
+    label: t(`admin.pages.orders.detail.claims.resolutions.${value}`),
+  }))
 
   const methodOptions = [
     {
@@ -91,11 +90,11 @@ export function ClaimResolveDialog({
     },
   ]
 
+  // A number input keeps `.5` as typed; the API reads only `0.5`.
+  const refundAmount = amount.startsWith('.') ? `0${amount}` : amount
   // Refunding nothing, or replacing nothing, is what the server rejects —
   // say so here instead of letting the request fail.
-  // The amount is the canonical decimal string a number input yields, so
-  // "above zero" is unsigned digits with a non-zero digit among them.
-  const positiveAmount = /^(\d+(\.\d+)?|\.\d+)$/.test(amount) && /[1-9]/.test(amount)
+  const positiveAmount = isPositiveMoney(refundAmount)
   const ready =
     (!refunding || positiveAmount) && (!sendingReplacement || chosenReplacements.length > 0)
 
@@ -178,21 +177,23 @@ export function ClaimResolveDialog({
                 {t('admin.pages.orders.detail.claims.replacement_items')}
               </span>
               {lines.map((line) => (
-                <div
-                  key={line.id}
-                  className="flex items-center justify-between gap-4 rounded-lg border border-border-subtle p-3"
-                >
-                  <span className="truncate text-sm">
-                    {line.label}
-                    <span className="text-muted-foreground"> ×{line.quantity}</span>
-                  </span>
-                  <Switch
-                    checked={replacing[line.id] ?? false}
-                    onCheckedChange={(checked) =>
-                      setReplacing({ ...replacing, [line.id]: checked })
-                    }
-                  />
-                </div>
+                <Item key={line.id} variant="outline" className="flex-nowrap border-border-subtle">
+                  <ItemContent className="min-w-0">
+                    <ItemTitle className="block truncate font-normal">
+                      {line.label}
+                      <span className="text-muted-foreground"> ×{line.quantity}</span>
+                    </ItemTitle>
+                  </ItemContent>
+                  <ItemActions>
+                    <Switch
+                      aria-label={line.label}
+                      checked={replacing[line.id] ?? false}
+                      onCheckedChange={(checked) =>
+                        setReplacing({ ...replacing, [line.id]: checked })
+                      }
+                    />
+                  </ItemActions>
+                </Item>
               ))}
             </div>
           )}
@@ -208,7 +209,7 @@ export function ClaimResolveDialog({
               onSubmit({
                 resolution,
                 refundMethod,
-                amount: refunding ? amount : undefined,
+                amount: refunding ? refundAmount : undefined,
                 replacementLineItemIds: chosenReplacements,
               })
             }