@modern-admin/react 0.1.0

package/src/dashboard/time-series.ts

@@ -0,0 +1,125 @@
+// Time-series UI helpers — bucket fill, tick formatting, label formatting.
+// All zero-fill happens here on the client side (req: "Заполнение нулями
+// должно быть только в ui, вне зависимости от адаптеров"). Adapters return
+// only buckets that have data; the UI fabricates the rest at value 0 so
+// charts don't have visual gaps.
+
+import type {
+  TimeSeriesPoint,
+  TimeSeriesSeries,
+  TimeSeriesStep,
+} from '../client.js'
+
+/** Generate a continuous sequence of `YYYY-MM-DD` bucket keys spanning [from, to]. */
+export function generateBuckets(
+  fromIso: string,
+  toIso: string,
+  step: TimeSeriesStep,
+): string[] {
+  if (step === 'all') return [fromIso.slice(0, 10)]
+  const out: string[] = []
+  const cur = startOf(new Date(fromIso), step)
+  const end = startOf(new Date(toIso), step)
+  while (cur.getTime() <= end.getTime()) {
+    out.push(ymd(cur))
+    advance(cur, step)
+  }
+  return out
+}
+
+/**
+ * Zero-fill every series so each one has a value for every bucket in the
+ * resolved date range. Missing buckets become `value: 0` rather than gaps,
+ * which Recharts renders as flat segments instead of breaks.
+ */
+export function fillTimeSeries(
+  series: TimeSeriesSeries[],
+  fromIso: string,
+  toIso: string,
+  step: TimeSeriesStep,
+): TimeSeriesSeries[] {
+  const buckets = generateBuckets(fromIso, toIso, step)
+  return series.map((s) => {
+    const map = new Map(s.points.map((p) => [p.date, p.value]))
+    const points: TimeSeriesPoint[] = buckets.map((date) => ({
+      date,
+      value: map.get(date) ?? 0,
+    }))
+    return { key: s.key, points }
+  })
+}
+
+/**
+ * X-axis tick formatter — short label format depending on bucket size.
+ * day/week → DD.MM, month → MM.YYYY, year → YYYY.
+ */
+export function makeTickFormatter(
+  step: TimeSeriesStep,
+  locale = 'en-US',
+): (iso: string) => string {
+  const dayMonth = new Intl.DateTimeFormat(locale, { day: '2-digit', month: '2-digit' })
+  const monthYear = new Intl.DateTimeFormat(locale, { month: '2-digit', year: 'numeric' })
+  const year = new Intl.DateTimeFormat(locale, { year: 'numeric' })
+  return (iso: string): string => {
+    const d = new Date(iso)
+    if (step === 'year') return year.format(d)
+    if (step === 'month') return monthYear.format(d)
+    return dayMonth.format(d)
+  }
+}
+
+/**
+ * Tooltip label formatter — long, human-friendly form. For week buckets
+ * we render `Mon DD – Sun DD` (the bucket plus 6 days).
+ */
+export function makeLabelFormatter(
+  step: TimeSeriesStep,
+  locale = 'en-US',
+): (iso: string) => string {
+  const fullDay = new Intl.DateTimeFormat(locale, {
+    day: '2-digit',
+    month: 'long',
+    year: 'numeric',
+  })
+  const monthYear = new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' })
+  const year = new Intl.DateTimeFormat(locale, { year: 'numeric' })
+  const shortDay = new Intl.DateTimeFormat(locale, { day: '2-digit', month: 'short' })
+  return (iso: string): string => {
+    const d = new Date(iso)
+    if (step === 'year') return year.format(d)
+    if (step === 'month') return monthYear.format(d)
+    if (step === 'week') {
+      const end = new Date(d)
+      end.setDate(end.getDate() + 6)
+      return `${shortDay.format(d)} – ${shortDay.format(end)}`
+    }
+    return fullDay.format(d)
+  }
+}
+
+// ─── Internals ────────────────────────────────────────────────────────────
+
+function ymd(d: Date): string {
+  return d.toISOString().slice(0, 10)
+}
+
+function startOf(d: Date, step: TimeSeriesStep): Date {
+  const out = new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()))
+  if (step === 'week') {
+    // Monday-anchored week.
+    const dow = (out.getUTCDay() + 6) % 7
+    out.setUTCDate(out.getUTCDate() - dow)
+  } else if (step === 'month') {
+    out.setUTCDate(1)
+  } else if (step === 'year') {
+    out.setUTCMonth(0, 1)
+  }
+  return out
+}
+
+function advance(d: Date, step: TimeSeriesStep): void {
+  if (step === 'day') d.setUTCDate(d.getUTCDate() + 1)
+  else if (step === 'week') d.setUTCDate(d.getUTCDate() + 7)
+  else if (step === 'month') d.setUTCMonth(d.getUTCMonth() + 1)
+  else if (step === 'year') d.setUTCFullYear(d.getUTCFullYear() + 1)
+}

