@modern-admin/react 0.1.0

package/src/components/global-search-dialog.tsx

@@ -0,0 +1,272 @@
+// Cross-resource command palette. Backed by `useGlobalSearch`, which fans
+// the query out to every registered resource's `search` action server-side.
+// Results are grouped by resource; selecting an entry navigates to the
+// record's show page and closes the palette.
+//
+// Designed as a controlled component — the parent (typically the header)
+// holds the `open` state so it can pair the trigger button with the
+// `mod+k` hotkey.
+
+import * as React from 'react'
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  DialogDescription,
+  DialogTitle,
+} from '@modern-admin/ui'
+import { ArrowRight, Clock, Loader2, X } from 'lucide-react'
+import { useGlobalSearch } from '../hooks.js'
+import { useI18n } from '../i18n.js'
+import { useNavigate } from '../router.js'
+
+const DEBOUNCE_MS = 300
+const RECENT_STORAGE_KEY = 'modern-admin:global-search:recent:v1'
+const RECENT_MAX = 6
+
+export interface GlobalSearchDialogProps {
+  open: boolean
+
+  onOpenChange(open: boolean): void
+}
+
+const readRecent = (): string[] => {
+  if (typeof window === 'undefined') return []
+  try {
+    const raw = window.localStorage.getItem(RECENT_STORAGE_KEY)
+    if (!raw) return []
+    const parsed = JSON.parse(raw) as unknown
+    if (!Array.isArray(parsed)) return []
+    return parsed.filter((v): v is string => typeof v === 'string').slice(0, RECENT_MAX)
+  } catch {
+    return []
+  }
+}
+
+const writeRecent = (entries: string[]): void => {
+  if (typeof window === 'undefined') return
+  try {
+    window.localStorage.setItem(RECENT_STORAGE_KEY, JSON.stringify(entries.slice(0, RECENT_MAX)))
+  } catch {
+    /* quota exceeded — recent list is best-effort */
+  }
+}
+
+/**
+ * Highlight every case-insensitive occurrence of `needle` in `text` with
+ * `<mark>`. Returns an array of React nodes ready to render inside any
+ * inline container. Empty `needle` falls back to the raw string.
+ */
+const highlightMatch = (text: string, needle: string): React.ReactNode => {
+  if (!needle) return text
+  const lower = text.toLowerCase()
+  const target = needle.toLowerCase()
+  const nodes: React.ReactNode[] = []
+  let cursor = 0
+  let key = 0
+  while (cursor < text.length) {
+    const idx = lower.indexOf(target, cursor)
+    if (idx === -1) {
+      nodes.push(text.slice(cursor))
+      break
+    }
+    if (idx > cursor) nodes.push(text.slice(cursor, idx))
+    nodes.push(
+      <mark
+        key={key++}
+        className="rounded-sm bg-primary/20 px-0.5 text-foreground"
+      >
+        {text.slice(idx, idx + target.length)}
+      </mark>,
+    )
+    cursor = idx + target.length
+  }
+  return nodes
+}
+
+export function GlobalSearchDialog({
+  open,
+  onOpenChange,
+}: GlobalSearchDialogProps): React.ReactElement {
+  const { t } = useI18n()
+  const navigate = useNavigate()
+  const [query, setQuery] = React.useState('')
+  const [debounced, setDebounced] = React.useState('')
+  const [recent, setRecent] = React.useState<string[]>(() => readRecent())
+
+  // Reset query each time the dialog opens so it starts empty, and rehydrate
+  // the recent list (other tabs may have appended entries while we were idle).
+  React.useEffect(() => {
+    if (open) {
+      setQuery('')
+      setDebounced('')
+      setRecent(readRecent())
+    }
+  }, [open])
+
+  React.useEffect(() => {
+    const timer = window.setTimeout(() => setDebounced(query.trim()), DEBOUNCE_MS)
+    return () => window.clearTimeout(timer)
+  }, [query])
+
+  const { data, isFetching } = useGlobalSearch(debounced, open)
+
+  // Capture the most recent successful query so it's available for the
+  // "recent" list. We only persist on user-driven navigation (not every
+  // keystroke) to keep the list signal-to-noise high.
+  const persistRecent = React.useCallback((value: string): void => {
+    if (!value) return
+    setRecent((prev) => {
+      const next = [value, ...prev.filter((q) => q !== value)].slice(0, RECENT_MAX)
+      writeRecent(next)
+      return next
+    })
+  }, [])
+
+  const groups = data?.groups ?? []
+  const hasQuery = debounced.length > 0
+  const showEmpty = hasQuery && !isFetching && groups.length === 0
+
+  const handleSelect = React.useCallback(
+    (resourceId: string, recordId: string): void => {
+      persistRecent(debounced)
+      onOpenChange(false)
+      navigate({ name: 'show', resourceId, recordId })
+    },
+    [debounced, navigate, onOpenChange, persistRecent],
+  )
+
+  const handleShowAll = React.useCallback(
+    (resourceId: string): void => {
+      persistRecent(debounced)
+      onOpenChange(false)
+      navigate({ name: 'list', resourceId })
+    },
+    [debounced, navigate, onOpenChange, persistRecent],
+  )
+
+  const handlePickRecent = React.useCallback((value: string): void => {
+    setQuery(value)
+    setDebounced(value)
+  }, [])
+
+  const handleClearRecent = React.useCallback((): void => {
+    setRecent([])
+    writeRecent([])
+  }, [])
+
+  return (
+    <CommandDialog open={open} onOpenChange={onOpenChange}>
+      {/* Visually-hidden title + description keep Radix Dialog accessibility
+          warnings quiet and provide a label for screen readers. */}
+      <DialogTitle className="sr-only">{t('globalSearch:title')}</DialogTitle>
+      <DialogDescription className="sr-only">
+        {t('globalSearch:description')}
+      </DialogDescription>
+      <CommandInput
+        placeholder={t('globalSearch:placeholder')}
+        value={query}
+        onValueChange={setQuery}
+      />
+      {/* cmdk dedupes by item value — prefix each value with `resourceId:recordId`
+          so identical record ids across resources keep distinct entries.
+          shouldFilter is left on (default) so cmdk re-orders by relevance against
+          the typed query — server already narrowed the set down. */}
+      <CommandList>
+        {!hasQuery && recent.length === 0 && (
+          <div className="py-6 text-center text-sm text-muted-foreground">
+            {t('globalSearch:hint')}
+          </div>
+        )}
+        {!hasQuery && recent.length > 0 && (
+          <CommandGroup
+            heading={
+              <span className="flex items-center justify-between gap-2">
+                <span>{t('globalSearch:recent')}</span>
+                <button
+                  type="button"
+                  className="text-xs text-muted-foreground hover:text-foreground"
+                  onClick={handleClearRecent}
+                >
+                  <X className="mr-1 inline size-3" aria-hidden="true" />
+                  {t('globalSearch:clearRecent')}
+                </button>
+              </span>
+            }
+          >
+            {recent.map((entry) => (
+              <CommandItem
+                key={`recent:${entry}`}
+                value={`recent:${entry}`}
+                onSelect={() => handlePickRecent(entry)}
+              >
+                <Clock className="mr-2 size-4 text-muted-foreground" aria-hidden="true" />
+                <span className="flex-1 truncate">{entry}</span>
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        )}
+        {showEmpty && <CommandEmpty>{t('globalSearch:noResults')}</CommandEmpty>}
+        {hasQuery && isFetching && groups.length === 0 && (
+          <div
+            className="flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground"
+            role="status"
+            aria-live="polite"
+          >
+            <Loader2 className="size-4 animate-spin" aria-hidden="true"/>
+            <span>{t('common:loading')}</span>
+          </div>
+        )}
+        {groups.map((group, idx) => (
+          <React.Fragment key={group.resourceId}>
+            {idx > 0 && <CommandSeparator/>}
+            <CommandGroup heading={group.resourceName}>
+              {group.records.map((hit) => (
+                <CommandItem
+                  key={`${hit.resourceId}:${hit.recordId}`}
+                  value={`${hit.resourceId}:${hit.recordId} ${hit.title} ${hit.snippet ?? ''}`}
+                  onSelect={() => handleSelect(hit.resourceId, hit.recordId)}
+                  className="flex-col items-start gap-0.5"
+                >
+                  <div className="flex w-full items-baseline gap-2">
+                    <span className="flex-1 truncate font-medium">
+                      {highlightMatch(hit.title, debounced)}
+                    </span>
+                    {hit.matchedField && (
+                      <span className="shrink-0 text-xs text-muted-foreground">
+                        {t('globalSearch:matchedIn').replace('{field}', hit.matchedField)}
+                      </span>
+                    )}
+                  </div>
+                  {hit.snippet && (
+                    <div className="line-clamp-1 text-xs text-muted-foreground">
+                      {highlightMatch(hit.snippet, debounced)}
+                    </div>
+                  )}
+                </CommandItem>
+              ))}
+              {/* `forceMount` keeps this row visible regardless of the current
+                  query — cmdk's default fuzzy filter would otherwise drop it
+                  because the value `${id}:show-all` rarely contains the typed
+                  needle. */}
+              <CommandItem
+                key={`${group.resourceId}:show-all`}
+                value={`${group.resourceId}:show-all`}
+                forceMount
+                onSelect={() => handleShowAll(group.resourceId)}
+                className="text-xs text-muted-foreground"
+              >
+                <ArrowRight className="mr-2 size-3.5" aria-hidden="true" />
+                {t('globalSearch:showAllIn').replace('{resource}', group.resourceName)}
+              </CommandItem>
+            </CommandGroup>
+          </React.Fragment>
+        ))}
+      </CommandList>
+    </CommandDialog>
+  )
+}

package/src/components/group-settings-dialog.tsx

@@ -0,0 +1,93 @@
+// Create / edit dialog for a dashboard chart group. Lives in the react
+// package because it is i18n-aware; the actual primitives come from
+// @modern-admin/ui.
+
+import * as React from 'react'
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  InfoTooltip,
+  Input,
+  Label,
+} from '@modern-admin/ui'
+import type { ChartGroup } from '@modern-admin/core'
+import { useI18n } from '../i18n.js'
+
+export interface GroupSettingsDialogProps {
+  /** When set, the dialog is in edit mode and pre-populates from this group. */
+  initial?: ChartGroup
+  onSave(input: { name: string; order: number }): void
+  onClose(): void
+}
+
+export function GroupSettingsDialog({
+  initial,
+  onSave,
+  onClose,
+}: GroupSettingsDialogProps): React.ReactElement {
+  const { t } = useI18n()
+  const [name, setName] = React.useState(initial?.name ?? '')
+  const [order, setOrder] = React.useState<number>(initial?.order ?? 0)
+  const [error, setError] = React.useState<string>('')
+
+  const handleSave = (): void => {
+    const trimmed = name.trim()
+    if (!trimmed) {
+      setError(t('chart:groupNameRequired'))
+      return
+    }
+    setError('')
+    onSave({ name: trimmed, order: Number.isFinite(order) ? Math.trunc(order) : 0 })
+  }
+
+  return (
+    <Dialog open onOpenChange={(open) => { if (!open) onClose() }}>
+      <DialogContent className="w-full max-w-md">
+        <DialogHeader>
+          <DialogTitle>
+            {initial ? t('chart:editGroup') : t('chart:newGroup')}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4 py-1">
+          <div className="space-y-1.5">
+            <Label htmlFor="group-name">{t('chart:groupName')}</Label>
+            <Input
+              id="group-name"
+              placeholder={t('chart:groupNamePlaceholder')}
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              autoFocus
+            />
+            {error && <p className="text-xs text-destructive">{error}</p>}
+          </div>
+
+          <div className="space-y-1.5">
+            <div className="flex items-center gap-1.5">
+              <Label htmlFor="group-order">{t('chart:groupOrder')}</Label>
+              <InfoTooltip content={t('chart:orderHint')} />
+            </div>
+            <Input
+              id="group-order"
+              type="number"
+              step={1}
+              value={order}
+              onChange={(e) =>
+                setOrder(Number.isFinite(Number(e.target.value)) ? Math.trunc(Number(e.target.value)) : 0)
+              }
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>{t('common:cancel')}</Button>
+          <Button onClick={handleSave}>{t('chart:saveGroup')}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/move-chart-dialog.tsx

@@ -0,0 +1,130 @@
+// Dialog for moving a chart to a different group and adjusting its order.
+// Opened from the chart widget's "…" dropdown menu.
+
+import * as React from 'react'
+import { FolderPlus } from 'lucide-react'
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  InfoTooltip,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@modern-admin/ui'
+import type { ChartGroup } from '@modern-admin/core'
+import { useI18n } from '../i18n.js'
+
+export interface MoveChartDialogProps {
+  groups: ChartGroup[]
+  /** Current group id of the chart being moved. */
+  initialGroupId?: string
+  /** Current order value of the chart being moved. */
+  initialOrder?: number
+  onSave(input: { groupId: string; order: number }): void
+  onClose(): void
+  /** Called when the user wants to create a group first (no groups exist). */
+  onCreateGroup(): void
+}
+
+export function MoveChartDialog({
+  groups,
+  initialGroupId,
+  initialOrder,
+  onSave,
+  onClose,
+  onCreateGroup,
+}: MoveChartDialogProps): React.ReactElement {
+  const { t } = useI18n()
+
+  const sorted = React.useMemo(
+    () => [...groups].sort((a, b) => a.order - b.order),
+    [groups],
+  )
+
+  // Seed from the chart's current group, or the first group if unset.
+  const defaultGroupId = initialGroupId ?? sorted[0]?.id ?? ''
+  const [groupId, setGroupId] = React.useState(defaultGroupId)
+  const [order, setOrder] = React.useState<number>(initialOrder ?? 0)
+
+  const handleSave = (): void => {
+    if (!groupId) return
+    onSave({ groupId, order: Number.isFinite(order) ? Math.trunc(order) : 0 })
+  }
+
+  return (
+    <Dialog open onOpenChange={(open) => { if (!open) onClose() }}>
+      <DialogContent className="w-full max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t('chart:moveChart')}</DialogTitle>
+        </DialogHeader>
+
+        {sorted.length === 0 ? (
+          // No groups yet — prompt to create one.
+          <div className="space-y-3 py-2">
+            <p className="text-sm font-medium">{t('chart:moveNoGroups')}</p>
+            <p className="text-sm text-muted-foreground">{t('chart:moveNoGroupsHint')}</p>
+            <Button
+              variant="outline"
+              className="w-full"
+              onClick={() => { onClose(); onCreateGroup() }}
+            >
+              <FolderPlus className="size-4 mr-2" />
+              {t('chart:addGroup')}
+            </Button>
+          </div>
+        ) : (
+          <div className="space-y-4 py-1">
+            <div className="space-y-1.5">
+              <Label htmlFor="move-group">{t('chart:moveGroup')}</Label>
+              <Select value={groupId} onValueChange={setGroupId}>
+                <SelectTrigger id="move-group" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {sorted.map((g) => (
+                    <SelectItem key={g.id} value={g.id}>
+                      {g.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-1.5">
+              <div className="flex items-center gap-1.5">
+                <Label htmlFor="move-order">{t('chart:order')}</Label>
+                <InfoTooltip content={t('chart:orderHint')} />
+              </div>
+              <Input
+                id="move-order"
+                type="number"
+                step={1}
+                value={order}
+                onChange={(e) =>
+                  setOrder(Number.isFinite(Number(e.target.value)) ? Math.trunc(Number(e.target.value)) : 0)
+                }
+              />
+            </div>
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>{t('common:cancel')}</Button>
+          {sorted.length > 0 && (
+            <Button onClick={handleSave} disabled={!groupId}>
+              {t('chart:moveToGroup')}
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/reference-multi-table-dialog.tsx

@@ -0,0 +1,196 @@
+// Picker dialog for many-to-many relation fields. Opens a modal containing
+// the embedded ResourceListPage of the referenced resource in "picker" mode
+// (controlled row selection, no row navigation, no toolbar create/export).
+// The dialog inherits the full list UX — sorting, filtering, header
+// filters, column visibility, pagination — so users can find records the
+// same way they would on the main list page.
+//
+// Selection inside the dialog is staged locally and only committed to the
+// outer form on Save, so the user can cancel without polluting the value.
+//
+// Used as an alternative to ReferenceMultiCombobox for m2m and
+// reference-array fields. Renders existing selections as removable chips
+// above the trigger button — same chip pattern as ReferenceMultiCombobox.
+
+import * as React from 'react'
+import {
+  Badge,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  cn,
+} from '@modern-admin/ui'
+import { Plus, X } from 'lucide-react'
+import { useQueries } from '@tanstack/react-query'
+import { useAdminClient } from '../provider.js'
+import { useI18n } from '../i18n.js'
+import { useResource } from '../hooks.js'
+import { ResourceListPage } from '../pages/list-page.js'
+import type { ListQueryState } from '../router.js'
+
+export interface ReferenceMultiTableDialogProps {
+  referenceResourceId: string
+  value: ReadonlyArray<string | number> | null | undefined
+  onChange(next: Array<string | number>): void
+  disabled?: boolean
+  /** Label for the trigger button. Defaults to "Pick records". */
+  triggerLabel?: string
+  className?: string
+}
+
+export function ReferenceMultiTableDialog({
+  referenceResourceId,
+  value,
+  onChange,
+  disabled,
+  triggerLabel,
+  className,
+}: ReferenceMultiTableDialogProps): React.ReactElement {
+  const { t } = useI18n()
+  const client = useAdminClient()
+  const resource = useResource(referenceResourceId)
+
+  const committedIds = React.useMemo(
+    () => (value ?? []).map(String),
+    [value],
+  )
+
+  const [open, setOpen] = React.useState(false)
+  // Staged selection inside the dialog. Reset to committed value each time
+  // the dialog opens so a previous Cancel doesn't leak state.
+  const [stagedIds, setStagedIds] = React.useState<string[]>(() => committedIds)
+  React.useEffect(() => {
+    if (open) setStagedIds(committedIds)
+  }, [open, committedIds])
+
+  // Embedded list page keeps its own page/sort/filter state. Reset to
+  // page 1 each open so each pick session starts fresh.
+  const [query, setQuery] = React.useState<ListQueryState>({ perPage: 10 })
+  React.useEffect(() => {
+    if (open) setQuery({ perPage: 10 })
+  }, [open])
+
+  // Resolve chip labels by fetching each currently-committed record. Sharing
+  // the query key with ReferenceLink keeps the cache warm — already-visible
+  // chips render instantly.
+  const titleQueries = useQueries({
+    queries: committedIds.map((id) => ({
+      queryKey: ['modern-admin', referenceResourceId, 'show', id],
+      queryFn: () => client.show(referenceResourceId, id),
+      staleTime: 30_000,
+    })),
+  })
+  const chips = React.useMemo(
+    () =>
+      committedIds.map((id, i) => {
+        const title = titleQueries[i]?.data?.record?.title
+        return { id, label: title ? `${title} <${id}>` : `#${id}` }
+      }),
+    [committedIds, titleQueries],
+  )
+
+  const remove = (id: string): void => {
+    onChange(committedIds.filter((x) => x !== id))
+  }
+
+  const handleSave = (): void => {
+    onChange(stagedIds)
+    setOpen(false)
+  }
+
+  const handleCancel = (): void => {
+    setOpen(false)
+  }
+
+  const resolvedTriggerLabel =
+    triggerLabel ??
+    (committedIds.length > 0
+      ? t('common:managePickRecords', { count: committedIds.length })
+      : t('common:pickRecords'))
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      {chips.length > 0 && (
+        <div className="flex flex-wrap gap-1">
+          {chips.map((c) => (
+            <Badge key={c.id} variant="secondary" className="gap-1 pr-1">
+              <span className="truncate" title={c.label}>{c.label}</span>
+              <button
+                type="button"
+                aria-label={t('common:removeItem', { title: c.label })}
+                disabled={disabled}
+                onClick={() => remove(c.id)}
+                className="rounded-sm opacity-60 hover:opacity-100"
+              >
+                <X className="size-3" />
+              </button>
+            </Badge>
+          ))}
+        </div>
+      )}
+      <Button
+        type="button"
+        variant="outline"
+        disabled={disabled}
+        onClick={() => setOpen(true)}
+        className="w-full justify-start font-normal"
+      >
+        <Plus className="size-4" />
+        <span className="truncate">{resolvedTriggerLabel}</span>
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent
+          // Wide layout so the embedded table has room. Cap height and let
+          // the body scroll independently of the footer.
+          className="flex max-h-[90vh] w-[95vw] max-w-5xl flex-col gap-0 p-0"
+        >
+          <DialogHeader className="border-b border-border px-6 py-4">
+            <DialogTitle>
+              {t('common:pickRecordsFrom', { name: resource?.name ?? referenceResourceId })}
+            </DialogTitle>
+          </DialogHeader>
+          {/* The list page is in embedded mode (`card: false`) so it
+              manages its own internal scroll: the table area scrolls,
+              the paginator sits below as a flush full-width bar.  The
+              body wrapper itself does NOT scroll, and `overflow-hidden`
+              guarantees its children cannot bleed visually past the
+              flex-1 box (and onto the DialogFooter below). */}
+          <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+            <ResourceListPage
+              resourceId={referenceResourceId}
+              query={query}
+              onQueryChange={setQuery}
+              selectedIds={stagedIds}
+              onSelectionChange={setStagedIds}
+              disableRowNavigation
+              features={{
+                breadcrumbs: false,
+                title: false,
+                create: false,
+                export: false,
+                bulk: false,
+                actions: false,
+                card: false,
+              }}
+            />
+          </div>
+          <DialogFooter className="gap-2 border-t border-border px-6 py-4">
+            <div className="mr-auto text-sm text-muted-foreground self-center">
+              {t('common:selectedCount', { count: stagedIds.length })}
+            </div>
+            <Button variant="outline" type="button" onClick={handleCancel}>
+              {t('common:cancel')}
+            </Button>
+            <Button type="button" onClick={handleSave}>
+              {t('common:save')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}