@spree/dashboard-ui 0.13.1 → 1.0.0-beta.1

package/src/spree/icons.ts

@@ -0,0 +1,167 @@
+/**
+ * The dashboard's icon set.
+ *
+ * Every icon the dashboard renders is re-exported from here rather than
+ * imported from `lucide-react` directly, so the icon set is swappable in one
+ * file instead of across hundreds. Adding an icon means adding a line here.
+ *
+ * `LucideIcon` is the icon *type* the nav registries and the plugin API are
+ * written against; it still comes straight from `lucide-react`.
+ */
+export {
+  AlertTriangleIcon,
+  ArchiveIcon,
+  ArrowLeftIcon,
+  ArrowLeftRightIcon,
+  ArrowUpDownIcon,
+  BadgeCheckIcon,
+  BanIcon,
+  BanknoteIcon,
+  BarChart3Icon as AnalyticsIcon,
+  BoldIcon,
+  BookOpenIcon,
+  BoxesIcon,
+  BracesIcon,
+  Building2Icon,
+  CalendarIcon,
+  CalendarOffIcon,
+  ChartColumnIcon,
+  CheckCircle2Icon,
+  CheckCircleIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronsLeftIcon,
+  ChevronsRightIcon,
+  ChevronsUpDownIcon,
+  CircleCheckIcon,
+  CircleDotIcon,
+  CircleIcon,
+  ClipboardCheckIcon,
+  ClockIcon,
+  Columns3Icon,
+  CommandIcon,
+  CopyIcon,
+  CornerDownLeftIcon,
+  CreditCardIcon,
+  DownloadIcon,
+  EllipsisVerticalIcon,
+  ExternalLinkIcon,
+  EyeIcon,
+  EyeOffIcon,
+  FileArchiveIcon,
+  FileAudioIcon,
+  FileCodeIcon,
+  FileIcon,
+  FileImageIcon,
+  FileSpreadsheetIcon,
+  FileTextIcon,
+  FileVideoIcon,
+  FilmIcon,
+  FilterIcon,
+  FolderMinusIcon,
+  FolderPlusIcon,
+  FolderTreeIcon,
+  GiftIcon,
+  GlobeIcon,
+  GlobeLockIcon,
+  GripVerticalIcon,
+  HandCoinsIcon,
+  HomeIcon,
+  ImageIcon,
+  ImagePlusIcon,
+  InboxIcon,
+  InfoIcon,
+  ItalicIcon,
+  KeyRoundIcon,
+  LanguagesIcon,
+  LayersIcon,
+  LibraryIcon,
+  LinkIcon,
+  ListChecksIcon,
+  ListFilter,
+  ListIcon,
+  ListOrderedIcon,
+  Loader2,
+  Loader2Icon,
+  Locate,
+  LockIcon,
+  LogOutIcon,
+  MailIcon,
+  MapIcon,
+  MapPinIcon,
+  Maximize,
+  MenuIcon,
+  MessageCircleIcon,
+  Minus,
+  MinusIcon,
+  MonitorIcon,
+  MoonStarIcon,
+  MoreHorizontalIcon,
+  MoveDownIcon,
+  MoveUpIcon,
+  OctagonXIcon,
+  PackageCheckIcon,
+  PackageIcon,
+  PackageXIcon,
+  PanelLeftIcon,
+  PaperclipIcon,
+  PauseIcon,
+  PencilIcon,
+  PercentIcon,
+  PhoneIcon,
+  PlayIcon,
+  PlugIcon,
+  Plus,
+  PlusIcon,
+  PrinterIcon,
+  QuoteIcon,
+  RadioTowerIcon,
+  ReceiptTextIcon,
+  RedoIcon,
+  RepeatIcon,
+  RotateCcwIcon,
+  RotateCcwIcon as ReturnRequestIcon,
+  ScrollTextIcon,
+  SearchIcon,
+  SendIcon,
+  SettingsIcon,
+  ShapesIcon,
+  ShieldAlertIcon,
+  ShieldCheckIcon,
+  ShieldIcon,
+  ShoppingCartIcon,
+  SlidersHorizontalIcon,
+  SparklesIcon,
+  SplitIcon,
+  StarIcon,
+  StoreIcon,
+  StrikethroughIcon,
+  SunIcon,
+  TableIcon,
+  TagIcon,
+  TagsIcon,
+  TicketPercentIcon,
+  Trash2Icon,
+  TrashIcon,
+  TrendingDownIcon,
+  TrendingUpIcon,
+  TriangleAlertIcon,
+  TruckIcon,
+  Undo2Icon,
+  UndoIcon,
+  UploadCloudIcon,
+  UploadIcon,
+  UserIcon,
+  UserMinusIcon,
+  UserPlusIcon,
+  UsersIcon,
+  UsersRoundIcon,
+  WarehouseIcon,
+  WebhookIcon,
+  X,
+  XCircleIcon,
+  XIcon,
+  ZapIcon,
+} from 'lucide-react'

