@spree/dashboard-core 6.0.2 → 6.0.4

package/src/components/resource-image-field.tsx

@@ -0,0 +1,150 @@
+import type { Media } from '@spree/admin-sdk'
+import { Button } from '@spree/dashboard-ui'
+import { LibraryIcon } from '@spree/dashboard-ui/icons'
+import { useMemo, useState } from 'react'
+import type { UseFormReturn } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { ImageUploadField } from './image-upload-field'
+import { MediaPickerDialog, type MediaPickerDialogProps } from './media-picker-dialog'
+
+/**
+ * Where "Choose from library" looks and uploads. Only the operator's
+ * dashboard has a media library, so a panel without one passes nothing and
+ * the field offers an upload alone.
+ */
+export type MediaLibrarySource = Pick<MediaPickerDialogProps<Media>, 'search' | 'onUpload'>
+
+/**
+ * The form fields backing one image: a freshly uploaded file
+ * (`<name>_signed_id`), a transient object URL for the just-picked file
+ * (`<name>_preview_url`), and a flag marking the persisted attachment for
+ * removal (`<name>_cleared`). Together they form the three-state machine the
+ * API expects — see the `imageParam` mapper in the schema files.
+ *
+ * The triple is keyed by the attachment's own name, so a resource carrying
+ * `logo`/`cover_photo` composes exactly like one carrying `image`.
+ */
+export type ImageFieldsFor<Name extends string> = {
+  [K in `${Name}_signed_id` | `${Name}_preview_url`]: K extends `${string}_signed_id`
+    ? string | null
+    : string | null
+} & { [K in `${Name}_cleared`]: boolean }
+
+/** The pair categories and collections carry. */
+export type ImageFieldsShape = ImageFieldsFor<'image'> & ImageFieldsFor<'square_image'>
+
+/**
+ * Erased shape used inside the adapter only. The public API stays generic over
+ * the attachment name; this is what the three field paths are resolved against.
+ */
+interface ConcreteImageFields {
+  image_signed_id: string | null
+  image_preview_url: string | null
+  image_cleared: boolean
+}
+
+export interface ResourceImageFieldProps<Name extends string, T extends ImageFieldsFor<Name>> {
+  form: UseFormReturn<T>
+  /** The attachment's name on the model, e.g. `image`, `logo`, `cover_photo`. */
+  kind: Name
+  serverUrl: string | null
+  square?: boolean
+  /** Locale namespace holding the `images.*` copy, e.g. `admin.collections`. */
+  translationNamespace: string
+  /**
+   * Copy keys within `<translationNamespace>.images`. Default to the legacy
+   * `label`/`square_label` pair the two-image resources use; a resource with
+   * more than two attachments names them per field instead.
+   */
+  labelKey?: string
+  helpKey?: string
+  mediaLibrary?: MediaLibrarySource
+  /** Called with true while a picked image uploads; see `FileUploadField`. */
+  onUploadingChange?: (uploading: boolean) => void
+}
+
+/**
+ * Form adapter over the reusable {@link ImageUploadField}, shared by every
+ * resource whose form carries the image triple (categories, collections,
+ * sellers). Maps the triple onto the generic controlled `ImageUploadValue`
+ * and resolves labels from the owning resource's locale namespace.
+ */
+export function ResourceImageField<Name extends string, T extends ImageFieldsFor<Name>>({
+  form,
+  kind,
+  serverUrl,
+  square = false,
+  translationNamespace,
+  labelKey,
+  helpKey,
+  mediaLibrary,
+  onUploadingChange,
+}: ResourceImageFieldProps<Name, T>) {
+  const { t } = useTranslation()
+  const [picking, setPicking] = useState(false)
+
+  // The adapter only ever touches this one image triple, and always by the
+  // three names derived from `kind`. Narrow to a concrete triple so the
+  // field-path operations type-check: RHF's `Path<T>` cannot resolve a
+  // template-literal key against a generic mapped type, and `UseFormReturn`
+  // is invariant in its field-values type either way.
+  const imageForm = useMemo(() => form as unknown as UseFormReturn<ConcreteImageFields>, [form])
+
+  const signedIdField = `${kind}_signed_id` as 'image_signed_id'
+  const previewField = `${kind}_preview_url` as 'image_preview_url'
+  const clearedField = `${kind}_cleared` as 'image_cleared'
+
+  const resolvedLabelKey = labelKey ?? (square ? 'square_label' : 'label')
+  const resolvedHelpKey = helpKey ?? (square ? 'square_help' : 'help')
+
+  return (
+    <div className="space-y-2">
+      <ImageUploadField
+        square={square}
+        serverUrl={serverUrl}
+        label={t(`${translationNamespace}.images.${resolvedLabelKey}`)}
+        help={t(`${translationNamespace}.images.${resolvedHelpKey}`)}
+        onUploadingChange={onUploadingChange}
+        value={{
+          signedId: imageForm.watch(signedIdField),
+          previewUrl: imageForm.watch(previewField),
+          cleared: imageForm.watch(clearedField),
+        }}
+        onChange={(next) => {
+          imageForm.setValue(signedIdField, next.signedId, { shouldDirty: true })
+          imageForm.setValue(previewField, next.previewUrl, { shouldDirty: true })
+          imageForm.setValue(clearedField, next.cleared, { shouldDirty: true })
+        }}
+      />
+
+      {mediaLibrary && (
+        <>
+          <Button type="button" variant="outline" size="sm" onClick={() => setPicking(true)}>
+            <LibraryIcon className="size-4" />
+            {t('admin.media_library.choose_from_library')}
+          </Button>
+
+          <MediaPickerDialog<Media>
+            open={picking}
+            onOpenChange={setPicking}
+            {...mediaLibrary}
+            multiple={false}
+            queryKey={`image-field-${kind}`}
+            // Picking hands over the file's own blob, so this field and the library
+            // row point at one file — no upload, no second copy in storage.
+            onConfirm={(picked) => {
+              const media = picked[0]
+              if (!media?.signed_id) return
+
+              imageForm.setValue(signedIdField, media.signed_id, { shouldDirty: true })
+              imageForm.setValue(previewField, media.small_url ?? media.original_url ?? null, {
+                shouldDirty: true,
+              })
+              imageForm.setValue(clearedField, false, { shouldDirty: true })
+            }}
+          />
+        </>
+      )}
+    </div>
+  )
+}

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

