@modern-admin/react 0.1.0

package/src/pages/settings-shared.tsx

@@ -0,0 +1,134 @@
+// Shared layout primitives for the Settings hub. Every section in
+// `settings-page.tsx` (API keys, webhooks, AI assistant, ...) should use
+// these so the look, spacing, and mobile behavior stays uniform.
+
+import * as React from 'react'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+  cn,
+} from '@modern-admin/ui'
+
+type IconComponent = React.ComponentType<{ className?: string }>
+
+interface SettingsCardProps {
+  icon: IconComponent
+  title: React.ReactNode
+  description?: React.ReactNode
+  action?: React.ReactNode
+  /** Removes default padding/header so the card body can fill edge-to-edge. */
+  bodyClassName?: string
+  children: React.ReactNode
+}
+
+/**
+ * Unified card wrapper for a settings section. Header collapses
+ * vertically on mobile and lays the action button to the right on `sm+`.
+ * `CardContent` gets `min-w-0` so tables/grids inside can shrink and
+ * scroll horizontally instead of forcing the parent grid wider.
+ */
+export function SettingsCard({
+  icon: Icon,
+  title,
+  description,
+  action,
+  bodyClassName,
+  children,
+}: SettingsCardProps): React.ReactElement {
+  return (
+    <Card>
+      <CardHeader
+        className={cn(
+          'flex-col items-start gap-2',
+          action && 'sm:flex-row sm:items-center sm:justify-between',
+        )}
+      >
+        <div className="flex min-w-0 flex-col gap-1.5">
+          <CardTitle className="flex items-center gap-2">
+            <Icon className="size-5" />
+            {title}
+          </CardTitle>
+          {description ? <CardDescription>{description}</CardDescription> : null}
+        </div>
+        {action}
+      </CardHeader>
+      <CardContent className={cn('min-w-0', bodyClassName)}>{children}</CardContent>
+    </Card>
+  )
+}
+
+/**
+ * Horizontal-scroll wrapper for tables inside `SettingsCard`. On mobile
+ * the content extends to the card edges (`-mx-6`) so the user sees the
+ * left edge of the table flush with the card; from `sm+` the negative
+ * margin is removed.
+ */
+export function SettingsTableScroll({ children }: { children: React.ReactNode }): React.ReactElement {
+  return <div className="-mx-6 overflow-x-auto sm:mx-0">{children}</div>
+}
+
+interface SettingsEmptyProps {
+  icon: IconComponent
+  title: React.ReactNode
+  description?: React.ReactNode
+}
+
+export function SettingsEmpty({ icon: Icon, title, description }: SettingsEmptyProps): React.ReactElement {
+  return (
+    <Empty className="border-0">
+      <EmptyHeader>
+        <EmptyMedia>
+          <Icon />
+        </EmptyMedia>
+        <EmptyTitle>{title}</EmptyTitle>
+        {description ? <EmptyDescription>{description}</EmptyDescription> : null}
+      </EmptyHeader>
+    </Empty>
+  )
+}
+
+interface SettingsListStateProps {
+  isLoading: boolean
+  error: unknown
+  isEmpty: boolean
+  loadingLabel: React.ReactNode
+  empty: SettingsEmptyProps
+  children: React.ReactNode
+}
+
+/**
+ * Renders one of: loading row, destructive error banner, empty state, or
+ * the actual list `children`. Keeps every section's "list with status"
+ * surface identical.
+ */
+export function SettingsListState({
+  isLoading,
+  error,
+  isEmpty,
+  loadingLabel,
+  empty,
+  children,
+}: SettingsListStateProps): React.ReactElement {
+  if (isLoading) {
+    return <div className="py-8 text-center text-sm text-muted-foreground">{loadingLabel}</div>
+  }
+  if (error) {
+    return (
+      <div className="rounded-md border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive">
+        {error instanceof Error ? error.message : String(error)}
+      </div>
+    )
+  }
+  if (isEmpty) {
+    return <SettingsEmpty {...empty} />
+  }
+  return <>{children}</>
+}

package/src/pages/show-page.tsx

