@spree/dashboard-ui 0.1.0

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

@@ -0,0 +1,254 @@
+import type { ColumnDef } from '@tanstack/react-table'
+import { useMemo } from 'react'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { DataGrid, editableRowIndex, MoneyCell, ReadOnlyCell } from './data-grid'
+
+export interface BulkPriceRow {
+  // Unique row id. For header rows use a synthetic key (e.g. `header:<groupId>`);
+  // the table renders headers via `renderSectionHeader` without an editable cell.
+  id: string
+  kind: 'header' | 'item'
+  // Header rows: the section title (typically the product name).
+  groupLabel?: string
+  // Item rows.
+  variantLabel?: string | null
+  sku?: string | null
+  // Display strings — the caller decides whether to ship the locale-formatted
+  // user input or the API's canonical decimal. The table passes them through.
+  amount?: string | null
+  compareAt?: string | null
+}
+
+export interface BulkPriceTableLabels {
+  /** Column header for the variant label column. */
+  variant: string
+  /** Column header for the SKU column. */
+  sku: string
+  /** Column header for the amount column. */
+  price: string
+  /** Column header for the compare-at-amount column. */
+  compareAt: string
+  /** Placeholder for a variant row with no options text (e.g. "Default"). */
+  variantDefault: string
+  /** Placeholder text for the search input. Omit to hide the search input. */
+  searchPlaceholder?: string
+  /** A short message shown above the grid summarising the matching row count. */
+  countSummary?: string
+  /** Shown when the loading flag is set. */
+  loading: string
+  /** Page-of indicator template, e.g. "Page {page} of {total}". `{page}` and `{total}` are substituted. */
+  pageOf: string
+  /** Previous-page button label. */
+  prev: string
+  /** Next-page button label. */
+  next: string
+  /** Shown when not loading and rows.length === 0 and no search query. */
+  emptyMessage?: string
+  /** Shown when not loading and rows.length === 0 and a search query is set. */
+  emptySearchMessage?: string
+  /** Aria label on the DataGrid for screen readers. */
+  gridAriaLabel?: string
+  /** Aria-label template for the amount input. `{label}` is replaced with the variant label. */
+  priceAriaTemplate?: string
+  /** Aria-label template for the compare-at input. `{label}` is replaced with the variant label. */
+  compareAtAriaTemplate?: string
+}
+
+export interface BulkPriceTableProps {
+  rows: BulkPriceRow[]
+  /** Currency symbol shown inside the money cells (e.g. "$", "€"). */
+  symbol: string
+  /** Decimal separator used by the cell formatter (e.g. "." or ","). */
+  decimal: string
+  /** Localized strings — the caller owns translations. */
+  labels: BulkPriceTableLabels
+  /** Called when the user commits a value to a cell. The id is the row id. */
+  onChange: (rowId: string, field: 'amount' | 'compareAt', value: string | null) => void
+
+  // Optional state for the toolbar + pagination footer. Omitting all of these
+  // hides the toolbar/pagination entirely (use for in-memory single-page lists).
+  search?: string
+  onSearchChange?: (next: string) => void
+  page?: number
+  totalPages?: number
+  onPageChange?: (next: number) => void
+  isLoading?: boolean
+}
+
+/**
+ * Presentational primitive for any "spreadsheet of variant prices" UI. Owns
+ * the DataGrid columns, money-cell wiring, currency-aware formatting, search
+ * input, and pagination footer. Owns NO data fetching, edit tracking, or save
+ * logic — the caller projects its rows into BulkPriceRow shape and writes
+ * edits back through `onChange`.
+ */
+export function BulkPriceTable({
+  rows,
+  symbol,
+  decimal,
+  labels,
+  onChange,
+  search,
+  onSearchChange,
+  page,
+  totalPages,
+  onPageChange,
+  isLoading,
+}: BulkPriceTableProps) {
+  const columns = useMemo<ColumnDef<BulkPriceRow>[]>(
+    () => [
+      {
+        id: 'variant',
+        header: labels.variant,
+        cell: ({ row }) => {
+          const r = row.original
+          if (r.kind !== 'item') return null
+          return (
+            <ReadOnlyCell className="text-muted-foreground">
+              {r.variantLabel ?? labels.variantDefault}
+            </ReadOnlyCell>
+          )
+        },
+      },
+      {
+        id: 'sku',
+        header: labels.sku,
+        cell: ({ row }) => {
+          const r = row.original
+          if (r.kind !== 'item') return null
+          return (
+            <ReadOnlyCell className="font-mono text-xs text-muted-foreground">
+              {r.sku ?? '—'}
+            </ReadOnlyCell>
+          )
+        },
+      },
+      {
+        id: 'amount',
+        header: () => <span className="block text-right">{labels.price}</span>,
+        cell: ({ row, table }) => {
+          const r = row.original
+          if (r.kind !== 'item') return null
+          const coords = { row: editableRowIndex(table.getRowModel().rows, row.id), col: 2 }
+          const label = r.variantLabel ?? labels.variantDefault
+          return (
+            <MoneyCell
+              coords={coords}
+              value={r.amount ?? null}
+              onChange={(next) => onChange(r.id, 'amount', next)}
+              symbol={symbol}
+              decimal={decimal}
+              ariaLabel={labels.priceAriaTemplate?.replace('{label}', label) ?? label}
+            />
+          )
+        },
+      },
+      {
+        id: 'compare_at',
+        header: () => <span className="block text-right">{labels.compareAt}</span>,
+        cell: ({ row, table }) => {
+          const r = row.original
+          if (r.kind !== 'item') return null
+          const coords = { row: editableRowIndex(table.getRowModel().rows, row.id), col: 3 }
+          const label = r.variantLabel ?? labels.variantDefault
+          return (
+            <MoneyCell
+              coords={coords}
+              value={r.compareAt ?? null}
+              onChange={(next) => onChange(r.id, 'compareAt', next)}
+              symbol={symbol}
+              decimal={decimal}
+              ariaLabel={labels.compareAtAriaTemplate?.replace('{label}', label) ?? label}
+            />
+          )
+        },
+      },
+    ],
+    [symbol, decimal, onChange, labels],
+  )
+
+  const showToolbar =
+    labels.countSummary !== undefined ||
+    (onSearchChange !== undefined && labels.searchPlaceholder !== undefined)
+  const showPagination =
+    page !== undefined && totalPages !== undefined && totalPages > 1 && onPageChange !== undefined
+  const isEmpty = !isLoading && rows.length === 0
+  const hasSearch = !!search && search.length > 0
+
+  return (
+    <div className="flex h-full flex-col gap-3">
+      {showToolbar && (
+        // Always-mounted toolbar. Conditionally rendering the search input
+        // would unmount it whenever a deferred query refetches into the
+        // loading state, blurring the field mid-keystroke.
+        <div className="flex shrink-0 items-center justify-between gap-3">
+          {labels.countSummary !== undefined && (
+            <p className="text-xs text-muted-foreground">{labels.countSummary}</p>
+          )}
+          {onSearchChange !== undefined && labels.searchPlaceholder !== undefined && (
+            <Input
+              type="search"
+              placeholder={labels.searchPlaceholder}
+              value={search ?? ''}
+              onChange={(e) => onSearchChange(e.target.value)}
+              className="h-9 max-w-sm"
+            />
+          )}
+        </div>
+      )}
+
+      <div className="min-h-0 flex-1 overflow-auto">
+        {isLoading ? (
+          <p className="text-sm text-muted-foreground">{labels.loading}</p>
+        ) : isEmpty ? (
+          <p className="text-sm text-muted-foreground">
+            {hasSearch
+              ? (labels.emptySearchMessage ?? labels.emptyMessage ?? '')
+              : (labels.emptyMessage ?? '')}
+          </p>
+        ) : (
+          <DataGrid<BulkPriceRow>
+            rows={rows}
+            columns={columns}
+            getRowId={(row) => row.id}
+            renderSectionHeader={(row) =>
+              row.kind === 'header' ? (
+                <div className="truncate font-medium">{row.groupLabel}</div>
+              ) : null
+            }
+            aria-label={labels.gridAriaLabel}
+          />
+        )}
+      </div>
+
+      {showPagination && (
+        <div className="flex shrink-0 items-center justify-between gap-2 text-xs text-muted-foreground">
+          <span>
+            {labels.pageOf.replace('{page}', String(page)).replace('{total}', String(totalPages))}
+          </span>
+          <div className="flex gap-1">
+            <Button
+              type="button"
+              size="sm"
+              variant="outline"
+              onClick={() => onPageChange(Math.max(1, page - 1))}
+              disabled={page === 1 || isLoading}
+            >
+              {labels.prev}
+            </Button>
+            <Button
+              type="button"
+              size="sm"
+              variant="outline"
+              onClick={() => onPageChange(Math.min(totalPages, page + 1))}
+              disabled={page === totalPages || isLoading}
+            >
+              {labels.next}
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/spree/calculator-summary.tsx

@@ -0,0 +1,120 @@
+/**
+ * One-line preview of a calculator's configuration — "Flat Rate · $5.00",
+ * "Percent on line item · 10%", etc. Used for promotion-action rows
+ * today; intended as the shared row-summary for any calculator-backed
+ * model (delivery methods, tax rates, …).
+ *
+ * The expected payload mirrors the admin API's calculator embed: a
+ * `{ label, preferences, preference_schema }` triple. The component is
+ * tolerant of partial input — missing schema or preferences just fall
+ * back to the label alone.
+ *
+ * Lives on the frontend (rather than as a server-rendered string) so
+ * draft edits update the row immediately, before any save.
+ */
+export interface CalculatorPayload {
+  /** Human-readable name (e.g. "Flat Rate"). Optional; if missing the type is demodulized. */
+  label?: string | null
+  /** 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
+}
+
+interface CalculatorSummaryProps {
+  calculator: CalculatorPayload | null | undefined
+  /**
+   * What to show when `calculator` is missing or empty. Use this to
+   * differentiate "no calculator picked" from "calculator with no
+   * preferences yet." Defaults to nothing (returns null).
+   */
+  fallback?: React.ReactNode
+  className?: string
+}
+
+export function CalculatorSummary({
+  calculator,
+  fallback = null,
+  className,
+}: CalculatorSummaryProps) {
+  const text = formatCalculatorSummary(calculator)
+  if (!text) return <>{fallback}</>
+  return <span className={className}>{text}</span>
+}
+
+/**
+ * Pure formatter — exported for callers that want to embed the string
+ * inside a larger sentence (e.g. "Free shipping · {summary}") or use
+ * it in a non-React context.
+ */
+export function formatCalculatorSummary(
+  calculator: CalculatorPayload | null | undefined,
+): string | null {
+  if (!calculator) return null
+
+  const label =
+    calculator.label?.trim() ||
+    (calculator.type ? (calculator.type.split('::').pop() ?? calculator.type) : '')
+
+  const schema = calculator.preference_schema
+  const prefs = calculator.preferences
+
+  if (!schema?.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))
+    .filter((s): s is string => s !== null)
+    .join(', ')
+
+  if (!details) return label || null
+  return label ? `${label} · ${details}` : details
+}
+
+/**
+ * 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::*`.
+ *
+ * - `amount` / `*_amount` decimals → currency-formatted.
+ * - `*_percent` decimals → `N%`.
+ * - `currency` strings → omitted (folded into the money formatting).
+ * - booleans → humanized key when true; skipped when false.
+ * - everything else → `key: value`.
+ */
+function formatField(
+  field: { key: string; type: string },
+  value: unknown,
+  currency: string,
+): string | null {
+  if (value === null || value === undefined || value === '') return null
+  if (field.key === 'currency') return null
+
+  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
+  }
+  return `${humanize(field.key)}: ${value}`
+}
+
+function formatMoney(value: unknown, currency: string): string {
+  const n = typeof value === 'number' ? value : Number(value)
+  if (Number.isNaN(n)) return String(value)
+  try {
+    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(n)
+  } catch {
+    return `${n} ${currency}`
+  }
+}
+
+function humanize(key: string): string {
+  const spaced = key.replace(/_/g, ' ').trim()
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1)
+}

package/src/spree/color-picker.tsx

@@ -0,0 +1,202 @@
+import { useEffect, useRef, useState } from 'react'
+import { HexColorPicker } from 'react-colorful'
+import { useTranslation } from 'react-i18next'
+import { cn } from '../lib/utils'
+import { Input } from '../ui/input'
+
+/** Matches the server-side validation in `Spree::OptionValue#color_code`. */
+const HEX_RE = /^#?[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/
+
+function normalizeHex(input: string | null | undefined): string | null {
+  if (!input) return null
+  const trimmed = input.trim()
+  if (!trimmed) return null
+  const withHash = trimmed.startsWith('#') ? trimmed : `#${trimmed}`
+  return HEX_RE.test(withHash) ? withHash.toUpperCase() : null
+}
+
+export interface ColorPickerProps {
+  /** Hex value with `#` prefix (e.g. `#FF0000`). `null` / `undefined` / `''` for empty. */
+  value: string | null | undefined
+  /** Fires with a normalized `#RRGGBB` value, or `null` when cleared. */
+  onChange: (value: string | null) => void
+  /** Disables the trigger and locks the panel closed. */
+  disabled?: boolean
+  /** Forwarded to the text input for label association. */
+  id?: string
+  /** Forwarded to the text input. */
+  'aria-invalid'?: boolean
+  className?: string
+  placeholder?: string
+  /**
+   * Hides the inline hex input — the swatch button alone becomes the trigger
+   * and the hex input moves into the picker panel. Use in dense surfaces
+   * (table cells, repeated row editors) where the inline input would crowd
+   * the layout. Default `false`.
+   */
+  compact?: boolean
+  /**
+   * Which edge of the swatch the panel anchors to. `start` (default) grows
+   * the panel rightward from the swatch's left edge; `end` grows it leftward
+   * from the swatch's right edge — use when the swatch sits near the right
+   * edge of its container (e.g. the rightmost cells in a table).
+   */
+  panelAlign?: 'start' | 'end'
+}
+
+/**
+ * Hex color picker with a swatch trigger and a free-form text input.
+ *
+ * The picker panel is rendered **inline** (not via a portal) because Base UI's
+ * `<Popover>` Portal mechanism interacts poorly with deeply-nested portal trees
+ * (e.g. when the picker lives inside a `<Sheet>` inside a `<TableRow>` inside a
+ * `useSortable` context — the Popup component silently fails to mount). The
+ * inline approach uses an absolute-positioned panel with click-outside +
+ * Escape-to-close handling.
+ */
+export function ColorPicker({
+  value,
+  onChange,
+  disabled,
+  id,
+  'aria-invalid': ariaInvalid,
+  className,
+  placeholder = '#000000',
+  compact = false,
+  panelAlign = 'start',
+}: ColorPickerProps) {
+  const { t } = useTranslation()
+  const normalizedValue = normalizeHex(value)
+  const [open, setOpen] = useState(false)
+  // Local text mirrors `value` but lets the user type freely (including
+  // invalid intermediate states like `#FF`) without bouncing through onChange.
+  const [text, setText] = useState(normalizedValue ?? '')
+  const containerRef = useRef<HTMLDivElement | null>(null)
+
+  // Resync when the form-level value changes (e.g. when the picker writes to
+  // a different row, or when the form resets after a save).
+  useEffect(() => {
+    setText(normalizedValue ?? '')
+  }, [normalizedValue])
+
+  // `pointerdown` (not `click`) fires before the trigger's own click, matching
+  // popover-library behavior so reopening doesn't double-toggle.
+  useEffect(() => {
+    if (!open) return
+    function handle(event: PointerEvent) {
+      const target = event.target as Node | null
+      if (!target || !containerRef.current) return
+      if (!containerRef.current.contains(target)) {
+        setOpen(false)
+      }
+    }
+    function handleKey(event: KeyboardEvent) {
+      if (event.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('pointerdown', handle)
+    document.addEventListener('keydown', handleKey)
+    return () => {
+      document.removeEventListener('pointerdown', handle)
+      document.removeEventListener('keydown', handleKey)
+    }
+  }, [open])
+
+  function commitText(raw: string) {
+    const normalized = normalizeHex(raw)
+    if (normalized) {
+      onChange(normalized)
+      setText(normalized)
+    } else if (raw.trim() === '') {
+      onChange(null)
+      setText('')
+    }
+    // else: invalid input — keep the text, don't propagate
+  }
+
+  const hexInput = (
+    <Input
+      id={id}
+      type="text"
+      inputMode="text"
+      autoComplete="off"
+      spellCheck={false}
+      value={text}
+      placeholder={placeholder}
+      disabled={disabled}
+      aria-invalid={ariaInvalid}
+      className="font-mono uppercase"
+      onChange={(e) => setText(e.target.value)}
+      onBlur={(e) => commitText(e.target.value)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault()
+          commitText(e.currentTarget.value)
+        }
+      }}
+    />
+  )
+
+  return (
+    <div ref={containerRef} className={cn('relative flex items-center gap-2', className)}>
+      <button
+        type="button"
+        disabled={disabled}
+        aria-label={
+          normalizedValue
+            ? t('admin.a11y.change_color', { value: normalizedValue })
+            : t('admin.a11y.pick_color')
+        }
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        onClick={() => setOpen((v) => !v)}
+        className={cn(
+          'inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-md border border-border shadow-xs transition-shadow',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          !normalizedValue && 'color-picker-empty-swatch',
+        )}
+        style={normalizedValue ? { backgroundColor: normalizedValue } : undefined}
+      />
+      {!compact && hexInput}
+      {open && (
+        <div
+          role="dialog"
+          aria-label={t('admin.a11y.pick_color')}
+          className={cn(
+            'absolute top-full z-50 mt-2 min-w-min rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-md',
+            panelAlign === 'end' ? 'right-0' : 'left-0',
+          )}
+        >
+          <HexColorPicker
+            color={normalizedValue ?? '#000000'}
+            onChange={(next) => {
+              const normalized = normalizeHex(next)
+              if (normalized) {
+                setText(normalized)
+                onChange(normalized)
+              }
+            }}
+          />
+          {compact && <div className="mt-3">{hexInput}</div>}
+          <div className="mt-3 flex items-center justify-between gap-2">
+            <span className="font-mono text-xs text-muted-foreground">
+              {normalizedValue ?? t('admin.color_picker.no_color')}
+            </span>
+            {normalizedValue && (
+              <button
+                type="button"
+                onClick={() => {
+                  setText('')
+                  onChange(null)
+                }}
+                className="text-xs text-muted-foreground underline-offset-2 hover:underline"
+              >
+                {t('admin.actions.clear')}
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/spree/confirm-dialog.tsx

@@ -0,0 +1,82 @@
+import { createContext, type ReactNode, useCallback, useContext, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '../ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog'
+
+interface ConfirmOptions {
+  title?: string
+  message: string
+  confirmLabel?: string
+  cancelLabel?: string
+  variant?: 'default' | 'destructive'
+}
+
+type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>
+
+const ConfirmContext = createContext<ConfirmFn | null>(null)
+
+export function useConfirm(): ConfirmFn {
+  const ctx = useContext(ConfirmContext)
+  if (!ctx) throw new Error('useConfirm must be used within ConfirmProvider')
+  return ctx
+}
+
+export function ConfirmProvider({ children }: { children: ReactNode }) {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const [options, setOptions] = useState<ConfirmOptions>({
+    message: '',
+  })
+  const resolveRef = useRef<((value: boolean) => void) | null>(null)
+
+  const confirm = useCallback((opts: ConfirmOptions): Promise<boolean> => {
+    setOptions(opts)
+    setOpen(true)
+    return new Promise<boolean>((resolve) => {
+      resolveRef.current = resolve
+    })
+  }, [])
+
+  const handleClose = useCallback((confirmed: boolean) => {
+    setOpen(false)
+    resolveRef.current?.(confirmed)
+    resolveRef.current = null
+  }, [])
+
+  return (
+    <ConfirmContext.Provider value={confirm}>
+      {children}
+      <Dialog
+        open={open}
+        onOpenChange={(o) => {
+          if (!o) handleClose(false)
+        }}
+      >
+        <DialogContent showCloseButton={false}>
+          <DialogHeader>
+            <DialogTitle>{options.title ?? t('admin.components.confirm_dialog.title')}</DialogTitle>
+            <DialogDescription>{options.message}</DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => handleClose(false)}>
+              {options.cancelLabel ?? t('admin.actions.cancel')}
+            </Button>
+            <Button
+              variant={options.variant === 'destructive' ? 'destructive' : 'default'}
+              onClick={() => handleClose(true)}
+            >
+              {options.confirmLabel ?? t('admin.actions.confirm')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </ConfirmContext.Provider>
+  )
+}