package/src/spree/json-preview-drawer.tsx

@@ -8,6 +8,9 @@ import {
   SheetTitle,
   useCopyToClipboard,
 } from '@spree/dashboard-ui'
+import type { ComponentProps } from 'react'
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
   CheckIcon,
   ChevronDownIcon,
@@ -17,10 +20,7 @@ import {
   Loader2Icon,
   RotateCcwIcon,
   XIcon,
-} from 'lucide-react'
-import type { ComponentProps } from 'react'
-import { useEffect, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
+} from './icons'
 import { type JsonValueLinkResolver, JsonValueView } from './json-value-view'
 
 // Re-export so existing imports of `JsonValueLinkResolver` from this module

package/src/spree/label-upload-dialog.tsx

@@ -0,0 +1,195 @@
+import type { ReactNode } from 'react'
+import { Controller, type UseFormReturn } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { Button } from '../ui/button'
+import {
+  Combobox,
+  ComboboxButtonTrigger,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxSearch,
+  ComboboxTriggerPlaceholder,
+  ComboboxValue,
+} from '../ui/combobox'
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog'
+import { Field, FieldError, FieldLabel } from '../ui/field'
+import { Input } from '../ui/input'
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from '../ui/input-group'
+
+/** The form shape both panels bind for a label bought elsewhere. */
+export type LabelUploadFields = {
+  tracking_number: string
+  carrier: string
+  cost: string
+}
+
+/**
+ * Records a label the merchant bought elsewhere — postage from a carrier's
+ * own site, a 3PL's PDF — so the parcel still has its file, its tracking
+ * number and what it cost, with no carrier account connected.
+ *
+ * Shared by the operator's order page and the seller's; on the seller branch
+ * it is the only way a label arrives, since buying one runs through the
+ * marketplace's carrier account.
+ *
+ * The file field comes in as a slot: uploading needs an API client, which is
+ * each panel's own.
+ */
+export function LabelUploadDialog({
+  form,
+  open,
+  onOpenChange,
+  fileField,
+  carrierKeys,
+  carrierLabel,
+  currency,
+  onSubmit,
+  pending = false,
+}: {
+  form: UseFormReturn<LabelUploadFields>
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  fileField: ReactNode
+  carrierKeys: string[]
+  carrierLabel: (key: string) => string
+  /** Shown beside the cost, when the caller knows which currency it is in. */
+  currency?: string
+  onSubmit: (values: LabelUploadFields) => void | Promise<void>
+  pending?: boolean
+}) {
+  const { t } = useTranslation()
+  const { errors } = form.formState
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <form
+          onSubmit={(event) => {
+            // The order page renders its cards inside their own forms — without
+            // stopping the bubble the browser submits the outer one.
+            form.handleSubmit(onSubmit)(event)
+            event.stopPropagation()
+          }}
+        >
+          <DialogHeader>
+            <DialogTitle>{t('admin.orders.detail.fulfillments.upload_label_title')}</DialogTitle>
+            <DialogDescription>
+              {t('admin.orders.detail.fulfillments.upload_label_description')}
+            </DialogDescription>
+          </DialogHeader>
+
+          <DialogBody className="flex flex-col gap-4">
+            {errors.root?.message && (
+              <p className="text-destructive text-sm" role="alert">
+                {errors.root.message}
+              </p>
+            )}
+
+            <Field>
+              <FieldLabel>{t('admin.orders.detail.fulfillments.upload_label_file')}</FieldLabel>
+              {fileField}
+            </Field>
+
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <Field>
+                <FieldLabel htmlFor="label-tracking-number">
+                  {t('admin.orders.fulfill.tracking_label')}
+                </FieldLabel>
+                <Input
+                  id="label-tracking-number"
+                  placeholder={t('admin.orders.fulfill.tracking_placeholder')}
+                  aria-invalid={!!errors.tracking_number}
+                  {...form.register('tracking_number')}
+                />
+                <FieldError errors={[errors.tracking_number]} />
+              </Field>
+
+              <Field>
+                <FieldLabel htmlFor="label-cost">
+                  {t('admin.orders.detail.fulfillments.upload_label_cost')}
+                </FieldLabel>
+                <InputGroup>
+                  {currency && (
+                    <InputGroupAddon>
+                      <InputGroupText>{currency}</InputGroupText>
+                    </InputGroupAddon>
+                  )}
+                  <InputGroupInput
+                    id="label-cost"
+                    type="number"
+                    step="0.01"
+                    min="0"
+                    {...form.register('cost')}
+                  />
+                </InputGroup>
+                <FieldError errors={[errors.cost]} />
+              </Field>
+            </div>
+
+            <Field>
+              <FieldLabel htmlFor="label-carrier">
+                {t('admin.orders.detail.fulfillments.carrier_label')}
+              </FieldLabel>
+              <Controller
+                control={form.control}
+                name="carrier"
+                render={({ field }) => (
+                  <Combobox
+                    items={carrierKeys}
+                    value={field.value}
+                    onValueChange={(value: string | null) => field.onChange(value ?? '')}
+                    itemToStringLabel={carrierLabel}
+                  >
+                    <ComboboxButtonTrigger id="label-carrier" onBlur={field.onBlur}>
+                      {field.value ? (
+                        <ComboboxValue />
+                      ) : (
+                        <ComboboxTriggerPlaceholder>
+                          {t('admin.orders.detail.fulfillments.carrier_auto')}
+                        </ComboboxTriggerPlaceholder>
+                      )}
+                    </ComboboxButtonTrigger>
+                    <ComboboxContent>
+                      <ComboboxSearch
+                        placeholder={t('admin.orders.detail.fulfillments.carrier_search')}
+                      />
+                      <ComboboxEmpty>{t('admin.common.no_results')}</ComboboxEmpty>
+                      <ComboboxList>
+                        {(value: string) => (
+                          <ComboboxItem key={value} value={value}>
+                            {carrierLabel(value)}
+                          </ComboboxItem>
+                        )}
+                      </ComboboxList>
+                    </ComboboxContent>
+                  </Combobox>
+                )}
+              />
+            </Field>
+          </DialogBody>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              {t('admin.actions.cancel')}
+            </Button>
+            <Button type="submit" disabled={pending}>
+              {pending
+                ? t('admin.actions.saving')
+                : t('admin.orders.detail.fulfillments.upload_label')}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/spree/language-menu-items.tsx

@@ -1,13 +1,7 @@
-import { CheckIcon, LanguagesIcon } from 'lucide-react'
-import {
-  DropdownMenuItem,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-} from '../ui/dropdown-menu'
+import { ChevronsUpDownIcon } from './icons'
 
 interface LanguageMenuItemsProps {
-  /** Translated "Language" label for the submenu trigger (passed by the app). */
+  /** Translated "Language" label for the row (passed by the app). */
   label: string
   /** Admin UI languages available to switch to ({ code, name } pairs). */
   locales: ReadonlyArray<{ code: string; name: string }>
@@ -17,9 +11,15 @@ interface LanguageMenuItemsProps {
 }
 
 /**
- * Admin UI language picker rendered inside the user dropdown menu as a nested
- * submenu (a single "Language ▸" row that expands to the list), so the menu
- * stays compact no matter how many languages are installed.
+ * Admin UI language picker rendered inside the user dropdown's Preferences
+ * section, as a native `<select>`.
+ *
+ * Native rather than the design system's `Select`: a menu nested inside a menu
+ * is awkward to drive with a pointer and stacks two portal layers, while the
+ * platform control opens as its own popup outside the dropdown entirely — and
+ * gives long locale lists native scrolling and type-ahead for free. The
+ * `<select>` is transparent and overlaid on the styled pill, so the row still
+ * matches the Theme row above it.
  *
  * Headless: the label, locale list, and change handler are passed in, so this
  * component imports no i18n/data runtime. Renders nothing when fewer than two
@@ -31,24 +31,31 @@ export function LanguageMenuItems({ label, locales, value, onSelect }: LanguageM
   const current = locales.find((l) => l.code === value)
 
   return (
-    <DropdownMenuSub>
-      <DropdownMenuSubTrigger>
-        <LanguagesIcon className="size-4" />
-        {label}
-        {current && <span className="ml-auto text-xs text-muted-foreground">{current.name}</span>}
-      </DropdownMenuSubTrigger>
-      <DropdownMenuSubContent>
-        {locales.map((locale) => (
-          <DropdownMenuItem
-            key={locale.code}
-            closeOnClick={false}
-            onClick={() => onSelect(locale.code)}
-          >
-            {locale.name}
-            {value === locale.code && <CheckIcon className="ml-auto size-3.5" />}
-          </DropdownMenuItem>
-        ))}
-      </DropdownMenuSubContent>
-    </DropdownMenuSub>
+    // Not a DropdownMenuItem: the row is a container for the select, and menu
+    // items steal the pointer and close the menu on click.
+    <div className="flex items-center justify-between gap-2 rounded-lg px-2 py-1.5">
+      <span className="text-sm text-foreground">{label}</span>
+      {/* The select is transparent and stretched over the pill, so the hit area
+          tracks the pill's width whatever the locale name is. `focus-within`
+          carries the focus ring, since `opacity-0` hides the native one. */}
+      <span className="relative inline-flex rounded-lg focus-within:ring-2 focus-within:ring-ring">
+        <span className="pointer-events-none inline-flex items-center gap-1.5 rounded-lg border border-border bg-card px-2 py-1 text-xs font-normal text-foreground">
+          {current?.name ?? value}
+          <ChevronsUpDownIcon className="size-3 text-muted-foreground" />
+        </span>
+        <select
+          aria-label={label}
+          value={value}
+          onChange={(event) => onSelect(event.target.value)}
+          className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+        >
+          {locales.map((locale) => (
+            <option key={locale.code} value={locale.code}>
+              {locale.name}
+            </option>
+          ))}
+        </select>
+      </span>
+    </div>
   )
 }