@@ -267,7 +267,7 @@ export function ResourcePickerSheet<T extends PickerOption>({
               <Loader2Icon className="size-5 animate-spin" />
             </div>
           ) : results.length === 0 ? (
-            <p className="p-6 text-center text-muted-foreground text-sm">
+            <p className="p-6 text-center text-muted-foreground text-base">
               {t('admin.resource_picker.empty')}
             </p>
           ) : (
@@ -285,7 +285,7 @@ export function ResourcePickerSheet<T extends PickerOption>({
                       disabled={selectableOnPage.length === 0 || selectingAll}
                       className="pointer-events-none"
                     />
-                    <span className="truncate text-sm">
+                    <span className="truncate text-base">
                       {t('admin.resource_picker.select_page', { count: selectableOnPage.length })}
                     </span>
                   </button>

package/src/components/resource-table.tsx

@@ -36,6 +36,9 @@ import {
   TableHeader,
   TableHeaderRow,
   TableRow,
+  Tabs,
+  TabsList,
+  TabsTrigger,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
@@ -142,10 +145,27 @@ export const resourceSearchSchema = z.object({
       return val
     }, z.array(z.string()))
     .optional(),
+  /** The open tab of a table with `views`; absent means the first. */
+  view: z.string().optional(),
 })
 
 export type ResourceSearch = z.infer<typeof resourceSearchSchema>
 
+/**
+ * State for a `ResourceTable` held in the component rather than the URL, so
+ * several tables can sit on one page. Spread the result onto the table.
+ */
+export function useEmbeddedTableSearch(initial: Partial<ResourceSearch> = {}) {
+  const [search, setSearch] = useState<Record<string, unknown>>(initial)
+  // Parsed once per change: the table memoizes on the parsed arrays.
+  const searchParams = useMemo(() => resourceSearchSchema.parse(search), [search])
+  return {
+    searchParams,
+    onSearchChange: (updates: Record<string, unknown>) =>
+      setSearch((previous) => ({ ...previous, ...updates })),
+  }
+}
+
 // ============================================================================
 // Props
 // ============================================================================
@@ -166,6 +186,20 @@ export interface ResourceActionsContext {
   totalCount: number | undefined
 }
 
+/**
+ * One tab of a list split into parts that are never read together, such as
+ * the operator's own stock locations and their sellers'. Each tab is a fixed
+ * slice of the list, not a filter the merchant can clear.
+ */
+export interface TableView {
+  key: string
+  label: string
+  /** Request params sent while this tab is open, on top of `defaultParams`. */
+  params?: Record<string, unknown>
+  /** Columns this tab leaves out of the table, the column picker and the filters. */
+  hiddenColumns?: string[]
+}
+
 interface ResourceTableProps<T> {
   /** Registry key (e.g., 'products') */
   tableKey: string
@@ -184,6 +218,12 @@ interface ResourceTableProps<T> {
   queryFn: (params: never) => Promise<{ data: T[]; meta: PaginationMeta }>
   /** Current search params from the route */
   searchParams: ResourceSearch
+  /**
+   * Takes the table's state changes instead of the URL — for a table embedded
+   * in a record page beside others, which would otherwise share one `page`
+   * and `filters`. Pair with `useEmbeddedTableSearch`.
+   */
+  onSearchChange?: (updates: Record<string, unknown>) => void
   /** Title displayed in the toolbar header. Overrides the table definition's title. */
   title?: string
   /**
@@ -203,6 +243,19 @@ interface ResourceTableProps<T> {
   docsPath?: string
   /** Default params always sent with every request (e.g., { complete: 1 } for orders) */
   defaultParams?: Record<string, unknown>
+  /** Splits the list into tabs; the first opens by default. */
+  views?: TableView[]
+  /**
+   * Columns left out entirely — not shown, not offered as filters — such as
+   * the seller on a seller's own page. Adds to the open view's.
+   */
+  hiddenColumns?: string[]
+  /**
+   * Draws the table as a card — border, corners and lift — holding its
+   * toolbar and pagination, with a plain, unpinned header row: for a table
+   * embedded among a record page's cards.
+   */
+  framed?: boolean
   /**
    * Actions to render in the toolbar (e.g., "Add Product" button). Either a
    * static node, or a function that receives the current table state — use
@@ -260,11 +313,15 @@ export function ResourceTable<T extends Record<string, any>>({
   queryKey,
   queryFn,
   searchParams,
+  onSearchChange,
   title,
   hideHeader = false,
   description,
   docsPath,
-  defaultParams,
+  defaultParams: baseParams,
+  views,
+  hiddenColumns: tableHiddenColumns,
+  framed = false,
   actions,
   reorder,
   bulkActions,
@@ -296,8 +353,19 @@ export function ResourceTable<T extends Record<string, any>>({
     search,
     filters,
     columns: urlColumns,
+    view: urlView,
   } = searchParams
 
+  const activeView = views?.find((v) => v.key === urlView) ?? views?.[0]
+  const hiddenColumns = useMemo(
+    () => [...(tableHiddenColumns ?? []), ...(activeView?.hiddenColumns ?? [])],
+    [tableHiddenColumns, activeView],
+  )
+  const defaultParams = useMemo(
+    () => (activeView?.params ? { ...baseParams, ...activeView.params } : baseParams),
+    [baseParams, activeView],
+  )
+
   // When the table is reorderable, sort is locked to the position field
   // ascending — anything else makes drag-and-drop meaningless. Otherwise
   // fall through to the URL params, then the table's declared default,
@@ -310,21 +378,24 @@ export function ResourceTable<T extends Record<string, any>>({
   const sort = reorder ? positionField : (urlSort ?? defaultSort.field)
   const dir: 'asc' | 'desc' = reorder ? 'asc' : (urlDir ?? defaultSort.direction)
 
-  const [searchInput, setSearchInput] = useState(search ?? '')
+  const searchable = table.searchable !== false
+  const [searchInput, setSearchInput] = useState(searchable ? (search ?? '') : '')
   const deferredSearch = useDeferredValue(searchInput)
 
   // Registry columns + dynamic custom-field columns. Memoized so the toolbar's
   // internal memos (FilterPanel `items` stability) keep stable deps.
   const extraColumns = customFieldColumns ?? metafieldColumns
   const allColumns = useMemo(
-    () => [...table.columns, ...(extraColumns ?? [])],
-    [table, extraColumns],
+    () => [...table.columns, ...(extraColumns ?? [])].filter((c) => !hiddenColumns.includes(c.key)),
+    [table, extraColumns, hiddenColumns],
   )
   const displayableColumns = useMemo(
     () => allColumns.filter((c) => c.displayable !== false),
     [allColumns],
   )
-  const defaultColumnKeys = getDefaultColumnKeys(table)
+  const defaultColumnKeys = getDefaultColumnKeys(table).filter(
+    (key) => !hiddenColumns.includes(key),
+  )
   const visibleColumnKeys = urlColumns ?? defaultColumnKeys
 
   const visibleColumns = useMemo(
@@ -375,7 +446,17 @@ export function ResourceTable<T extends Record<string, any>>({
   const { data, isLoading } = useQuery({
     queryKey: [
       ...queryKeyPrefix,
-      { page, limit, sort: sortString, search: deferredSearch, filters, expand: columnExpand },
+      // The fixed params are part of the key: a tab changing them would
+      // otherwise be answered from the previous tab's cache.
+      {
+        page,
+        limit,
+        sort: sortString,
+        search: deferredSearch,
+        filters,
+        expand: columnExpand,
+        params: defaultParams,
+      },
     ],
     queryFn: () => {
       const params: Record<string, unknown> = {
@@ -470,6 +551,10 @@ export function ResourceTable<T extends Record<string, any>>({
 
   // Navigation helpers
   function updateSearch(updates: Record<string, unknown>) {
+    if (onSearchChange) {
+      onSearchChange(updates)
+      return
+    }
     navigate({
       search: (prev: Record<string, unknown>) => ({ ...prev, ...updates }) as never,
     })
@@ -491,6 +576,16 @@ export function ResourceTable<T extends Record<string, any>>({
     })
   }
 
+  // A filter set on one tab can name a column the next one hides, so a tab
+  // starts unfiltered.
+  function handleViewChange(key: string) {
+    updateSearch({
+      view: key === views?.[0]?.key ? undefined : key,
+      filters: undefined,
+      page: 1,
+    })
+  }
+
   function handleColumnsChange(cols: string[]) {
     const isDefault =
       cols.length === defaultColumnKeys.length && cols.every((c) => defaultColumnKeys.includes(c))
@@ -543,6 +638,31 @@ export function ResourceTable<T extends Record<string, any>>({
         })
       : actions
 
+  const toolbar = (
+    <TableToolbar
+      columns={displayableColumns}
+      visibleColumns={visibleColumnKeys}
+      onVisibleColumnsChange={handleColumnsChange}
+      search={searchInput}
+      onSearchChange={handleSearchChange}
+      searchable={searchable}
+      searchPlaceholder={table.searchPlaceholder ?? t('admin.common.search_placeholder')}
+      sort={{ field: sort, direction: dir }}
+      onSortChange={handleSortChange}
+      filters={filters as FilterRule[]}
+      onFiltersChange={handleFiltersChange}
+      allColumns={allColumns}
+      hideSort={reorderActive}
+    />
+  )
+  const pagination = meta && (
+    <Pagination
+      meta={meta}
+      onPageChange={(p) => updateSearch({ page: p })}
+      onPageSizeChange={(size) => updateSearch({ limit: size, page: 1 })}
+    />
+  )
+
   return (
     // Below `sm` the table spans the full width: the page gutter plus the
     // card's own border spends ~34px of a 390px screen on chrome, and a table
@@ -589,26 +709,31 @@ export function ResourceTable<T extends Record<string, any>>({
       {pageOwnsHeader && resolvedActions && (
         <div className="flex flex-wrap items-center justify-end gap-2">{resolvedActions}</div>
       )}
-      <TableToolbar
-        columns={displayableColumns}
-        visibleColumns={visibleColumnKeys}
-        onVisibleColumnsChange={handleColumnsChange}
-        search={searchInput}
-        onSearchChange={handleSearchChange}
-        searchPlaceholder={table.searchPlaceholder ?? t('admin.common.search_placeholder')}
-        sort={{ field: sort, direction: dir }}
-        onSortChange={handleSortChange}
-        filters={filters as FilterRule[]}
-        onFiltersChange={handleFiltersChange}
-        allColumns={allColumns}
-        hideSort={reorderActive}
-      />
-      {/* `overflow-x-clip`, never `overflow-hidden`: the rows clip to the
-          rounded frame horizontally, but a `hidden` overflow on either axis
-          makes this a scroll container, and the pinned column row inside
-          would then stick to THIS box rather than to the page — which is to
-          say, scroll away with it. */}
-      <Card className="-mx-4 gap-0 overflow-x-clip rounded-none border-0 bg-transparent py-0 shadow-none sm:mx-0 sm:rounded-xl sm:border">
+      {views && views.length > 1 && (
+        <Tabs value={activeView?.key} onValueChange={(v) => handleViewChange(v as string)}>
+          <TabsList>
+            {views.map((v) => (
+              <TabsTrigger key={v.key} value={v.key}>
+                {v.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
+      )}
+      {!framed && toolbar}
+      {/* Borderless: the list sits on the page with no card around it, its
+          header a rounded band and its rows divided by their own rules.
+          `overflow-x-clip`, never `overflow-hidden`: a `hidden` overflow on
+          either axis makes this a scroll container, and the pinned column row
+          inside would then stick to THIS box rather than to the page — which
+          is to say, scroll away with it. */}
+      <Card
+        className={cn(
+          'gap-0 overflow-x-clip',
+          !framed && 'rounded-none border-0 bg-transparent shadow-none',
+        )}
+      >
+        {framed && <div className="p-3">{toolbar}</div>}
         {reorderActive ? (
           <DndContext
             sensors={sensors}
@@ -619,7 +744,7 @@ export function ResourceTable<T extends Record<string, any>>({
               items={rows.map((r) => (r as any).id)}
               strategy={verticalListSortingStrategy}
             >
-              <Table stickyHeader roundedTop roundedBottom>
+              <Table stickyHeader={!framed} band={!framed}>
                 <TableHeader>
                   <TableHeaderRow>
                     <TableHead className="w-8" />
@@ -689,7 +814,8 @@ export function ResourceTable<T extends Record<string, any>>({
               // checkbox sitting beneath it — checking once, then never
               // unchecking.
               <div className="pointer-events-none sticky top-header-height z-30 h-0">
-                <div className="flex h-[2.1875rem] items-center ps-10 pe-4">
+                {/* The header band's height, so the actions centre on its checkbox. */}
+                <div className="flex h-10 items-center ps-10 pe-4">
                   <div className="pointer-events-auto min-w-0 flex-1">
                     <BulkActionBar
                       selectedIds={Array.from(selectedIds)}
@@ -739,7 +865,7 @@ export function ResourceTable<T extends Record<string, any>>({
                 </section>,
                 document.body,
               )}
-            <Table stickyHeader roundedTop roundedBottom>
+            <Table stickyHeader={!framed} band={!framed}>
               <TableHeader>
                 {/* Column headers stay mounted with rows selected, and the bulk
                     bar is laid over them. Swapping them for one `colSpan` cell
@@ -833,10 +959,8 @@ export function ResourceTable<T extends Record<string, any>>({
                         // the panel floats over its neighbours, and without this
                         // a merchant editing a figure has to count rows to see
                         // which record they are editing.
-                        className={cn(
-                          'has-data-[popup-open]:bg-accent-strong/40',
-                          isSelected && 'bg-accent-strong/75 hover:bg-accent-strong-hover',
-                        )}
+                        // The table's `band` style paints both from these.
+                        data-selected={isSelected || undefined}
                       >
                         {selectionEnabled && (
                           <TableCell className="w-8">
@@ -863,14 +987,11 @@ export function ResourceTable<T extends Record<string, any>>({
             </Table>
           </>
         )}
+        {/* Nothing to page through in an empty table. No rule of its own: the
+            last row's border already divides the two. */}
+        {framed && !!meta?.count && <div className="px-3 py-2">{pagination}</div>}
       </Card>
-      {meta && (
-        <Pagination
-          meta={meta}
-          onPageChange={(p) => updateSearch({ page: p })}
-          onPageSizeChange={(size) => updateSearch({ limit: size, page: 1 })}
-        />
-      )}
+      {!framed && pagination}
       {/* Clears the fixed bottom bar so it can't cover the pagination or the
           last row while a selection is active. Carries the same safe-area
           inset the bar pads itself by, or the home indicator's worth of bar

package/src/components/section-heading.tsx

@@ -49,12 +49,12 @@ export function SectionHeading({
         <CardTitle className="min-w-0 truncate text-lg">{title}</CardTitle>
       )}
       {(description || docsPath) && (
-        <p className="text-muted-foreground text-sm">
+        <p className="text-muted-foreground text-base">
           {description}
           {docsPath && (
             <>
               {description ? ' ' : null}
-              <ExternalLink href={docsUrl(docsPath)} className="text-sm">
+              <ExternalLink href={docsUrl(docsPath)} className="text-base">
                 {t('admin.common.learn_more')}
               </ExternalLink>
             </>

package/src/components/settings-container.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react'
+
+/**
+ * Settings content padding. The settings nav lives one level up, in the shared
+ * app shell's chrome, so this container owns only the content's padding.
+ *
+ * Every settings page inherits it — a page must NOT add its own
+ * `p-4`/`container`/`mx-auto`, or it double-pads and drifts from the rest of
+ * the area. Start a settings page at `<div className="flex flex-col gap-6">`.
+ */
+export function SettingsContainer({ children }: { children: ReactNode }) {
+  return (
+    // The same `container` as every other page, so settings content lines up
+    // with them.
+    <div className="container mx-auto flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
+      {children}
+    </div>
+  )
+}