@modern-admin/react 0.1.0

package/src/components/related-records-tabs.tsx

@@ -0,0 +1,130 @@
+// Tabs of records that reference the open record through a foreign key.
+// Each tab embeds the full ResourceListPage filtered by a locked
+// `{ [foreignKey]: parentRecordId }` so it gets the same table, filters,
+// bulk actions, pagination, and row-click behaviour as the main list.
+//
+// Designed to live below the property card on the show page.
+
+import * as React from 'react'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@modern-admin/ui'
+import { useResources } from '../hooks.js'
+import { useI18n } from '../i18n.js'
+import { ResourceListPage } from '../pages/list-page.js'
+import { resolveRelatedResources } from '../relations.js'
+import type { ListQueryState } from '../router.js'
+import type { RelatedResource, ResourceJSON } from '../types.js'
+
+interface RelatedRecordsTabProps {
+  parentRecordId: string
+  related: RelatedResource
+  active: boolean
+}
+
+function RelatedRecordsTab({
+  parentRecordId,
+  related,
+  active,
+}: RelatedRecordsTabProps): React.ReactElement | null {
+  // Each tab keeps its own page/sort/filter state. Defaults: page 1, perPage 10
+  // so embedded tables stay compact compared to the main list (default 20).
+  const [query, setQuery] = React.useState<ListQueryState>({ perPage: 10 })
+
+  // Lazy-load tab content: only mount the (heavy) ResourceListPage once the
+  // user actually visits the tab. Subsequent toggles keep state thanks to
+  // Radix's mount-on-activate semantics on TabsContent (we don't force unmount).
+  const [hasBeenActive, setHasBeenActive] = React.useState(active)
+  React.useEffect(() => {
+    if (active) setHasBeenActive(true)
+  }, [active])
+
+  if (!hasBeenActive) return null
+
+  return (
+    <ResourceListPage
+      resourceId={related.resourceId}
+      query={query}
+      onQueryChange={setQuery}
+      lockedFilters={{ [related.foreignKey]: parentRecordId }}
+      features={{
+        breadcrumbs: false,
+        title: false,
+        create: false,
+        export: false,
+        card: false,
+      }}
+    />
+  )
+}
+
+export interface RelatedRecordsTabsProps {
+  resource: ResourceJSON
+  recordId: string
+}
+
+export function RelatedRecordsTabs({
+  resource,
+  recordId,
+}: RelatedRecordsTabsProps): React.ReactElement | null {
+  const { t } = useI18n()
+  const allResources = useResources()
+  const tabs = React.useMemo(
+    () => resolveRelatedResources(resource, allResources),
+    [resource, allResources],
+  )
+  // Hooks must run before any early return — call useState unconditionally.
+  const [active, setActive] = React.useState<string>(
+    () => tabs[0] ? `${tabs[0].resourceId}::${tabs[0].foreignKey}` : '',
+  )
+  React.useEffect(() => {
+    if (tabs.length === 0) return
+    if (tabs.some((r) => `${r.resourceId}::${r.foreignKey}` === active)) return
+    setActive(`${tabs[0]!.resourceId}::${tabs[0]!.foreignKey}`)
+  }, [active, tabs])
+  if (tabs.length === 0) return null
+
+  const labelFor = (r: RelatedResource): string =>
+    r.label ?? allResources.find((x) => x.id === r.resourceId)?.name ?? r.resourceId
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base">{t('common:relatedRecords')}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Tabs value={active} onValueChange={setActive}>
+          <TabsList className="w-full justify-start">
+            {tabs.map((r) => {
+              const key = `${r.resourceId}::${r.foreignKey}`
+              return (
+                <TabsTrigger key={key} value={key}>
+                  {labelFor(r)}
+                </TabsTrigger>
+              )
+            })}
+          </TabsList>
+          {tabs.map((r) => {
+            const key = `${r.resourceId}::${r.foreignKey}`
+            return (
+              <TabsContent key={key} value={key} className="mt-4">
+                <RelatedRecordsTab
+                  parentRecordId={recordId}
+                  related={r}
+                  active={active === key}
+                />
+              </TabsContent>
+            )
+          })}
+        </Tabs>
+      </CardContent>
+    </Card>
+  )
+}

package/src/components/revisions-button.tsx