package/src/dialogs.tsx

@@ -0,0 +1,265 @@
+// Imperative modal dialogs.
+//
+// `<DialogsProvider>` owns a small stack of active dialogs and renders them
+// through shadcn's purpose-built primitives: `<AlertDialog>` for confirm/alert
+// (focus trap + Esc-to-cancel + accessible role), and `<Dialog>` for arbitrary
+// content opened via `open()`. `useDialogs()` exposes a promise-flavoured API
+// (`confirm`, `alert`, `open`) so callers can `await` user choices instead of
+// weaving open/close state through their components. All built-in dialogs go
+// through `useI18n()` for labels — captions stay localized without callers
+// writing translations on the call site.
+//
+// Custom dialogs use `open({ render })`, where `render` receives a `close`
+// callback. The promise resolves with whatever value the caller passes to
+// `close`, defaulting to `undefined` when the user dismisses the dialog
+// (Esc / overlay click).
+
+import * as React from 'react'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  Dialog,
+  DialogContent,
+} from '@modern-admin/ui'
+import { useI18n } from './i18n.js'
+
+export interface ConfirmOptions {
+  title?: string
+  description?: string
+  confirmLabel?: string
+  cancelLabel?: string
+  /** Style the confirm button as destructive (red). Useful for delete dialogs. */
+  destructive?: boolean
+}
+
+export interface AlertOptions {
+  title?: string
+  description?: string
+  okLabel?: string
+}
+
+export interface OpenOptions<T> {
+  render: (api: { close: (value?: T) => void }) => React.ReactNode
+  /** Optional max-width override; defaults to `sm:max-w-lg`. */
+  className?: string
+  /** Disable closing on overlay click + Esc. */
+  modal?: boolean
+}
+
+export interface DialogsApi {
+  confirm(opts?: ConfirmOptions): Promise<boolean>
+  alert(opts?: AlertOptions): Promise<void>
+  open<T = unknown>(opts: OpenOptions<T>): Promise<T | undefined>
+}
+
+interface BaseEntry {
+  id: number
+  open: boolean
+  resolve(value: unknown): void
+}
+
+interface ConfirmEntry extends BaseEntry {
+  kind: 'confirm'
+  opts: ConfirmOptions
+}
+
+interface AlertEntry extends BaseEntry {
+  kind: 'alert'
+  opts: AlertOptions
+}
+
+interface CustomEntry extends BaseEntry {
+  kind: 'custom'
+  className?: string
+  modal?: boolean
+  render(api: { close: (value?: unknown) => void }): React.ReactNode
+}
+
+type DialogEntry = ConfirmEntry | AlertEntry | CustomEntry
+
+const DialogsContext = React.createContext<DialogsApi | null>(null)
+
+let nextId = 1
+
+export interface DialogsProviderProps {
+  children: React.ReactNode
+}
+
+export function DialogsProvider({ children }: DialogsProviderProps): React.ReactElement {
+  const [entries, setEntries] = React.useState<DialogEntry[]>([])
+  const { t } = useI18n()
+
+  const removeEntry = React.useCallback((id: number) => {
+    setEntries((prev) => prev.filter((e) => e.id !== id))
+  }, [])
+
+  const closeEntry = React.useCallback(
+    (id: number, value: unknown) => {
+      setEntries((prev) => {
+        const target = prev.find((e) => e.id === id)
+        if (target) target.resolve(value)
+        // Mark closed so Radix can play the leave animation, then remove.
+        return prev.map((e) => (e.id === id ? { ...e, open: false } : e))
+      })
+      // Cleanup after the close animation ~200ms.
+      window.setTimeout(() => removeEntry(id), 250)
+    },
+    [removeEntry],
+  )
+
+  const api = React.useMemo<DialogsApi>(() => {
+    const push = <T,>(
+      build: (id: number, resolve: (value: T | undefined) => void) => DialogEntry,
+    ): Promise<T | undefined> =>
+        new Promise<T | undefined>((resolve) => {
+          const id = nextId++
+          const entry = build(id, resolve)
+          setEntries((prev) => [...prev, entry])
+        })
+
+    return {
+      confirm: (opts = {}) =>
+        push<boolean>((id, resolve) => ({
+          kind: 'confirm',
+          id,
+          open: true,
+          opts,
+          resolve: (value) => resolve(value as boolean | undefined),
+        })).then((v) => v === true),
+      alert: (opts = {}) =>
+        push<void>((id, resolve) => ({
+          kind: 'alert',
+          id,
+          open: true,
+          opts,
+          resolve: () => resolve(undefined),
+        })).then(() => undefined),
+      open: <T,>(opts: OpenOptions<T>) =>
+        push<T>((id, resolve) => ({
+          kind: 'custom',
+          id,
+          open: true,
+          className: opts.className,
+          modal: opts.modal,
+          render: ({ close }) => opts.render({ close: (value?: T) => close(value as unknown) }),
+          resolve: (value) => resolve(value as T | undefined),
+        })),
+    }
+  }, [])
+
+  return (
+    <DialogsContext.Provider value={api}>
+      {children}
+      {entries.map((entry) => {
+        if (entry.kind === 'confirm') {
+          const title = entry.opts.title ?? t('common:confirmDelete')
+          const confirmLabel =
+            entry.opts.confirmLabel ?? t(entry.opts.destructive ? 'common:delete' : 'common:save')
+          const cancelLabel = entry.opts.cancelLabel ?? t('common:cancel')
+          return (
+            <AlertDialog
+              key={entry.id}
+              open={entry.open}
+              onOpenChange={(next) => {
+                if (!next) closeEntry(entry.id, false)
+              }}
+            >
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>{title}</AlertDialogTitle>
+                  {entry.opts.description && (
+                    <AlertDialogDescription>{entry.opts.description}</AlertDialogDescription>
+                  )}
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel onClick={() => closeEntry(entry.id, false)}>
+                    {cancelLabel}
+                  </AlertDialogCancel>
+                  <AlertDialogAction
+                    variant={entry.opts.destructive ? 'destructive' : 'default'}
+                    onClick={() => closeEntry(entry.id, true)}
+                  >
+                    {confirmLabel}
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          )
+        }
+        if (entry.kind === 'alert') {
+          return (
+            <AlertDialog
+              key={entry.id}
+              open={entry.open}
+              onOpenChange={(next) => {
+                if (!next) closeEntry(entry.id, undefined)
+              }}
+            >
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>{entry.opts.title ?? ''}</AlertDialogTitle>
+                  {entry.opts.description && (
+                    <AlertDialogDescription>{entry.opts.description}</AlertDialogDescription>
+                  )}
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogAction onClick={() => closeEntry(entry.id, undefined)}>
+                    {entry.opts.okLabel ?? t('common:ok')}
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          )
+        }
+        // custom
+        return (
+          <Dialog
+            key={entry.id}
+            open={entry.open}
+            onOpenChange={(next) => {
+              if (!next) closeEntry(entry.id, undefined)
+            }}
+          >
+            <DialogContent
+              className={entry.className}
+              onInteractOutside={(e) => {
+                if (entry.modal) e.preventDefault()
+              }}
+              onEscapeKeyDown={(e) => {
+                if (entry.modal) e.preventDefault()
+              }}
+            >
+              {entry.render({ close: (value) => closeEntry(entry.id, value) })}
+            </DialogContent>
+          </Dialog>
+        )
+      })}
+    </DialogsContext.Provider>
+  )
+}
+
+/** Imperative dialog API. Falls back to a no-op when no provider is mounted. */
+export function useDialogs(): DialogsApi {
+  const ctx = React.useContext(DialogsContext)
+  if (ctx) return ctx
+  // No provider — fall back to native confirm/alert so basic flows still work
+  // when a host app forgets to mount <DialogsProvider>.
+  return {
+    confirm: async (opts) =>
+      typeof window === 'undefined'
+        ? false
+        : window.confirm([opts?.title, opts?.description].filter(Boolean).join('\n\n') || ''),
+    alert: async (opts) => {
+      if (typeof window !== 'undefined') {
+        window.alert([opts?.title, opts?.description].filter(Boolean).join('\n\n') || '')
+      }
+    },
+    open: async () => undefined,
+  }
+}