@@ -0,0 +1,223 @@
+import * as React from 'react'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Kbd,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  getModKeyLabel,
+} from '@modern-admin/ui'
+import { AlertCircle, Pencil, Trash2, Zap } from 'lucide-react'
+import { useDeleteRecord, useFeatures, useInvokeRecordAction, useRecord, useResource } from '../hooks.js'
+import { confirmGuard } from '../action-guard.js'
+import { parseApiError } from '../client.js'
+import { PropertyDisplay } from '../property-renderer.js'
+import { Link, useNavigate } from '../router.js'
+import { useI18n } from '../i18n.js'
+import { useHotkey } from '../use-hotkey.js'
+import { PageBreadcrumbs, homeCrumb } from '../breadcrumbs.js'
+import { RelatedRecordsTabs } from '../components/related-records-tabs.js'
+import { useDialogs } from '../dialogs.js'
+import { useNotify } from '../notify.js'
+import { ActionMenu } from '../action-menu.js'
+import { RevisionsButton } from '../components/revisions-button.js'
+import { visibleRecordProperties } from '../relations.js'
+
+function PageError({
+  error,
+  t,
+}: {
+  error: unknown
+  t: (key: string) => string
+}): React.ReactElement {
+  const { status, message } = parseApiError(error)
+  const title =
+    status === 404
+      ? t('errors:notFound')
+      : status === 403
+        ? t('errors:forbidden')
+        : t('errors:server')
+  return (
+    <div className="flex items-start gap-3 rounded-lg border border-destructive/50 bg-destructive/10 p-4 dark:bg-destructive/15">
+      <AlertCircle className="mt-0.5 size-5 shrink-0 text-destructive" />
+      <div className="space-y-1 text-sm">
+        <p className="font-semibold text-destructive">{title}</p>
+        <p className="text-destructive/90">{message}</p>
+      </div>
+    </div>
+  )
+}
+
+export interface ResourceShowPageProps {
+  resourceId: string
+  recordId: string
+}
+
+export function ResourceShowPage({
+  resourceId,
+  recordId,
+}: ResourceShowPageProps): React.ReactElement {
+  const resource = useResource(resourceId)
+  const record = useRecord(resourceId, recordId)
+  const remove = useDeleteRecord(resourceId)
+  const invokeRecord = useInvokeRecordAction(resourceId)
+  const features = useFeatures()
+  const { t } = useI18n()
+  const navigate = useNavigate()
+  const dialogs = useDialogs()
+  const notify = useNotify()
+
+  const customRecordActions = (resource?.actions ?? []).filter(
+    (a) => a.actionType === 'record' && !['show', 'edit', 'delete'].includes(a.name),
+  )
+
+  // ── Keyboard shortcuts ──
+  // Ctrl/Cmd+E jumps into edit. Discoverable via the action-button tooltip.
+  useHotkey(
+    'mod+e',
+    () => {
+      if (!record.data) return
+      navigate({ name: 'edit', resourceId, recordId })
+    },
+    { description: t('common:edit') },
+  )
+
+  const handleDelete = async (): Promise<void> => {
+    const ok = await dialogs.confirm({
+      title: t('common:confirmDelete'),
+      confirmLabel: t('common:delete'),
+      destructive: true,
+    })
+    if (!ok) return
+    await remove.mutateAsync(recordId)
+    navigate({ name: 'list', resourceId })
+  }
+
+  if (!resource) return <div className="p-6">{t('common:loading')}</div>
+
+  const modLabel = getModKeyLabel()
+  const recordLabel = record.data?.record?.title || recordId
+
+  return (
+    <div className="space-y-2 sm:space-y-4">
+      <PageBreadcrumbs
+        items={[
+          homeCrumb(t('common:home')),
+          { label: resource.name, to: { name: 'list', resourceId } },
+          { label: recordLabel },
+        ]}
+      />
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between gap-3">
+          <CardTitle className="truncate">
+            {resource.name} #{recordId}
+          </CardTitle>
+          {record.data && (
+            <div className="flex shrink-0 flex-wrap gap-2">
+              {features.history && (
+                <RevisionsButton resourceId={resourceId} recordId={recordId} />
+              )}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  {/* `asChild` + Link-as-Button keeps the rendered DOM a
+                 *  single `<a>` so it picks up the Button's `h-8` from
+                 *  `size="sm"` instead of stacking a Link wrapper that
+                 *  collapses to its anchor default height. */}
+                  <Button variant="outline-primary" size="sm" asChild>
+                    <Link to={{ name: 'edit', resourceId, recordId }} aria-label={t('common:edit')}>
+                      <Pencil className="size-4" />
+                      <span className="hidden sm:inline">{t('common:edit')}</span>
+                    </Link>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="flex items-center gap-1.5">
+                  <span>{t('common:edit')}</span>
+                  <span className="inline-flex items-center gap-0.5">
+                    <Kbd>{modLabel}</Kbd>
+                    <span className="text-muted-foreground">+</span>
+                    <Kbd>E</Kbd>
+                  </span>
+                </TooltipContent>
+              </Tooltip>
+              <Button
+                variant="outline-destructive"
+                size="sm"
+                disabled={remove.isPending}
+                onClick={() => void handleDelete()}
+                aria-label={t('common:delete')}
+              >
+                <Trash2 className="size-4" />
+                <span className="hidden sm:inline">{t('common:delete')}</span>
+              </Button>
+              {customRecordActions.length > 0 && (
+                <ActionMenu
+                  actions={customRecordActions}
+                  onAction={async (action) => {
+                    if (!await confirmGuard(action, dialogs)) return
+                    void invokeRecord
+                      .mutateAsync({ recordId, actionName: action.name })
+                      .then((res) => {
+                        if (res.notice) {
+                          const type = res.notice.type === 'error' ? 'error'
+                            : res.notice.type === 'warning' ? 'warning'
+                              : res.notice.type === 'info' ? 'info'
+                                : 'success'
+                          notify[type]({ message: res.notice.message })
+                        }
+                      })
+                      .catch((err: Error) =>
+                        notify.error({ message: err.message }),
+                      )
+                  }}
+                  t={t}
+                  trigger={(
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      disabled={invokeRecord.isPending}
+                      aria-label={t('common:actions')}
+                    >
+                      <Zap className="size-4" />
+                      <span className="hidden sm:inline">{t('common:actions')}</span>
+                    </Button>
+                  )}
+                />
+              )}
+            </div>
+          )}
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {record.isLoading && <p className="text-muted-foreground">{t('common:loading')}</p>}
+            {record.isError && <PageError error={record.error} t={t} />}
+            {record.data && (
+              <dl className="[column-fill:_balance] md:columns-2">
+                {visibleRecordProperties(resource.properties, 'show')
+                  .map((p) => (
+                    <div key={p.path} className="mb-8 break-inside-avoid">
+                      <dt className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                        {p.label}
+                      </dt>
+                      <dd className="mt-1">
+                        <PropertyDisplay
+                          property={p}
+                          value={record.data!.record.params[p.path]}
+                          view="show"
+                          populated={record.data!.record.populated as Record<string, unknown> | undefined}
+                        />
+                      </dd>
+                    </div>
+                  ))}
+              </dl>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+      {record.data && <RelatedRecordsTabs resource={resource} recordId={recordId} />}
+    </div>
+  )
+}

package/src/pages/wizard-create-page.tsx

@@ -0,0 +1,164 @@
+// ResourceWizardCreatePage — multi-step creation form for a resource.
+// Analogous to ResourceEditPage but splits the fields across declarative
+// `steps`, each validated independently before advancing. Submit on the final
+// step creates the record and navigates to its show page.
+
+import * as React from 'react'
+import { useForm, type SubmitHandler } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Card, CardHeader, CardTitle, Form } from '@modern-admin/ui'
+import { useCreateRecord, useResource } from '../hooks.js'
+import { useNavigate } from '../router.js'
+import { useI18n } from '../i18n.js'
+import { useNotify } from '../notify.js'
+import { PageBreadcrumbs, homeCrumb } from '../breadcrumbs.js'
+import { buildValidationSchema, defaultValueFor } from '../validation.js'
+import type { PropertyJSON } from '../types.js'
+import { visibleRecordProperties } from '../relations.js'
+import {
+  WizardForm,
+  type WizardStep,
+  type WizardFormLabels,
+} from '../components/wizard-form.js'
+
+export interface ResourceWizardCreatePageProps {
+  resourceId: string
+  /** Step definitions. Each step declares which property paths it shows. */
+  steps: WizardStep[]
+  /**
+   * Override wizard button labels. Falls back to locale translations.
+   * Useful when embedding the page with a custom i18n setup.
+   */
+  labels?: WizardFormLabels
+}
+
+type FormValues = Record<string, unknown>
+
+export function ResourceWizardCreatePage({
+  resourceId,
+  steps,
+  labels: labelsProp,
+}: ResourceWizardCreatePageProps): React.ReactElement {
+  const resource = useResource(resourceId)
+  const create = useCreateRecord(resourceId)
+  const navigate = useNavigate()
+  const { t, locale } = useI18n()
+  const notify = useNotify()
+
+  const editable = React.useMemo<PropertyJSON[]>(
+    () =>
+      resource
+        ? visibleRecordProperties(resource.properties, 'edit').filter(
+          (p) => !p.isDisabled,
+        )
+        : [],
+    [resource],
+  )
+
+  // Route live form values into the validation schema (same pattern as edit-page).
+  const getValuesRef = React.useRef<() => FormValues>(() => ({}))
+
+  const schema = React.useMemo(
+    () => buildValidationSchema(editable, t, () => getValuesRef.current()),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [editable, locale],
+  )
+
+  const defaults = React.useMemo<FormValues>(() => {
+    const out: FormValues = {}
+    for (const p of editable) out[p.path] = defaultValueFor(p)
+    return out
+  }, [editable])
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: defaults,
+  })
+
+  getValuesRef.current = form.getValues
+
+  // Reset when the resource schema arrives (resource loaded after mount).
+  React.useEffect(() => {
+    form.reset(defaults)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaults])
+
+  const [submitError, setSubmitError] = React.useState<string | null>(null)
+
+  const onSubmit: SubmitHandler<FormValues> = async (values) => {
+    setSubmitError(null)
+    try {
+      const result = await create.mutateAsync(values)
+      const errors = result.record.errors as Record<
+        string,
+        { message?: string } | string
+      >
+      if (errors && Object.keys(errors).length > 0) {
+        for (const [path, err] of Object.entries(errors)) {
+          const message =
+            typeof err === 'string' ? err : (err?.message ?? 'Invalid value')
+          form.setError(path, { type: 'server', message })
+        }
+        if (result.record.baseError) setSubmitError(String(result.record.baseError))
+        notify.error({ key: 'toast:validationFailed' })
+        return
+      }
+      notify.success({ key: 'toast:created' })
+      navigate({ name: 'show', resourceId, recordId: String(result.record.id) })
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err)
+      setSubmitError(message)
+      notify.error({ key: 'toast:createFailed' }, { description: message })
+    }
+  }
+
+  const handleSubmit = (): void => {
+    void form.handleSubmit(onSubmit, () => {
+      notify.error({ key: 'toast:validationFailed' })
+    })()
+  }
+
+  if (!resource) return <div className="p-6">{t('common:loading')}</div>
+
+  const labels: WizardFormLabels = {
+    back: t('common:back'),
+    next: t('common:next'),
+    submit: t('common:create'),
+    cancel: t('common:cancel'),
+    stepOf: t('wizard:stepOf'),
+    ...labelsProp,
+  }
+
+  const crumbs = [
+    homeCrumb(t('common:home')),
+    { label: resource.name, to: { name: 'list' as const, resourceId } },
+    { label: t('common:new') },
+  ]
+
+  return (
+    <div className="flex min-h-full flex-col gap-4">
+      <PageBreadcrumbs items={crumbs} />
+      <Card className="flex-1">
+        <CardHeader>
+          <CardTitle className="truncate">
+            {t('common:newRecord', { name: resource.name })}
+          </CardTitle>
+        </CardHeader>
+        <Form {...form}>
+          <WizardForm
+            steps={steps}
+            properties={editable}
+            resourceId={resourceId}
+            control={form.control}
+            trigger={form.trigger}
+            onSubmit={handleSubmit}
+            onCancel={() => navigate({ name: 'list', resourceId })}
+            isSubmitting={form.formState.isSubmitting}
+            submitError={submitError}
+            labels={labels}
+          />
+        </Form>
+      </Card>
+    </div>
+  )
+}