@@ -0,0 +1,237 @@
+import * as React from 'react'
+import {
+  Button,
+  DiffView,
+  RevisionTimeline,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  Skeleton,
+} from '@modern-admin/ui'
+import { History, RotateCcw } from 'lucide-react'
+import { diffSnapshots } from '@modern-admin/core'
+import { useRecordHistory, useResource, useRevertRevision } from '../hooks.js'
+import { useI18n } from '../i18n.js'
+import { useDialogs } from '../dialogs.js'
+import { useNotify } from '../notify.js'
+import { useUserDirectory, userLabelOf } from '../user-directory.js'
+import type { HistoryDiffEntry, HistoryRevision } from '../client.js'
+
+export interface RevisionsButtonProps {
+  resourceId: string
+  recordId: string
+}
+
+export function RevisionsButton({
+  resourceId,
+  recordId,
+}: RevisionsButtonProps): React.ReactElement {
+  const { t, locale } = useI18n()
+  const resource = useResource(resourceId)
+  const history = useRecordHistory(resourceId, recordId, { limit: 50 })
+  const revert = useRevertRevision(resourceId, recordId)
+  const dialogs = useDialogs()
+  const notify = useNotify()
+  const [open, setOpen] = React.useState(false)
+  const revisions = React.useMemo(
+    () => history.data?.revisions ?? [],
+    [history.data?.revisions],
+  )
+  // Resolve revision authors to human-readable labels (email / name)
+  // instead of showing raw user UUIDs.
+  const userIds = React.useMemo(
+    () => Array.from(new Set(revisions.map((r) => r.userId).filter((v): v is string => !!v))),
+    [revisions],
+  )
+  const users = useUserDirectory(userIds)
+  const labelForUser = React.useCallback(
+    (userId: string | undefined): string | undefined =>
+      userId ? userLabelOf(users.get(userId), userId) : undefined,
+    [users],
+  )
+  const [selectedId, setSelectedId] = React.useState<string | undefined>()
+  const [compareToId, setCompareToId] = React.useState<string>('')
+  const selected = revisions.find((r) => r.id === selectedId) ?? revisions[0]
+  const compareTo = compareToId
+    ? revisions.find((r) => r.id === compareToId)
+    : undefined
+
+  // Build a path → label map from the resource schema so each diff field
+  // can show a human-readable name before its technical path.
+  const labelByPath = React.useMemo<Record<string, string>>(() => {
+    const map: Record<string, string> = {}
+    for (const p of resource?.properties ?? []) map[p.path] = p.label
+    return map
+  }, [resource])
+
+  const withLabels = React.useCallback(
+    (fields: ReturnType<typeof diffSnapshots>) =>
+      fields.map((f) => ({ ...f, label: labelByPath[f.path] })),
+    [labelByPath],
+  )
+
+  const visibleFields = selected
+    ? withLabels(
+      compareTo
+        ? diffSnapshots(compareTo.snapshot, selected.snapshot)
+        : fieldsFor(selected),
+    )
+    : []
+
+  React.useEffect(() => {
+    if (!selectedId && revisions[0]) setSelectedId(revisions[0].id)
+  }, [revisions, selectedId])
+
+  React.useEffect(() => {
+    if (selected?.id && compareToId === selected.id) setCompareToId('')
+  }, [compareToId, selected?.id])
+
+  const formatDate = React.useCallback(
+    (value: string) => new Intl.DateTimeFormat(locale, {
+      dateStyle: 'medium',
+      timeStyle: 'short',
+    }).format(new Date(value)),
+    [locale],
+  )
+
+  const handleRevert = async (revision: HistoryRevision): Promise<void> => {
+    const ok = await dialogs.confirm({
+      title: t('history:confirmRevert'),
+      confirmLabel: t('history:revert'),
+      destructive: true,
+    })
+    if (!ok) return
+    try {
+      await revert.mutateAsync({ revisionId: revision.id })
+      notify.success({ key: 'history:revertSuccess' })
+      setSelectedId(undefined)
+      setCompareToId('')
+      setOpen(false)
+    } catch (err) {
+      notify.error(
+        { key: 'history:revertFailed' },
+        { description: err instanceof Error ? err.message : String(err) },
+      )
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button variant="outline" size="sm" aria-label={t('history:revisions')}>
+          <History className="size-4" />
+          <span className="hidden sm:inline">{t('history:revisions')}</span>
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="right" className="w-full overflow-y-auto sm:max-w-5xl">
+        <SheetHeader>
+          <SheetTitle>{t('history:revisions')}</SheetTitle>
+        </SheetHeader>
+        {history.isLoading ? (
+          <div className="mt-6 space-y-3">
+            <Skeleton className="h-16 w-full" />
+            <Skeleton className="h-64 w-full" />
+          </div>
+        ) : history.isError ? (
+          <div className="mt-6 rounded-md border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive">
+            {t('history:loadError')}
+          </div>
+        ) : (
+          <div className="mt-6 grid gap-4 lg:grid-cols-[20rem_1fr]">
+            <RevisionTimeline
+              items={revisions.map((r) => ({
+                id: r.id,
+                op: r.op,
+                userId: r.userId,
+                userLabel: labelForUser(r.userId),
+                createdAt: r.createdAt,
+                changes: fieldsFor(r).length,
+              }))}
+              selectedId={selected?.id}
+              onSelect={(item) => setSelectedId(item.id)}
+              formatDate={formatDate}
+              labels={{
+                create: t('history:op.create'),
+                update: t('history:op.update'),
+                delete: t('history:op.delete'),
+                unknownUser: t('history:unknownUser'),
+                changes: t('history:changes'),
+              }}
+            />
+            <div className="min-w-0 space-y-4">
+              {selected ? (
+                <>
+                  <div className="flex flex-wrap items-center justify-between gap-3 rounded-md border bg-card p-3">
+                    <div>
+                      <p className="text-sm font-medium">{formatDate(selected.createdAt)}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {labelForUser(selected.userId) ?? t('history:unknownUser')}
+                      </p>
+                    </div>
+                    <div className="flex flex-wrap items-center gap-2">
+                      <Select
+                        value={compareToId || '_none_'}
+                        onValueChange={(v) => setCompareToId(v === '_none_' ? '' : v)}
+                      >
+                        <SelectTrigger
+                          className="h-8 w-auto text-xs"
+                          aria-label={t('history:compareTo')}
+                        >
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="_none_">{t('history:storedDiff')}</SelectItem>
+                          {revisions
+                            .filter((r) => r.id !== selected.id)
+                            .map((revision) => (
+                              <SelectItem key={revision.id} value={revision.id}>
+                                {formatDate(revision.createdAt)}
+                              </SelectItem>
+                            ))}
+                        </SelectContent>
+                      </Select>
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        disabled={revert.isPending || selected.op === 'delete'}
+                        onClick={() => void handleRevert(selected)}
+                      >
+                        <RotateCcw className="size-4" />
+                        {t('history:revert')}
+                      </Button>
+                    </div>
+                  </div>
+                  <DiffView
+                    fields={visibleFields}
+                    labels={{
+                      added: t('diff:added'),
+                      changed: t('diff:changed'),
+                      removed: t('diff:removed'),
+                      before: t('diff:before'),
+                      after: t('diff:after'),
+                      noChanges: t('diff:noChanges'),
+                    }}
+                  />
+                </>
+              ) : (
+                <div className="rounded-md border border-dashed p-8 text-center text-sm text-muted-foreground">
+                  {t('history:noRevisions')}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+const fieldsFor = (revision: HistoryRevision): HistoryDiffEntry[] =>
+  diffSnapshots(revision.snapshotBefore ?? {}, revision.snapshot)

package/src/components/wizard-form.tsx

@@ -0,0 +1,302 @@
+// WizardForm — multi-step create form. Each step shows a subset of the
+// resource's editable properties. Clicking "Next" validates only the current
+// step's fields before advancing; "Back" never re-validates. "Create" on the
+// final step triggers the caller-supplied submit handler.
+//
+// The component is i18n-unaware: all visible strings are passed via the
+// `labels` prop with English defaults. The ResourceWizardCreatePage calls
+// t() and wires the results in.
+
+import * as React from 'react'
+import { useWatch, type Control, type UseFormTrigger } from 'react-hook-form'
+import {
+  Button,
+  Field,
+  FieldError,
+  FieldLabel,
+  FormField,
+  InfoTooltip,
+  cn,
+} from '@modern-admin/ui'
+import { Check, ChevronLeft, ChevronRight, Plus, X } from 'lucide-react'
+import { PropertyEditor } from '../property-renderer.js'
+import { evaluateShowWhen } from '../show-when.js'
+import type { PropertyJSON } from '../types.js'
+
+// ── Public types ──────────────────────────────────────────────────────────────
+
+export interface WizardStep {
+  /** Short label shown in the step indicator circles */
+  label: string
+  /** Optional longer description rendered below the step indicator */
+  description?: string
+  /**
+   * Property paths (from the resource) to show in this step.
+   * If omitted on exactly one step, that step receives all properties not
+   * claimed by the other steps (catch-all).
+   */
+  properties?: string[]
+}
+
+export interface WizardFormLabels {
+  back?: string
+  next?: string
+  submit?: string
+  cancel?: string
+  /** Template: 'Step {current} of {total}' — shown only on mobile */
+  stepOf?: string
+}
+
+type FormValues = Record<string, unknown>
+
+export interface WizardFormProps {
+  steps: WizardStep[]
+  /** All editable properties of the resource. */
+  properties: PropertyJSON[]
+  resourceId: string
+  control: Control<FormValues>
+  trigger: UseFormTrigger<FormValues>
+  onSubmit: () => void
+  onCancel: () => void
+  isSubmitting?: boolean
+  submitError?: string | null
+  labels?: WizardFormLabels
+}
+
+// ── WizardForm ────────────────────────────────────────────────────────────────
+
+export function WizardForm({
+  steps,
+  properties,
+  resourceId,
+  control,
+  trigger,
+  onSubmit,
+  onCancel,
+  isSubmitting = false,
+  submitError,
+  labels = {},
+}: WizardFormProps): React.ReactElement {
+  const backLabel = labels.back ?? 'Back'
+  const nextLabel = labels.next ?? 'Next'
+  const submitLabel = labels.submit ?? 'Create'
+  const cancelLabel = labels.cancel ?? 'Cancel'
+  const stepOfTemplate = labels.stepOf ?? 'Step {current} of {total}'
+
+  const [currentStep, setCurrentStep] = React.useState(0)
+
+  // ── Distribute properties across steps ───────────────────────────────────
+  const stepProperties = React.useMemo<PropertyJSON[][]>(() => {
+    const claimedPaths = new Set(steps.flatMap((s) => s.properties ?? []))
+    const unclaimed = properties.filter((p) => !claimedPaths.has(p.path))
+    return steps.map((step) => {
+      if (step.properties) {
+        return step.properties
+          .map((path) => properties.find((p) => p.path === path))
+          .filter((p): p is PropertyJSON => p != null)
+      }
+      return unclaimed
+    })
+  }, [steps, properties])
+
+  const totalSteps = steps.length
+  const isFirst = currentStep === 0
+  const isLast = currentStep === totalSteps - 1
+
+  const handleNext = async (): Promise<void> => {
+    const paths = (stepProperties[currentStep] ?? []).map((p) => p.path)
+    // When the step has no properties, advance without validation.
+    const valid =
+      paths.length === 0 ||
+      (await trigger(paths as Parameters<typeof trigger>[0]))
+    if (valid) setCurrentStep((s) => Math.min(s + 1, totalSteps - 1))
+  }
+
+  const currentStepDef = steps[currentStep]!
+  const currentProperties = stepProperties[currentStep] ?? []
+
+  const stepOfLabel = stepOfTemplate
+    .replace('{current}', String(currentStep + 1))
+    .replace('{total}', String(totalSteps))
+
+  return (
+    <div>
+      {/* ── Step indicator ──────────────────────────────────────────── */}
+      <div className="px-6 pt-6 pb-5">
+        <div className="flex w-full max-w-xl items-start mx-auto">
+          {steps.map((step, index) => (
+            <React.Fragment key={index}>
+              {/* Step node */}
+              <div className="flex shrink-0 flex-col items-center">
+                <div
+                  className={cn(
+                    'flex h-8 w-8 items-center justify-center rounded-full border-2 text-sm font-semibold transition-colors',
+                    index < currentStep &&
+                      'border-primary bg-primary text-primary-foreground',
+                    index === currentStep &&
+                      'border-primary bg-background text-primary',
+                    index > currentStep &&
+                      'border-border bg-background text-muted-foreground',
+                  )}
+                >
+                  {index < currentStep ? (
+                    <Check className="size-3.5" />
+                  ) : (
+                    index + 1
+                  )}
+                </div>
+                <span
+                  className={cn(
+                    'mt-1.5 hidden max-w-[6rem] text-center text-xs leading-tight sm:block',
+                    index === currentStep
+                      ? 'font-medium text-foreground'
+                      : index < currentStep
+                        ? 'text-primary'
+                        : 'text-muted-foreground',
+                  )}
+                >
+                  {step.label}
+                </span>
+              </div>
+              {/* Connector line between nodes */}
+              {index < steps.length - 1 && (
+                <div
+                  className={cn(
+                    'mx-2 mt-3.5 h-0.5 flex-1 transition-colors',
+                    index < currentStep ? 'bg-primary' : 'bg-border',
+                  )}
+                />
+              )}
+            </React.Fragment>
+          ))}
+        </div>
+        {/* Mobile: compact "Step N of M · Label" summary */}
+        <p className="mt-2 text-center text-xs text-muted-foreground sm:hidden">
+          {stepOfLabel}
+          {currentStepDef.label ? ` · ${currentStepDef.label}` : ''}
+        </p>
+      </div>
+
+      {/* ── Step description ────────────────────────────────────────── */}
+      {currentStepDef.description && (
+        <p className="px-6 pb-2 text-sm text-muted-foreground">
+          {currentStepDef.description}
+        </p>
+      )}
+
+      {/* ── Fields ──────────────────────────────────────────────────── */}
+      <div className="gap-4 px-6 pb-4 [column-fill:_balance] md:columns-2">
+        {currentProperties.map((property) => (
+          <WizardConditionalField
+            key={property.path}
+            control={control}
+            property={property}
+          >
+            <FormField
+              control={control}
+              name={property.path}
+              render={({ field, fieldState }) => (
+                <Field
+                  data-invalid={fieldState.error ? true : undefined}
+                  className="mb-8 break-inside-avoid"
+                >
+                  <FieldLabel htmlFor={field.name}>
+                    {property.label}
+                    {property.description ? (
+                      <InfoTooltip
+                        content={property.description}
+                        ariaLabel={property.description}
+                      />
+                    ) : null}
+                    {property.isRequired && (
+                      <span className="ml-1 text-destructive">*</span>
+                    )}
+                  </FieldLabel>
+                  <PropertyEditor
+                    property={property}
+                    value={field.value}
+                    onChange={field.onChange}
+                    disabled={isSubmitting}
+                    resourceId={resourceId}
+                  />
+                  {fieldState.error?.message && (
+                    <FieldError>{fieldState.error.message}</FieldError>
+                  )}
+                </Field>
+              )}
+            />
+          </WizardConditionalField>
+        ))}
+      </div>
+
+      {/* ── Navigation footer ───────────────────────────────────────── */}
+      <div className="flex items-center justify-between border-t border-border px-6 py-4">
+        <div>
+          {submitError && (
+            <span className="text-sm text-destructive">{submitError}</span>
+          )}
+        </div>
+        <div className="flex gap-2">
+          {isFirst ? (
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={onCancel}
+              disabled={isSubmitting}
+            >
+              <X className="size-4" />
+              {cancelLabel}
+            </Button>
+          ) : (
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setCurrentStep((s) => s - 1)}
+              disabled={isSubmitting}
+            >
+              <ChevronLeft className="size-4" />
+              {backLabel}
+            </Button>
+          )}
+          {isLast ? (
+            <Button type="button" onClick={onSubmit} disabled={isSubmitting}>
+              <Plus className="size-4" />
+              {submitLabel}
+            </Button>
+          ) : (
+            <Button
+              type="button"
+              onClick={() => void handleNext()}
+              disabled={isSubmitting}
+            >
+              {nextLabel}
+              <ChevronRight className="size-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+WizardForm.displayName = 'WizardForm'
+
+// ── WizardConditionalField ────────────────────────────────────────────────────
+// Same showWhen evaluation as ConditionalField in edit-page, scoped here.
+
+interface WizardConditionalFieldProps {
+  control: Control<FormValues>
+  property: PropertyJSON
+  children: React.ReactNode
+}
+
+function WizardConditionalField({
+  control,
+  property,
+  children,
+}: WizardConditionalFieldProps): React.ReactElement | null {
+  const rule = property.showWhen
+  const watched = useWatch({ control, name: rule?.field ?? property.path })
+  if (!rule) return <>{children}</>
+  return evaluateShowWhen(rule, { [rule.field]: watched }) ? <>{children}</> : null
+}