@spree/dashboard-ui 1.0.0-rc.2 → 1.0.0-rc.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spree/dashboard-ui",
   "license": "MIT",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.4",
   "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,40 @@
     "@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",
+    "shadcn": "4.22.0",
+    "tailwind-merge": "3.7.0",
     "tw-animate-css": "1.4.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

@@ -26,7 +26,7 @@ export {
 } from './lib/date-range-presets'
 export { sameRichText, shouldEmitRichTextChange } from './lib/same-rich-text'
 export { cn } from './lib/utils'
-export { requiredMessage } from './lib/validation-messages'
+export { decimalPlacesMessage, requiredMessage } from './lib/validation-messages'
 // ---------------------------------------------------------------------------
 // Spree composed components — headless, accept data via props
 // ---------------------------------------------------------------------------
@@ -117,6 +117,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/lib/validation-messages.ts

@@ -17,3 +17,15 @@ import i18n from 'i18next'
 export function requiredMessage(field: string): () => string {
   return () => i18n.t('admin.validation.required', { field: i18n.t(`admin.fields.${field}.label`) })
 }
+
+/**
+ * Lazy "<Field> can have at most <count> decimal places" message, for amounts
+ * and rates the server keeps to a fixed number of decimals.
+ */
+export function decimalPlacesMessage(field: string, count: number): () => string {
+  return () =>
+    i18n.t('admin.validation.too_many_decimals', {
+      field: i18n.t(`admin.fields.${field}.label`),
+      count,
+    })
+}

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 {
@@ -45,52 +39,44 @@ export function AddressBookRow({
   const { t } = useTranslation()
 
   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>
+    <Item variant="outline" className="items-start">
+      <ItemContent className="min-w-0">
+        {(address.label || address.is_default_billing || address.is_default_shipping) && (
+          <ItemTitle className="flex-wrap">
+            {address.label}
+            {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>
+            )}
+          </ItemTitle>
+        )}
         <AddressBlock address={address} />
-      </div>
+      </ItemContent>
 
       {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>
-            )}
-            {onSetDefaultShipping && !address.is_default_shipping && (
-              <DropdownMenuItem onClick={onSetDefaultShipping}>
-                {t('admin.address_book.set_default_shipping')}
-              </DropdownMenuItem>
-            )}
-            <DropdownMenuItem variant="destructive" onClick={onRemove}>
-              <TrashIcon className="size-4" />
-              {t('admin.actions.delete')}
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <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/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

@@ -5,7 +5,8 @@
  * model (delivery methods, tax rates, …).
  *
  * The expected payload mirrors the admin API's calculator embed: a
- * `{ label, preferences, preference_schema }` triple. The component is
+ * `{ label, preferences, schema }` triple, `schema` being the JSON Schema of
+ * the calculator's preferences. The component is
  * tolerant of partial input — missing schema or preferences just fall
  * back to the label alone.
  *
@@ -22,7 +23,14 @@ export interface CalculatorPayload {
   /** STI class name (e.g. "Spree::Calculator::FlatRate"). Used as a label fallback. */
   type?: string | null
   preferences?: Record<string, unknown> | null
-  preference_schema?: ReadonlyArray<{ key: string; type: string }> | null
+  schema?: { properties?: Record<string, CalculatorPropertySchema> } | null
+}
+
+/** The part of a preference's JSON Schema the summary reads. */
+interface CalculatorPropertySchema {
+  type?: string | string[]
+  format?: string
+  pattern?: string
 }
 
 interface CalculatorSummaryProps {
@@ -60,14 +68,14 @@ export function formatCalculatorSummary(
     calculator.label?.trim() ||
     (calculator.type ? (calculator.type.split('::').pop() ?? calculator.type) : '')
 
-  const schema = calculator.preference_schema
+  const properties = Object.entries(calculator.schema?.properties ?? {})
   const prefs = calculator.preferences
 
-  if (!schema?.length || !prefs) return label || null
+  if (!properties.length || !prefs) return label || null
 
   const currency = (typeof prefs.currency === 'string' && prefs.currency) || 'USD'
-  const details = schema
-    .map((field) => formatField(field, prefs[field.key], currency))
+  const details = properties
+    .map(([key, property]) => formatField(key, property, prefs[key], currency))
     .filter((s): s is string => s !== null)
     .join(', ')
 
@@ -76,50 +84,47 @@ export function formatCalculatorSummary(
 }
 
 /**
- * Formats one preference value by naming convention. Calculators don't
- * carry richer field metadata (no `display_format`, no `unit`), so we
- * fall back to key-name heuristics that match the Ruby preference
- * declarations in `Spree::Calculator::*`.
+ * Formats one preference value from its schema.
  *
- * - `amount` / `*_amount` decimals → currency-formatted.
- * - `*_percent` decimals → `N%`.
- * - `currency` strings → omitted (folded into the money formatting).
+ * - money → currency-formatted.
+ * - `*_percent` values → `N%`.
+ * - currencies → omitted (folded into the money formatting).
  * - booleans → humanized key when true; skipped when false.
- * - lists (tiers) → their length; other objects → omitted.
+ * - lists (tiers) → their length; objects → omitted.
  * - everything else → `key: value`.
  */
 function formatField(
-  field: { key: string; type: string },
+  key: string,
+  property: CalculatorPropertySchema,
   value: unknown,
   currency: string,
 ): string | null {
   if (value === null || value === undefined || value === '') return null
-  if (field.key === 'currency') return null
+  if (property.format === 'currency') return null
+  if (property.format === 'money') return formatMoney(value, currency)
+  if (/(?:^|_)percent$/.test(key)) return `${value}%`
 
-  if (field.type === 'decimal') {
-    if (/(?:^|_)percent$/.test(field.key)) return `${value}%`
-    if (field.key === 'amount' || field.key.endsWith('_amount')) {
-      return formatMoney(value, currency)
-    }
-    return `${humanize(field.key)}: ${value}`
-  }
-  if (field.type === 'boolean') {
-    return value ? humanize(field.key) : null
-  }
-  if (field.type === 'array') {
-    return Array.isArray(value) && value.length ? `${humanize(field.key)}: ${value.length}` : null
+  const type = (Array.isArray(property.type) ? property.type : [property.type]).find(
+    (t) => t !== 'null',
+  )
+  if (type === 'boolean') return value ? humanize(key) : null
+  if (type === 'array') {
+    return Array.isArray(value) && value.length ? `${humanize(key)}: ${value.length}` : null
   }
-  if (field.type === 'hash') return null
-  return `${humanize(field.key)}: ${value}`
+  if (type === 'object') return null
+  return `${humanize(key)}: ${value}`
 }
 
 function formatMoney(value: unknown, currency: string): string {
-  const n = typeof value === 'number' ? value : Number(value)
-  if (Number.isNaN(n)) return String(value)
+  const amount = String(value)
+  if (!/^-?\d+(\.\d+)?$/.test(amount)) return amount
   try {
-    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(n)
+    // `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 `${n} ${currency}`
+    return `${amount} ${currency}`
   }
 }
 

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

@@ -11,6 +11,7 @@ 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'
@@ -93,8 +94,11 @@ export function ClaimResolveDialog({
 
   // 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 ready =
-    (!refunding || Number(amount) > 0) && (!sendingReplacement || chosenReplacements.length > 0)
+    (!refunding || positiveAmount) && (!sendingReplacement || chosenReplacements.length > 0)
 
   return (
     <Dialog open onOpenChange={(open) => !open && onClose()}>
@@ -138,7 +142,7 @@ export function ClaimResolveDialog({
                   <InputGroupInput
                     id="claim-resolve-amount"
                     type="number"
-                    step="0.01"
+                    step="any"
                     min="0"
                     value={amount}
                     onChange={(event) => setAmount(event.target.value)}
@@ -175,21 +179,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>
           )}

package/src/spree/data-grid/data-grid.tsx

@@ -1,10 +1,11 @@
 import {
+  type ColumnDef,
   flexRender,
-  getCoreRowModel,
   type Row,
+  type RowData,
   type Table,
-  type TableOptions,
-  useReactTable,
+  tableFeatures,
+  useTable,
 } from '@tanstack/react-table'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { cn } from '../../lib/utils'
@@ -14,9 +15,18 @@ import type { CellCoords, CellKey, CellRegistration, RenderSectionHeader } from
 import { cellKey } from './types'
 import { useDataGridKeyboard } from './use-data-grid-keyboard'
 
-interface DataGridProps<T> {
+// The grid renders rows as given — no sorting, filtering or column state — so
+// it needs only the table's core features.
+const dataGridFeatures = tableFeatures({})
+type DataGridFeatures = typeof dataGridFeatures
+
+/** A column of a `DataGrid`. */
+// biome-ignore lint/suspicious/noExplicitAny: each column reads a value of its own type
+export type DataGridColumn<T extends RowData> = ColumnDef<DataGridFeatures, T, any>
+
+interface DataGridProps<T extends RowData> {
   rows: T[]
-  columns: TableOptions<T>['columns']
+  columns: DataGridColumn<T>[]
   getRowId: (row: T) => string
   /** Optional grouping. Return a node spanning all columns to render this row
    *  as a (non-editable) section header. Return null to render the row as
@@ -39,7 +49,7 @@ interface DataGridProps<T> {
   scrollable?: boolean
 }
 
-export function DataGrid<T>({
+export function DataGrid<T extends RowData>({
   rows,
   columns,
   getRowId,
@@ -48,11 +58,11 @@ export function DataGrid<T>({
   'aria-label': ariaLabel,
   scrollable = false,
 }: DataGridProps<T>) {
-  const table = useReactTable<T>({
+  const table = useTable({
+    features: dataGridFeatures,
     data: rows,
     columns,
     getRowId,
-    getCoreRowModel: getCoreRowModel(),
   })
 
   return (
@@ -66,14 +76,14 @@ export function DataGrid<T>({
   )
 }
 
-function DataGridShell<T>({
+function DataGridShell<T extends RowData>({
   table,
   renderSectionHeader,
   className,
   ariaLabel,
   scrollable,
 }: {
-  table: Table<T>
+  table: Table<DataGridFeatures, T>
   renderSectionHeader?: RenderSectionHeader<T>
   className?: string
   ariaLabel?: string
@@ -324,12 +334,12 @@ function DataGridShell<T>({
   )
 }
 
-function DataGridRow<T>({
+function DataGridRow<T extends RowData>({
   row,
   renderSectionHeader,
   columnCount,
 }: {
-  row: Row<T>
+  row: Row<DataGridFeatures, T>
   renderSectionHeader?: RenderSectionHeader<T>
   columnCount: number
 }) {
@@ -345,7 +355,7 @@ function DataGridRow<T>({
   }
   return (
     <tr>
-      {row.getVisibleCells().map((cell) => (
+      {row.getAllCells().map((cell) => (
         <td key={cell.id} className="h-9 p-0 align-middle">
           {flexRender(cell.column.columnDef.cell, cell.getContext())}
         </td>

package/src/spree/data-grid/index.ts

@@ -8,6 +8,6 @@ export {
   TextCell,
 } from './cells'
 export { useDataGridContext } from './context'
-export { DataGrid } from './data-grid'
+export { DataGrid, type DataGridColumn } from './data-grid'
 export { editableRowIndex } from './helpers'
 export type { CellCoords, RenderSectionHeader } from './types'