@spree/dashboard-core 0.1.0

package/src/components/country-combobox.tsx

@@ -0,0 +1,238 @@
+import {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxValue,
+  CountryFlag,
+  InputGroupAddon,
+  useComboboxAnchor,
+} from '@spree/dashboard-ui'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useCountries } from '../hooks/use-countries'
+import { useDisplayName } from '../hooks/use-display-name'
+
+export type CountryOption = { iso: string; iso3: string; name: string }
+
+/**
+ * Resolves a country's display name in the admin UI language (keyed on the
+ * stable ISO code), falling back to the API's backend-locale `name` when the
+ * runtime lacks coverage.
+ */
+function useCountryDisplayName() {
+  const displayName = useDisplayName('region')
+  return (country: CountryOption) => displayName(country.iso) ?? country.name
+}
+
+/**
+ * Case-insensitive substring match against name, iso, and iso3 so the user
+ * can find a country by typing "United States", "US", or "USA". Both pickers
+ * filter the cached `useCountries()` list client-side — countries are a
+ * ~250-row static set, so there's no remote search. Mirrors the server-side
+ * `search` Ransack scope (`Spree::Country.search`).
+ */
+export function countryFilter(item: CountryOption, query: string): boolean {
+  const q = query.trim().toLowerCase()
+  if (!q) return true
+  return (
+    item.name.toLowerCase().includes(q) ||
+    item.iso.toLowerCase().includes(q) ||
+    item.iso3.toLowerCase().includes(q)
+  )
+}
+
+/**
+ * Filter that also matches the LOCALIZED country name shown to the user (not
+ * just the raw backend `name` / ISO codes), so typing a translated label finds
+ * its country. Memoized on the display-name resolver.
+ */
+function useCountryFilter() {
+  const countryName = useCountryDisplayName()
+  return useMemo(
+    () => (item: CountryOption, query: string) => {
+      const q = query.trim().toLowerCase()
+      if (!q) return true
+      return countryName(item).toLowerCase().includes(q) || countryFilter(item, query)
+    },
+    [countryName],
+  )
+}
+
+/**
+ * Shared dropdown row used by both pickers — flag + localized name + ISO code
+ * in a muted suffix. The ISO code makes ISO-based matches (typing "US"/"USA")
+ * comprehensible and keeps the two pickers visually consistent.
+ */
+function CountryRow({ country, label }: { country: CountryOption; label: string }) {
+  return (
+    <span className="flex items-center gap-3">
+      <CountryFlag iso={country.iso} />
+      <span>{label}</span>
+      {country.iso && <span className="text-xs text-muted-foreground">({country.iso})</span>}
+    </span>
+  )
+}
+
+/**
+ * Searchable single-select country picker. Value is the 2-letter ISO code
+ * (so the field round-trips cleanly with the Spree API). Renders the country
+ * name + flag in the trigger and `<CountryRow>` in the dropdown.
+ */
+export function CountryCombobox({
+  value,
+  onValueChange,
+  placeholder,
+  disabled = false,
+}: {
+  value: string | null | undefined
+  onValueChange: (iso: string) => void
+  placeholder?: string
+  disabled?: boolean
+}) {
+  const { t } = useTranslation()
+  const { countries } = useCountries()
+  const countryName = useCountryDisplayName()
+  const filter = useCountryFilter()
+
+  const items: CountryOption[] = useMemo(
+    () => countries.map((c) => ({ iso: c.iso, iso3: c.iso3, name: c.name })),
+    [countries],
+  )
+
+  // The Combobox holds the selected object internally; we adapt to a flat ISO
+  // string at the boundary so callers don't have to thread the option shape.
+  const selected = useMemo(() => items.find((c) => c.iso === value) ?? null, [items, value])
+
+  return (
+    <Combobox
+      items={items}
+      value={selected}
+      onValueChange={(c: CountryOption | null) => onValueChange(c?.iso ?? '')}
+      itemToStringLabel={(c: CountryOption | null) => (c ? countryName(c) : '')}
+      itemToStringValue={(c: CountryOption | null) => c?.iso ?? ''}
+      disabled={disabled}
+      // Matches the localized name, the raw name, and both ISO codes so typing
+      // "Allemagne", "Germany", "DE", or "DEU" all find the country.
+      filter={filter}
+    >
+      <ComboboxInput
+        placeholder={placeholder ?? t('admin.components.country_combobox.search_placeholder')}
+        disabled={disabled}
+      >
+        {/* When a country is picked the InputGroup gets a leading flag —
+            mirrors the dropdown items so the trigger shows the same shape.
+            Hidden while empty so the input doesn't lurch when typing a new
+            search query. */}
+        {selected?.iso && (
+          <InputGroupAddon align="inline-start">
+            <CountryFlag iso={selected.iso} />
+          </InputGroupAddon>
+        )}
+      </ComboboxInput>
+      <ComboboxContent>
+        <ComboboxEmpty>{t('admin.components.country_combobox.empty')}</ComboboxEmpty>
+        <ComboboxList>
+          {(country: CountryOption) => (
+            <ComboboxItem key={country.iso} value={country}>
+              <CountryRow country={country} label={countryName(country)} />
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
+
+/**
+ * Searchable multi-select country picker. Value is an array of 2-letter ISO
+ * codes. Renders a flag + name per chip and `<CountryRow>` per dropdown row;
+ * filters the cached `useCountries()` list client-side via `countryFilter`
+ * (name + both ISO codes). Reused anywhere the admin picks multiple
+ * countries (promotion Country rule, market/zone editors, …).
+ */
+export function CountryMultiCombobox({
+  value,
+  onValueChange,
+  placeholder,
+  emptyText,
+  disabled = false,
+}: {
+  /** Selected 2-letter ISO codes. */
+  value: string[]
+  /** Fires with the next array of ISO codes. */
+  onValueChange: (isos: string[]) => void
+  placeholder?: string
+  emptyText?: string
+  disabled?: boolean
+}) {
+  const { t } = useTranslation()
+  const { countries } = useCountries()
+  const countryName = useCountryDisplayName()
+  const filter = useCountryFilter()
+  const anchorRef = useComboboxAnchor()
+  const [inputValue, setInputValue] = useState('')
+
+  const items: CountryOption[] = useMemo(
+    () => countries.map((c) => ({ iso: c.iso, iso3: c.iso3, name: c.name })),
+    [countries],
+  )
+
+  // The Combobox holds full option objects; selection round-trips as ISO
+  // strings. Selected ISOs not yet present in `items` (list still loading)
+  // fall back to a stub so chips don't vanish on first render.
+  const selected = useMemo<CountryOption[]>(
+    () => value.map((iso) => items.find((c) => c.iso === iso) ?? { iso, iso3: '', name: iso }),
+    [value, items],
+  )
+
+  return (
+    <Combobox
+      multiple
+      items={items}
+      value={selected}
+      onValueChange={(next: CountryOption[]) => {
+        onValueChange(next.map((c) => c.iso))
+        setInputValue('')
+      }}
+      itemToStringLabel={(c: CountryOption | null) => (c ? countryName(c) : '')}
+      itemToStringValue={(c: CountryOption | null) => c?.iso ?? ''}
+      isItemEqualToValue={(a: CountryOption, b: CountryOption) => a.iso === b.iso}
+      filter={filter}
+      disabled={disabled}
+    >
+      <ComboboxChips ref={anchorRef}>
+        <ComboboxValue>
+          {(selectedCountries: CountryOption[]) =>
+            selectedCountries.map((c) => (
+              <ComboboxChip key={c.iso}>
+                {c.iso && <CountryFlag iso={c.iso} className="mr-2" />}
+                {countryName(c)}
+              </ComboboxChip>
+            ))
+          }
+        </ComboboxValue>
+        <ComboboxChipsInput
+          placeholder={placeholder ?? t('admin.promotions.rules.country.search_placeholder')}
+          value={inputValue}
+          onChange={(e) => setInputValue((e.target as HTMLInputElement).value)}
+        />
+      </ComboboxChips>
+      <ComboboxContent anchor={anchorRef}>
+        <ComboboxEmpty>{emptyText ?? t('admin.promotions.rules.country.empty')}</ComboboxEmpty>
+        <ComboboxList>
+          {(country: CountryOption) => (
+            <ComboboxItem key={country.iso} value={country}>
+              <CountryRow country={country} label={countryName(country)} />
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}

package/src/components/country-state-fields.tsx

@@ -0,0 +1,86 @@
+import type { State } from '@spree/admin-sdk'
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from '@spree/dashboard-ui'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useCountries } from '../hooks/use-countries'
+
+type StateOption = { abbr: string; name: string }
+
+/**
+ * Country/state lookup for the active country selection. `states` is empty
+ * when the country doesn't enumerate them (free-text region); `statesRequired`
+ * tells callers whether to fall back to a plain text input.
+ */
+export function useCountryStates(countryIso: string | null | undefined) {
+  const { countries } = useCountries()
+  const country = useMemo(
+    () => countries.find((c) => c.iso === countryIso) ?? null,
+    [countries, countryIso],
+  )
+  return {
+    states: ((country?.states ?? []) as StateOption[]).filter((s) => Boolean(s.abbr)),
+    statesRequired: country?.states_required ?? false,
+  }
+}
+
+/**
+ * Searchable state/province picker for a given country. Value is the state
+ * abbreviation (e.g. "CA"). Callers should hide this and render a free-text
+ * Input when `useCountryStates(...).states` is empty.
+ *
+ * Keyed on `countryIso` so the internal state is reset when the country
+ * changes — prevents a stale highlight from a previous country.
+ */
+export function StateCombobox({
+  countryIso,
+  states,
+  value,
+  onValueChange,
+  placeholder,
+  disabled = false,
+}: {
+  countryIso: string | null | undefined
+  /** State list for the active country (typically from `useCountryStates`). */
+  states: Pick<State, 'abbr' | 'name'>[]
+  value: string | null | undefined
+  onValueChange: (abbr: string) => void
+  placeholder?: string
+  disabled?: boolean
+}) {
+  const { t } = useTranslation()
+  const items = states as StateOption[]
+  const selected = useMemo(() => items.find((s) => s.abbr === value) ?? null, [items, value])
+
+  return (
+    <Combobox
+      key={countryIso ?? 'no-country'}
+      items={items}
+      value={selected}
+      onValueChange={(s: StateOption | null) => onValueChange(s?.abbr ?? '')}
+      itemToStringLabel={(s: StateOption | null) => s?.name ?? ''}
+      itemToStringValue={(s: StateOption | null) => s?.abbr ?? ''}
+    >
+      <ComboboxInput
+        placeholder={placeholder ?? t('admin.components.state_combobox.search_placeholder')}
+        disabled={disabled}
+      />
+      <ComboboxContent>
+        <ComboboxEmpty>{t('admin.components.state_combobox.empty')}</ComboboxEmpty>
+        <ComboboxList>
+          {(state: StateOption) => (
+            <ComboboxItem key={state.abbr} value={state}>
+              {state.name}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}

package/src/components/currency-select.tsx

@@ -0,0 +1,181 @@
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@spree/dashboard-ui'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDisplayName } from '../hooks/use-display-name'
+import { useStore } from '../providers/store-provider'
+
+/**
+ * Every ISO 4217 currency code the runtime knows about — the active-currency
+ * counterpart to the Rails admin's `Money::Currency.table` list. Used for
+ * contexts where the merchant can pick *any* currency (a market's currency)
+ * rather than one the store already supports. Degrades to an empty list on
+ * runtimes without `Intl.supportedValuesOf`, so callers fall back to
+ * `supported_currencies`.
+ */
+export const ALL_CURRENCY_CODES: string[] = (() => {
+  try {
+    return Intl.supportedValuesOf('currency')
+  } catch {
+    return []
+  }
+})()
+
+interface CurrencySelectProps {
+  /** ID for the trigger — paired with the parent `<FieldLabel htmlFor>`. */
+  id?: string
+  /** Submit name — a hidden input mirrors the value so plain `FormData` works. */
+  name?: string
+  /** Initial selection. Falls back to the store's default currency. */
+  defaultValue?: string
+  /** Controlled value. Pair with `onChange` to lift state out. */
+  value?: string
+  /** Fires on every selection change. */
+  onChange?: (currency: string) => void
+  /**
+   * Currency codes to pick from. Defaults to the current store's
+   * `supported_currencies`. Pass `ALL_CURRENCY_CODES` (or any custom list) for
+   * contexts where the merchant chooses a currency the store doesn't yet
+   * support — e.g. a market's currency. Large lists switch to a searchable
+   * combobox automatically.
+   */
+  options?: string[]
+  /** Marks the field required for screen readers + native form submission. */
+  required?: boolean
+  disabled?: boolean
+}
+
+/** Above this many options a plain `<Select>` is unwieldy — switch to search. */
+const SEARCHABLE_THRESHOLD = 12
+
+/**
+ * Picker for a currency code. Defaults to the current store's
+ * `supported_currencies` (and the store's `default_currency`), so callers
+ * choosing among already-configured currencies don't have to wire anything up.
+ * Pass `options` (e.g. `ALL_CURRENCY_CODES`) when the merchant may pick any
+ * currency, such as a market's currency. Each option reads `CODE — Full Name`
+ * (e.g. `USD — US Dollar`), with the name localized to the admin UI language.
+ * Long option lists render a searchable combobox.
+ */
+export function CurrencySelect({
+  id,
+  name,
+  defaultValue,
+  value: controlledValue,
+  onChange,
+  options,
+  required,
+  disabled,
+}: CurrencySelectProps) {
+  const { t } = useTranslation()
+  const { currencies, defaultCurrency } = useStore()
+  const [internalValue, setInternalValue] = useState(defaultValue ?? defaultCurrency)
+  const isControlled = controlledValue !== undefined
+  // Controlled callers that pass an empty value still see the store default
+  // in the dropdown. Derive it here without emitting onChange — committing the
+  // fallback during render dirties forms and re-triggers effects. The caller
+  // gets the real value the first time the merchant interacts.
+  const value = isControlled ? controlledValue || defaultCurrency : internalValue
+  const displayNameFor = useDisplayName('currency')
+
+  // Union of the option list and the current value so editing a record whose
+  // currency isn't in the list (a store-supported list that later narrowed)
+  // never silently drops the selection. An empty `options` (e.g. a runtime
+  // without `Intl.supportedValuesOf` yields an empty `ALL_CURRENCY_CODES`)
+  // falls back to the store's currencies rather than an empty picker.
+  const items = useMemo(() => {
+    const base = options?.length ? options : currencies
+    return value && !base.includes(value) ? [value, ...base] : base
+  }, [options, currencies, value])
+
+  const handleChange = (next: string) => {
+    if (!isControlled) setInternalValue(next)
+    onChange?.(next)
+  }
+
+  const renderOption = (code: string) => {
+    const currencyName = displayNameFor(code)
+    // Avoid `USD — USD` when the resolver falls back to the code itself.
+    return currencyName && currencyName !== code ? `${code} — ${currencyName}` : code
+  }
+
+  // Case-insensitive match against the code and its localized name so typing
+  // "EUR" or "Euro" both find it.
+  const filter = (code: string, query: string) => {
+    const q = query.trim().toLowerCase()
+    if (!q) return true
+    return code.toLowerCase().includes(q) || renderOption(code).toLowerCase().includes(q)
+  }
+
+  const hiddenInput = name ? <input type="hidden" name={name} value={value} /> : null
+
+  if (items.length > SEARCHABLE_THRESHOLD) {
+    return (
+      <>
+        {hiddenInput}
+        <Combobox
+          items={items}
+          value={value}
+          onValueChange={(next: string | null) => handleChange(next ?? '')}
+          itemToStringLabel={(code: string | null) => (code ? renderOption(code) : '')}
+          itemToStringValue={(code: string | null) => code ?? ''}
+          filter={filter}
+          disabled={disabled}
+        >
+          <ComboboxInput
+            id={id}
+            aria-required={required}
+            placeholder={t('admin.components.currency_select.placeholder')}
+            disabled={disabled}
+          />
+          <ComboboxContent>
+            <ComboboxEmpty>{t('admin.components.currency_select.empty')}</ComboboxEmpty>
+            <ComboboxList>
+              {(code: string) => (
+                <ComboboxItem key={code} value={code}>
+                  {renderOption(code)}
+                </ComboboxItem>
+              )}
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+      </>
+    )
+  }
+
+  return (
+    <>
+      {/* Hidden input keeps the parent `<form>` submit / FormData path working
+          without each caller having to thread the value through state. */}
+      {hiddenInput}
+      <Select value={value} onValueChange={handleChange} disabled={disabled}>
+        <SelectTrigger id={id} aria-required={required}>
+          {/* Base UI's `<SelectValue>` defaults to rendering the raw `value`
+              (the bare ISO code). Use the children render-prop so the
+              trigger shows the same `CODE — Full Name` as the items. */}
+          <SelectValue placeholder={t('admin.components.currency_select.placeholder')}>
+            {(v) => (v ? renderOption(v as string) : (v as string))}
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          {items.map((currency) => (
+            <SelectItem key={currency} value={currency}>
+              {renderOption(currency)}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </>
+  )
+}

package/src/components/export-button.tsx

@@ -0,0 +1,156 @@
+import type { ExportType } from '@spree/admin-sdk'
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldLabel,
+  FieldTitle,
+  RadioGroup,
+  RadioGroupItem,
+} from '@spree/dashboard-ui'
+import type { TFunction } from 'i18next'
+import { DownloadIcon, FilterIcon, GlobeIcon } from 'lucide-react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useExport } from '../hooks/use-export'
+import { filtersToRansack } from '../lib/filters-to-ransack'
+import type { ResourceActionsContext } from './resource-table'
+
+interface ExportButtonProps extends ResourceActionsContext {
+  /** Which dataset to export. Server validates against `Spree::Export.available_types`. */
+  type: ExportType
+  /** Label shown on the button. Defaults to the translated "Export" action. */
+  label?: string
+}
+
+type Selection = 'filtered' | 'all'
+
+export function ExportButton({
+  type,
+  label,
+  filters,
+  search,
+  searchParam,
+  columns,
+  totalCount,
+}: ExportButtonProps) {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const [selection, setSelection] = useState<Selection>('filtered')
+  const exportMutation = useExport()
+
+  const hasActiveFilter = filters.length > 0 || search.trim().length > 0
+
+  function handleExport() {
+    const search_params: Record<string, unknown> = filtersToRansack(filters, columns)
+    if (search.trim()) {
+      search_params[searchParam] = search.trim()
+    }
+
+    exportMutation.mutate({
+      type,
+      record_selection: selection,
+      search_params: selection === 'filtered' ? search_params : undefined,
+    })
+    setOpen(false)
+  }
+
+  return (
+    <>
+      <Button
+        size="sm"
+        variant="outline"
+        className="h-[2.125rem]"
+        onClick={() => setOpen(true)}
+        disabled={exportMutation.isPending}
+      >
+        <DownloadIcon className="size-4" />
+        {label ?? t('admin.actions.export')}
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t('admin.components.export_button.title')}</DialogTitle>
+            <DialogDescription>{t('admin.components.export_button.description')}</DialogDescription>
+          </DialogHeader>
+
+          <DialogBody>
+            <RadioGroup
+              value={selection}
+              onValueChange={(value) => setSelection(value as Selection)}
+            >
+              <ChoiceCard
+                value="filtered"
+                icon={<FilterIcon className="size-4" />}
+                title={t('admin.components.export_button.filtered.title')}
+                description={describeFiltered(t, hasActiveFilter, totalCount)}
+              />
+              <ChoiceCard
+                value="all"
+                icon={<GlobeIcon className="size-4" />}
+                title={t('admin.components.export_button.all.title')}
+                description={t('admin.components.export_button.all.description')}
+              />
+            </RadioGroup>
+          </DialogBody>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setOpen(false)}>
+              {t('admin.actions.cancel')}
+            </Button>
+            <Button onClick={handleExport} disabled={exportMutation.isPending}>
+              {exportMutation.isPending ? t('admin.actions.exporting') : t('admin.actions.export')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
+
+function describeFiltered(
+  t: TFunction,
+  hasActiveFilter: boolean,
+  totalCount: number | undefined,
+): string {
+  if (!hasActiveFilter) return t('admin.components.export_button.filtered.no_filter')
+  if (totalCount === undefined) return t('admin.components.export_button.filtered.unknown_count')
+  return t('admin.components.export_button.filtered.count', {
+    count: totalCount,
+    formattedCount: totalCount.toLocaleString(),
+  })
+}
+
+function ChoiceCard({
+  value,
+  icon,
+  title,
+  description,
+}: {
+  value: string
+  icon?: React.ReactNode
+  title: string
+  description: string
+}) {
+  return (
+    <FieldLabel>
+      <Field orientation="horizontal">
+        {icon && <span className="mt-0.5 text-muted-foreground">{icon}</span>}
+        <FieldContent>
+          <FieldTitle>{title}</FieldTitle>
+          <FieldDescription>{description}</FieldDescription>
+        </FieldContent>
+        <RadioGroupItem value={value} />
+      </Field>
+    </FieldLabel>
+  )
+}