package/src/spree/metadata/metadata-card.tsx

@@ -1,7 +1,7 @@
-import { BracesIcon } from 'lucide-react'
 import { Fragment } from 'react'
 import { Card, CardContent, CardHeader, CardTitle } from '../../ui/card'
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '../../ui/empty'
+import { BracesIcon } from '../icons'
 
 interface MetadataCardProps {
   /**

package/src/spree/order-cancel-dialog.tsx

@@ -0,0 +1,149 @@
+import type { ReactNode } from 'react'
+import { Controller, type UseFormReturn } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { Button } from '../ui/button'
+import { Checkbox } from '../ui/checkbox'
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog'
+import { Field, FieldLabel } from '../ui/field'
+import { Textarea } from '../ui/textarea'
+
+/** The form shape both panels bind for a cancellation. */
+export type CancelOrderFields = {
+  cancel_reason_id: string
+  cancel_note: string
+  refund_payments: boolean
+  notify_customer: boolean
+}
+
+/**
+ * Cancels an order, asking why first.
+ *
+ * A dialog rather than a bare confirm, because a cancellation carries a
+ * reason the merchant wants recorded — this doubles as the confirmation, so
+ * there is no second dialog in front of it.
+ *
+ * `showRefund` is off by default: releasing an unclaimed authorization happens
+ * either way, but handing back money already taken is not every surface's
+ * decision. On the seller branch the endpoint accepts no refund argument at
+ * all, so showing the switch would offer something that would be refused.
+ */
+export function OrderCancelDialog({
+  form,
+  reasonField,
+  showRefund = false,
+  showNotify = true,
+  onSubmit,
+  onClose,
+  pending = false,
+}: {
+  form: UseFormReturn<CancelOrderFields>
+  /** The reason picker, wired to whichever vocabulary the caller reads. */
+  reasonField?: ReactNode
+  showRefund?: boolean
+  showNotify?: boolean
+  onSubmit: (values: CancelOrderFields) => void | Promise<void>
+  onClose: () => void
+  pending?: boolean
+}) {
+  const { t } = useTranslation()
+  const { errors } = form.formState
+
+  return (
+    <Dialog open onOpenChange={(next) => !next && onClose()}>
+      <DialogContent>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <DialogHeader>
+            <DialogTitle>{t('admin.pages.orders.detail.dialogs.cancel_title')}</DialogTitle>
+            <DialogDescription>{t('admin.orders.detail.cancel.description')}</DialogDescription>
+          </DialogHeader>
+
+          <DialogBody>
+            {errors.root?.message && (
+              <p className="text-destructive text-sm" role="alert">
+                {errors.root.message}
+              </p>
+            )}
+
+            <div className="flex flex-col gap-4">
+              {reasonField}
+
+              <Field>
+                <FieldLabel htmlFor="order-cancel-note">
+                  {t('admin.orders.detail.cancel.note_label')}
+                </FieldLabel>
+                <Textarea
+                  id="order-cancel-note"
+                  rows={3}
+                  placeholder={t('admin.orders.detail.cancel.note_placeholder')}
+                  {...form.register('cancel_note')}
+                />
+              </Field>
+
+              {showRefund && (
+                <Controller
+                  control={form.control}
+                  name="refund_payments"
+                  render={({ field }) => (
+                    <label
+                      htmlFor="order-cancel-refund"
+                      className="flex cursor-pointer items-start gap-2 text-sm"
+                    >
+                      <Checkbox
+                        id="order-cancel-refund"
+                        checked={field.value}
+                        onCheckedChange={(checked) => field.onChange(checked === true)}
+                      />
+                      <span>
+                        {t('admin.orders.detail.cancel.refund_payments')}
+                        <span className="block text-muted-foreground">
+                          {t('admin.orders.detail.cancel.refund_payments_help')}
+                        </span>
+                      </span>
+                    </label>
+                  )}
+                />
+              )}
+
+              {showNotify && (
+                <Controller
+                  control={form.control}
+                  name="notify_customer"
+                  render={({ field }) => (
+                    <label
+                      htmlFor="order-cancel-notify"
+                      className="flex cursor-pointer items-center gap-2 text-sm"
+                    >
+                      <Checkbox
+                        id="order-cancel-notify"
+                        checked={field.value}
+                        onCheckedChange={(checked) => field.onChange(checked === true)}
+                      />
+                      {t('admin.orders.detail.cancel.notify_customer')}
+                    </label>
+                  )}
+                />
+              )}
+            </div>
+          </DialogBody>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose} disabled={pending}>
+              {t('admin.orders.detail.cancel.keep_order')}
+            </Button>
+            <Button type="submit" variant="destructive" disabled={pending}>
+              {t('admin.pages.orders.detail.actions.cancel')}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}