@spree/dashboard-core 0.13.0 → 1.0.0-beta.1

package/src/components/locale-select.tsx

@@ -1,19 +1,16 @@
 import {
   Combobox,
+  ComboboxButtonTrigger,
   ComboboxChip,
   ComboboxChips,
   ComboboxChipsInput,
   ComboboxContent,
   ComboboxEmpty,
-  ComboboxInput,
   ComboboxItem,
   ComboboxList,
+  ComboboxSearch,
+  ComboboxTriggerPlaceholder,
   ComboboxValue,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
   useComboboxAnchor,
 } from '@spree/dashboard-ui'
 import { useMemo, useState } from 'react'
@@ -26,7 +23,12 @@ interface BaseProps {
   options?: string[]
   /** Locale to filter out (e.g. the default locale when picking additional supported ones). */
   excludeCode?: string
-  /** Marks the field required for screen readers + native form submission. */
+  /**
+   * Announces the field as required to assistive technology (`aria-required`).
+   * It does not enforce anything: the trigger is a button, so there is no
+   * native constraint validation behind it. The consuming form owns
+   * enforcement.
+   */
   required?: boolean
   disabled?: boolean
   placeholder?: string
@@ -34,10 +36,23 @@ interface BaseProps {
   id?: string
 }
 
+/**
+ * Single-select only, by design — the multi-select deliberately does not
+ * support these. Its search box is the chips input itself rather than a box
+ * inside the popup, and its validity is a property of the whole selection
+ * rather than of one control. Declaring them here rather than on `BaseProps`
+ * makes passing them to a `multiple` picker a compile error instead of a prop
+ * that is silently dropped.
+ */
 interface SingleProps extends BaseProps {
   multiple?: false
   value: string | null | undefined
   onChange: (locale: string) => void
+  /** Text in the dropdown's search box. */
+  searchPlaceholder?: string
+  invalid?: boolean
+  /** Forwarded to the trigger so RHF's `<Controller>` can track touched state. */
+  onBlur?: () => void
 }
 
 interface MultiProps extends BaseProps {
@@ -58,16 +73,16 @@ function useLocaleDisplayName() {
   return (code: string) => displayName(code) ?? code
 }
 
-/** Mirrors `CurrencySelect`'s row format: `CODE — Localized Name`. */
+/**
+ * Mirrors `CurrencySelect`'s row format: `CODE — Localized Name`. Codes the
+ * runtime cannot name (`Intl.DisplayNames` returns the code back, as it does
+ * for `dz`) render as the bare upper-cased code rather than `DZ — dz`.
+ */
 function formatOption(code: string, name: string) {
   const upper = code.toUpperCase()
-  return name === code ? upper : `${upper} — ${name}`
+  return !name || name.toLowerCase() === code.toLowerCase() ? upper : `${upper} — ${name}`
 }
 
-/** Above this many options a plain `<Select>` is unwieldy — switch to a
- *  searchable combobox. Matches `CurrencySelect`. */
-const SEARCHABLE_THRESHOLD = 12
-
 /**
  * Combobox `filter` factory shared by the single- and multi-select pickers:
  * case-insensitive match on both the raw code and the localized `CODE — Name`
@@ -100,6 +115,11 @@ export function LocaleLabel({ code }: { code: string }) {
  * `Intl.DisplayNames` against the store's `default_locale`. Use this anywhere
  * the merchant is choosing a storefront language (market default, supported
  * locales list, customer preference, etc.).
+ *
+ * The single-select field is a button showing the current locale, with the
+ * search box inside the dropdown; it is always searchable, whatever the list
+ * length, so the field behaves the same on a store with three locales as on
+ * one offering the full translatable set.
  */
 export function LocaleSelect(props: LocaleSelectProps) {
   const { t } = useTranslation()
@@ -153,52 +173,45 @@ export function LocaleSelect(props: LocaleSelectProps) {
   const value = props.value ?? ''
   const placeholder = props.placeholder ?? t('admin.components.locale_select.placeholder')
 
-  // Long lists (e.g. the full set of translatable locales) are unusable as a
-  // plain dropdown — switch to a searchable combobox, matching `CurrencySelect`.
-  if (items.length > SEARCHABLE_THRESHOLD) {
-    return (
-      <Combobox
-        items={items}
-        value={value}
-        onValueChange={(next: string | null) => props.onChange(next ?? '')}
-        itemToStringLabel={(locale: string | null) => (locale ? labelFor(locale) : '')}
-        itemToStringValue={(locale: string | null) => locale ?? ''}
-        filter={localeFilter(labelFor)}
+  return (
+    <Combobox
+      items={items}
+      value={value}
+      onValueChange={(next: string | null) => props.onChange(next ?? '')}
+      itemToStringLabel={(locale: string | null) => (locale ? labelFor(locale) : '')}
+      itemToStringValue={(locale: string | null) => locale ?? ''}
+      filter={localeFilter(labelFor)}
+      disabled={props.disabled}
+    >
+      <ComboboxButtonTrigger
+        id={props.id}
+        onBlur={props.onBlur}
         disabled={props.disabled}
+        aria-required={props.required}
+        aria-invalid={props.invalid || undefined}
       >
-        <ComboboxInput id={props.id} aria-required={props.required} placeholder={placeholder} />
-        <ComboboxContent>
-          <ComboboxEmpty>{t('admin.components.locale_select.empty')}</ComboboxEmpty>
-          <ComboboxList>
-            {(locale: string) => (
-              <ComboboxItem key={locale} value={locale}>
-                {labelFor(locale)}
-              </ComboboxItem>
-            )}
-          </ComboboxList>
-        </ComboboxContent>
-      </Combobox>
-    )
-  }
-
-  return (
-    <Select value={value} onValueChange={props.onChange} disabled={props.disabled}>
-      <SelectTrigger id={props.id} aria-required={props.required}>
-        {/* Base UI's `<SelectValue>` defaults to the raw locale code. Use
-            the children render-prop so the trigger shows the same
-            `CODE — Name` as the items. */}
-        <SelectValue placeholder={placeholder}>
-          {(v) => (v ? labelFor(v as string) : (v as string))}
-        </SelectValue>
-      </SelectTrigger>
-      <SelectContent>
-        {items.map((locale) => (
-          <SelectItem key={locale} value={locale}>
-            {labelFor(locale)}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
+        {value ? (
+          <span className="truncate">{labelFor(value)}</span>
+        ) : (
+          <ComboboxTriggerPlaceholder>{placeholder}</ComboboxTriggerPlaceholder>
+        )}
+      </ComboboxButtonTrigger>
+      <ComboboxContent>
+        <ComboboxSearch
+          placeholder={
+            props.searchPlaceholder ?? t('admin.components.locale_select.search_placeholder')
+          }
+        />
+        <ComboboxEmpty>{t('admin.components.locale_select.empty')}</ComboboxEmpty>
+        <ComboboxList>
+          {(locale: string) => (
+            <ComboboxItem key={locale} value={locale}>
+              {labelFor(locale)}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
   )
 }
 

package/src/components/media-picker-sheet.tsx

@@ -0,0 +1,307 @@
+import {
+  Button,
+  SearchInput,
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@spree/dashboard-ui'
+import { CheckIcon, ImageIcon, Loader2Icon, PlayIcon, UploadIcon } from '@spree/dashboard-ui/icons'
+import { useQuery } from '@tanstack/react-query'
+import { useDeferredValue, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useTenantId } from '../providers/tenant-provider'
+
+/** The shape the picker needs; a full Media record satisfies it. */
+export interface MediaPickerOption {
+  id: string
+  alt?: string | null
+  filename?: string | null
+  media_type?: string
+  small_url?: string | null
+  poster_url?: string | null
+  original_url?: string | null
+  /** Blob signed id, for handing a picked file to a plain attachment field. */
+  signed_id?: string | null
+}
+
+export interface MediaPickerSheetProps<T extends MediaPickerOption> {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** Paginated search over the library. Called with the trimmed query. */
+  search: (query: string) => Promise<{ data: T[] }>
+  /** Called with the picked files when the user confirms. */
+  onConfirm: (media: T[]) => void | Promise<void>
+  /** Uploads a file and returns the created library row, for the upload tab. */
+  onUpload?: (file: File) => Promise<T>
+  /** One file only — the picker confirms as soon as a tile is clicked. */
+  multiple?: boolean
+  /** Cache-isolation key, one per picker instance. */
+  queryKey: string
+  accept?: string
+  title?: string
+  description?: string
+  confirmLabel?: string
+  onConfirmError?: (error: unknown) => void
+}
+
+/**
+ * Browse the store's media library and pick files from it.
+ *
+ * A grid rather than the row list {@link ResourcePickerSheet} uses: choosing a
+ * picture means looking at it, and a filename tells a merchant almost nothing
+ * about which photo it is.
+ *
+ * Headless — the caller supplies `search` and `onUpload`, so the same sheet
+ * serves the product media card (which places files on a product) and plain
+ * image fields (which take the picked file's blob).
+ */
+export function MediaPickerSheet<T extends MediaPickerOption>({
+  open,
+  onOpenChange,
+  search,
+  onConfirm,
+  onUpload,
+  multiple = true,
+  queryKey,
+  accept = 'image/png,image/jpeg,image/webp,image/gif',
+  title,
+  description,
+  confirmLabel,
+  onConfirmError,
+}: MediaPickerSheetProps<T>) {
+  const { t } = useTranslation()
+  const tenantId = useTenantId()
+
+  const [input, setInput] = useState('')
+  const deferredInput = useDeferredValue(input)
+  const trimmedQuery = deferredInput.trim()
+  const [staged, setStaged] = useState<Map<string, T>>(new Map())
+  const [submitting, setSubmitting] = useState(false)
+  const [uploading, setUploading] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  // Bumped whenever the sheet closes. An upload started in an earlier session
+  // must not confirm into a host that has already moved on — closing mid-upload
+  // would otherwise still set the field the merchant cancelled.
+  const sessionRef = useRef(0)
+
+  // The tenant id is part of the key: a library is one tenant's, and without
+  // it reopening the picker after a store or seller switch serves the previous
+  // tenant's files from cache — whose ids the new tenant's API would reject.
+  const { data, isFetching, refetch } = useQuery({
+    queryKey: [queryKey, 'media-picker', tenantId, trimmedQuery],
+    queryFn: () => search(trimmedQuery),
+    enabled: open,
+    staleTime: 30_000,
+  })
+
+  const results = data?.data ?? []
+
+  async function pick(option: T) {
+    if (!multiple) {
+      await submit([option])
+      return
+    }
+
+    setStaged((prev) => {
+      const next = new Map(prev)
+      if (next.has(option.id)) next.delete(option.id)
+      else next.set(option.id, option)
+      return next
+    })
+  }
+
+  async function submit(media: T[]) {
+    if (media.length === 0) return
+    setSubmitting(true)
+    try {
+      await onConfirm(media)
+      reset()
+      onOpenChange(false)
+    } catch (error) {
+      // The mutation shows its own error; keep the sheet open with the
+      // selection intact so the merchant can retry.
+      onConfirmError?.(error)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  async function handleUpload(files: FileList | null) {
+    if (!files?.length || !onUpload) return
+
+    const session = sessionRef.current
+    setUploading(true)
+    try {
+      const uploaded: T[] = []
+      for (const file of Array.from(files)) {
+        uploaded.push(await onUpload(file))
+      }
+      // The file is in the library either way — only the confirmation is
+      // abandoned, so nothing the merchant uploaded is lost.
+      if (session !== sessionRef.current) return
+
+      await refetch()
+
+      if (multiple) {
+        setStaged((prev) => {
+          const next = new Map(prev)
+          for (const media of uploaded) next.set(media.id, media)
+          return next
+        })
+      } else {
+        await submit(uploaded.slice(0, 1))
+      }
+    } catch (error) {
+      onConfirmError?.(error)
+    } finally {
+      setUploading(false)
+      if (fileInputRef.current) fileInputRef.current.value = ''
+    }
+  }
+
+  function reset() {
+    setStaged(new Map())
+    setInput('')
+  }
+
+  function handleOpenChange(next: boolean) {
+    if (!next) {
+      sessionRef.current += 1
+      reset()
+    }
+    onOpenChange(next)
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={handleOpenChange}>
+      <SheetContent className="w-full gap-0 p-0 sm:max-w-2xl">
+        <SheetHeader>
+          <SheetTitle>{title ?? t('admin.media_picker.title')}</SheetTitle>
+          <SheetDescription>{description ?? t('admin.media_picker.description')}</SheetDescription>
+        </SheetHeader>
+
+        <div className="flex items-center gap-2 border-b border-border-subtle p-4">
+          <SearchInput
+            value={input}
+            onValueChange={setInput}
+            // Enter has no action here; swallow it so it can't submit a host form.
+            onKeyDown={(e) => e.key === 'Enter' && e.preventDefault()}
+            placeholder={t('admin.media_picker.search_placeholder')}
+            clearLabel={t('admin.common.clear')}
+            className="flex-1"
+          />
+          {onUpload && (
+            <>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept={accept}
+                multiple={multiple}
+                className="hidden"
+                onChange={(e) => handleUpload(e.target.files)}
+              />
+              <Button
+                type="button"
+                variant="outline"
+                disabled={uploading}
+                onClick={() => fileInputRef.current?.click()}
+              >
+                {uploading ? (
+                  <Loader2Icon className="size-4 animate-spin" />
+                ) : (
+                  <UploadIcon className="size-4" />
+                )}
+                {t('admin.media_picker.upload')}
+              </Button>
+            </>
+          )}
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-y-auto p-4">
+          {isFetching && results.length === 0 ? (
+            <div className="flex items-center justify-center py-10 text-muted-foreground">
+              <Loader2Icon className="size-5 animate-spin" />
+            </div>
+          ) : results.length === 0 ? (
+            <p className="p-6 text-center text-muted-foreground text-sm">
+              {trimmedQuery ? t('admin.media_picker.no_results') : t('admin.media_picker.empty')}
+            </p>
+          ) : (
+            <ul className="grid grid-cols-3 gap-3 sm:grid-cols-4">
+              {results.map((media) => {
+                const checked = staged.has(media.id)
+                const thumbnail = media.small_url ?? media.poster_url ?? media.original_url
+                const label = media.alt || media.filename || ''
+
+                return (
+                  <li key={media.id}>
+                    <button
+                      type="button"
+                      onClick={() => pick(media)}
+                      aria-pressed={checked}
+                      className={`group relative block w-full overflow-hidden rounded-md border transition-colors ${
+                        checked
+                          ? 'border-primary ring-2 ring-primary'
+                          : 'border-border hover:border-muted-foreground'
+                      }`}
+                    >
+                      <span className="flex aspect-square items-center justify-center bg-muted">
+                        {thumbnail ? (
+                          <img
+                            src={thumbnail}
+                            alt={label}
+                            loading="lazy"
+                            className="size-full object-cover"
+                          />
+                        ) : (
+                          <ImageIcon className="size-6 text-muted-foreground" />
+                        )}
+                      </span>
+
+                      {media.media_type !== 'image' && (
+                        <span className="absolute top-1.5 left-1.5 rounded bg-black/60 p-1 text-white">
+                          <PlayIcon className="size-3" />
+                        </span>
+                      )}
+
+                      {checked && (
+                        <span className="absolute top-1.5 right-1.5 rounded-full bg-primary p-1 text-primary-foreground">
+                          <CheckIcon className="size-3" />
+                        </span>
+                      )}
+
+                      {label && (
+                        <span className="block truncate px-2 py-1.5 text-left text-xs">
+                          {label}
+                        </span>
+                      )}
+                    </button>
+                  </li>
+                )
+              })}
+            </ul>
+          )}
+        </div>
+
+        {multiple && (
+          <SheetFooter className="flex-row items-center justify-between border-t border-border">
+            <span className="text-muted-foreground text-xs">
+              {t('admin.media_picker.selected_count', { count: staged.size })}
+            </span>
+            <Button
+              type="button"
+              disabled={staged.size === 0 || submitting}
+              onClick={() => submit(Array.from(staged.values()))}
+            >
+              {submitting && <Loader2Icon className="size-4 animate-spin" />}
+              {confirmLabel ?? t('admin.media_picker.confirm')}
+            </Button>
+          </SheetFooter>
+        )}
+      </SheetContent>
+    </Sheet>
+  )
+}

package/src/components/mobile-top-bar.tsx

@@ -0,0 +1,75 @@
+import { SidebarTrigger, Skeleton } from '@spree/dashboard-ui'
+import { SearchIcon } from '@spree/dashboard-ui/icons'
+import { useTranslation } from 'react-i18next'
+import { useOptionalCommandPalette } from '../hooks/use-command-palette'
+import { useOptionalStore } from '../providers/store-provider'
+import { SidebarUser } from './sidebar-user'
+
+/**
+ * The bar a phone gets in place of the nav rail.
+ *
+ * On a narrow screen the rail is an off-canvas drawer, so something on the
+ * page has to open it — and after the shell moved the account menu and the
+ * search box into the rail, that trigger is the only way to reach either of
+ * them. Without this bar the drawer has no opener at all and the nav is
+ * simply unreachable, which is why it renders unconditionally rather than
+ * only where a breadcrumb trail exists.
+ *
+ * Deliberately thin: the trigger, the store it belongs to, and search. Page
+ * titles and actions stay with `PageHeader` below, so this never becomes a
+ * second place to look for them.
+ */
+export function MobileTopBar({
+  uiLocales = [],
+  onEditProfile,
+  title,
+}: {
+  uiLocales?: ReadonlyArray<{ code: string; name: string }>
+  onEditProfile?: () => void
+  /** Name shown beside the controls. Defaults to the store's, for panels that have one. */
+  title?: string
+} = {}) {
+  const { t } = useTranslation()
+  // `useOptionalStore` rather than `useStore`: the seller panel mounts this
+  // under a `TenantProvider` with no store at all, and a hard `useStore`
+  // throws there — taking every seller page down at phone width. A panel
+  // without a store passes its own `title` instead.
+  const storeContext = useOptionalStore()
+  // Absent in panels that mount no palette (the seller panel), where the
+  // search button would open nothing.
+  const palette = useOptionalCommandPalette()
+
+  const label = title ?? storeContext?.store?.name
+  // Only a store-backed panel has a name still loading; one that passes its
+  // own title has nothing to wait for.
+  const isLoading = title === undefined && (storeContext?.isLoading ?? false)
+
+  return (
+    // `h-14` (56px) is the phone top-bar height on Android, and comfortably
+    // clears the 44pt iOS navigation bar; the controls inside are `size-11`
+    // (44px), the touch target both platforms ask for and the size this
+    // codebase already uses for mobile controls in the table toolbar.
+    <div className="sticky top-0 z-30 flex h-14 shrink-0 items-center gap-1 border-b border-border bg-card px-2 md:hidden">
+      <SidebarTrigger className="size-11 shrink-0 text-muted-foreground hover:bg-accent hover:text-foreground" />
+
+      {isLoading ? (
+        <Skeleton className="h-4 w-28" />
+      ) : (
+        <span className="min-w-0 flex-1 truncate font-medium text-sm">{label}</span>
+      )}
+
+      {palette && (
+        <button
+          type="button"
+          onClick={() => palette.setOpen(true)}
+          aria-label={t('admin.components.command_palette.search_label')}
+          className="inline-flex size-11 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors duration-100 hover:bg-accent hover:text-foreground"
+        >
+          <SearchIcon className="size-5" />
+        </button>
+      )}
+
+      <SidebarUser variant="bar" uiLocales={uiLocales} onEditProfile={onEditProfile} />
+    </div>
+  )
+}