package/src/export.ts

@@ -0,0 +1,140 @@
+// Client-side export helpers.
+//
+// Pulls every record matching the current list query by paginating with a
+// large pageSize, then serializes to CSV or JSON and triggers a browser
+// download. Pure functions live here so they're trivially unit-testable;
+// the dialog UI in pages/export-dialog.tsx wires them together.
+
+import type { AdminClient } from './client.js'
+import type { ListQuery, PropertyJSON, RecordJSON } from './types.js'
+
+export type ExportFormat = 'csv' | 'json'
+
+export interface FetchAllOptions {
+  /** Page size used for each list request. */
+  batchSize?: number
+  /** Optional progress callback: `(loaded, total)`. */
+  onProgress?(loaded: number, total: number): void
+  /** AbortSignal — drop pagination loop on cancel. */
+  signal?: AbortSignal
+}
+
+/**
+ * Page through `client.list()` until exhausted, returning every record that
+ * matches the same filters/sorting as the current list view. `query.page`
+ * and `query.perPage` are overwritten — pass the user's filters/sorting only.
+ */
+export async function fetchAllRecords(
+  client: AdminClient,
+  resourceId: string,
+  query: ListQuery | undefined,
+  opts: FetchAllOptions = {},
+): Promise<RecordJSON[]> {
+  // Backend caps `perPage` at 200 (see listQueryZ in @modern-admin/nest).
+  const batchSize = opts.batchSize ?? 200
+  const baseQuery: ListQuery = { ...(query ?? {}), perPage: batchSize, page: 1 }
+  const all: RecordJSON[] = []
+  let total = 0
+  for (let page = 1; ; page++) {
+    if (opts.signal?.aborted) throw new DOMException('Aborted', 'AbortError')
+    const res = await client.list(resourceId, { ...baseQuery, page })
+    total = res.meta.total
+    all.push(...res.records)
+    opts.onProgress?.(all.length, total)
+    if (res.records.length < batchSize) break
+    if (all.length >= total) break
+  }
+  return all
+}
+
+/** Escape a single CSV field per RFC 4180 (wrap in quotes when needed). */
+export function csvEscape(value: unknown): string {
+  if (value == null) return ''
+  let str: string
+  if (typeof value === 'string') str = value
+  else if (typeof value === 'number' || typeof value === 'boolean') str = String(value)
+  else if (value instanceof Date) str = value.toISOString()
+  else str = JSON.stringify(value)
+  // Quote if it contains comma, quote, CR or LF.
+  if (/[",\r\n]/.test(str)) {
+    return `"${str.replace(/"/g, '""')}"`
+  }
+  return str
+}
+
+export interface SerializeOptions {
+  /** Properties to export in this order. Defaults to union of keys in `records`. */
+  properties?: PropertyJSON[]
+  /** When provided, the active list query is embedded as a comment at the top
+   *  of the exported file so the export is self-documenting:
+   *  – CSV: `# Query: {...}` line before the header row
+   *  – JSON: `// Query: {...}` line before the JSON array  */
+  query?: ListQuery
+}
+
+/** Build a CSV document for the given records. UTF-8 BOM for Excel friendliness. */
+export function recordsToCsv(records: RecordJSON[], opts: SerializeOptions = {}): string {
+  const columns = opts.properties
+    ? opts.properties.map((p) => ({ path: p.path, label: p.label }))
+    : columnsFromRecords(records)
+  const header = columns.map((c) => csvEscape(c.label)).join(',')
+  const lines = records.map((r) =>
+    columns.map((c) => csvEscape(r.params[c.path])).join(','),
+  )
+  const queryComment = opts.query
+    ? `# Query: ${JSON.stringify(opts.query)}\r\n`
+    : ''
+  return `\uFEFF${queryComment}${[header, ...lines].join('\r\n')}`
+}
+
+/** Build a pretty-printed JSON document for the given records.
+ *  When `opts.query` is set, a `// Query: ...` comment is prepended so the
+ *  export is self-documenting (JSONC — understood by VS Code, TypeScript, etc.) */
+export function recordsToJson(records: RecordJSON[], opts: SerializeOptions = {}): string {
+  const paths = opts.properties?.map((p) => p.path)
+  const items = records.map((r) => {
+    if (!paths) return { id: r.id, ...r.params }
+    const row: Record<string, unknown> = { id: r.id }
+    for (const p of paths) row[p] = r.params[p]
+    return row
+  })
+  const json = JSON.stringify(items, null, 2)
+  return opts.query ? `// Query: ${JSON.stringify(opts.query)}\n${json}` : json
+}
+
+function columnsFromRecords(records: RecordJSON[]): { path: string; label: string }[] {
+  const seen = new Set<string>()
+  const out: { path: string; label: string }[] = []
+  for (const r of records) {
+    for (const k of Object.keys(r.params)) {
+      if (seen.has(k)) continue
+      seen.add(k)
+      out.push({ path: k, label: k })
+    }
+  }
+  return out
+}
+
+/** Trigger a browser download for the given text payload. */
+export function downloadText(filename: string, mime: string, body: string): void {
+  if (typeof window === 'undefined') return
+  const blob = new Blob([body], { type: `${mime};charset=utf-8` })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+  // Revoke after a tick so Safari has time to start the download.
+  window.setTimeout(() => URL.revokeObjectURL(url), 1000)
+}
+
+/** Build a stable filename like `users-20260506-143015.csv`. */
+export function exportFilename(resourceId: string, format: ExportFormat, now: Date = new Date()): string {
+  const pad = (n: number) => String(n).padStart(2, '0')
+  const stamp =
+    `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}` +
+    `-${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`
+  return `${resourceId}-${stamp}.${format}`
+}