@byline/admin 2.5.2 → 2.6.0

package/src/presentation/tabs.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { useTranslation } from '@byline/i18n/react'
+import { Badge } from '@byline/ui/react'
+import cx from 'classnames'
+
+import styles from './tabs.module.css'
+
+export interface AdminTabItem {
+  name: string
+  label: string
+}
+
+interface AdminTabsProps {
+  tabs: AdminTabItem[]
+  activeTab: string
+  onChange: (name: string) => void
+  /** Error counts keyed by tab name — shows a danger badge when > 0. */
+  errorCounts?: Record<string, number>
+  className?: string
+}
+
+/**
+ * Tabs navigation bar for admin form layouts.
+ *
+ * Used by FormRenderer when a CollectionAdminConfig declares a `tabs` array.
+ * Each tab is a simple button with a bottom-border active indicator.
+ * Inactive tabs show a subtle hover state. Fully dark-mode aware.
+ *
+ * Stable override handles: `.byline-admin-tabs`, `.byline-admin-tab`,
+ * `.byline-admin-tab-active`, `.byline-admin-tab-label`,
+ * `.byline-admin-tab-badge`.
+ */
+export const AdminTabs = ({
+  tabs,
+  activeTab,
+  onChange,
+  errorCounts,
+  className,
+}: AdminTabsProps) => {
+  const { t } = useTranslation('byline-admin')
+  return (
+    <div
+      role="tablist"
+      aria-label={t('presentation.formTabsAriaLabel')}
+      className={cx('byline-admin-tabs', styles.tabs, className)}
+    >
+      {tabs.map((tab) => {
+        const isActive = tab.name === activeTab
+        return (
+          <button
+            key={tab.name}
+            type="button"
+            role="tab"
+            aria-selected={isActive}
+            onClick={() => onChange(tab.name)}
+            className={cx(
+              'byline-admin-tab',
+              styles.tab,
+              isActive && ['byline-admin-tab-active', styles['tab-active']]
+            )}
+          >
+            <span className={cx('byline-admin-tab-label', styles.label)}>
+              {tab.label}
+              {(errorCounts?.[tab.name] ?? 0) > 0 && (
+                <Badge intent="danger" className={cx('byline-admin-tab-badge', styles.badge)}>
+                  {errorCounts?.[tab.name]}
+                </Badge>
+              )}
+            </span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/src/react.ts

@@ -0,0 +1,84 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+/**
+ * Single React barrel for `@byline/admin`. Hosts every client-side
+ * surface the admin shell needs to render the document editor —
+ * presentational layout primitives, field widgets, the form runtime,
+ * the editor-shared widgets (status badge, diff modal), and the
+ * field-side services Context. Generic drag-and-drop helpers
+ * (`DraggableSortable`, `useSortable`, `moveItem`) live in
+ * `@byline/ui/react` since they embed no CMS concepts.
+ *
+ * Why one barrel: per-area subpath exports break React Context
+ * identity under bundlers that pre-bundle subpaths individually
+ * (e.g. Vite's `optimizeDeps.include`) — a provider mounted on one
+ * Context identity and a hook reading another. A single specifier
+ * eliminates the trap structurally. Tree-shaking inside the ESM
+ * bundle still drops anything unused by the host.
+ *
+ * Sibling subpaths in this package — `@byline/admin/admin-users`,
+ * `@byline/admin/admin-roles/components/*`, `@byline/admin/auth`,
+ * etc. — host per-vertical components and server-side modules;
+ * those are intentionally separate so server-only imports don't pull
+ * React.
+ */
+
+// Field widgets.
+export * from './fields/array/array-field.js'
+export * from './fields/blocks/blocks-field.js'
+export * from './fields/checkbox/checkbox-field.js'
+export * from './fields/column-formatter.js'
+export * from './fields/date-time-formatter.js'
+export * from './fields/datetime/datetime-field.js'
+export * from './fields/draggable-context-menu.js'
+export * from './fields/field-helpers.js'
+export * from './fields/field-renderer.js'
+export * from './fields/field-services-context.js'
+export * from './fields/file/file-field.js'
+export * from './fields/file/file-upload-field.js'
+export * from './fields/group/group-field.js'
+export * from './fields/image/image-field.js'
+export * from './fields/image/image-upload-field.js'
+export * from './fields/local-date-time.js'
+export * from './fields/locale-badge.js'
+export * from './fields/numerical/numerical-field.js'
+export * from './fields/relation/relation-field.js'
+export * from './fields/relation/relation-picker.js'
+export * from './fields/select/select-field.js'
+export * from './fields/sortable-item.js'
+export * from './fields/text/text-field.js'
+export * from './fields/text-area/text-area-field.js'
+export * from './fields/use-field-change-handler.js'
+// Form runtime.
+export * from './forms/document-actions.js'
+export * from './forms/form-context.js'
+export * from './forms/form-renderer.js'
+export * from './forms/navigation-guard.js'
+export * from './forms/path-widget.js'
+// Validation error code → translation helper. Sibling to schemas in
+// `@byline/core/validation`, which emit codes; this helper maps the
+// codes onto the active locale for form-input errorText slots.
+export * from './lib/translate-validation-error.js'
+// Presentational admin layout primitives.
+export * from './presentation/group.js'
+export * from './presentation/row.js'
+export * from './presentation/tabs.js'
+// Collection-editor-shared widgets.
+export * from './widgets/diff-viewer/diff-modal.js'
+export * from './widgets/status-badge/status-badge.js'
+// Field-side service contract types.
+export type {
+  BylineFieldServices,
+  CollectionListDoc,
+  CollectionListParams,
+  CollectionListResponse,
+  GetCollectionDocumentsFn,
+  UploadedFileResult,
+  UploadFieldFn,
+} from './fields/field-services-types.js'

package/src/services/admin-services-types.ts

@@ -67,6 +67,23 @@ export type UpdateAccountInput = UpdateAccountRequest
 /** Same shape as `ChangeAccountPasswordRequest` from `@byline/admin/admin-account`. */
 export type ChangeAccountPasswordInput = ChangeAccountPasswordRequest
 
+export interface SetInterfaceLocaleInput {
+  /** BCP 47 tag, or `null` to clear the preference and re-engage detection. */
+  locale: string | null
+}
+
+/**
+ * Return shape for the locale-switcher service. `account` is populated
+ * when the request resolved an authenticated admin actor (the form on
+ * the account page); `null` on pre-auth surfaces (the sign-in page
+ * locale dropdown) where the cookie write is the only effect.
+ */
+export interface SetInterfaceLocaleResult {
+  ok: true
+  locale: string | null
+  account: AccountResponse | null
+}
+
 // --- Admin users ----------------------------------------------------------
 
 export interface CreateAdminUserInput {
@@ -142,6 +159,7 @@ export interface BylineAdminServices {
   // Account self-service
   updateAccount: AdminServiceCall<UpdateAccountInput, AccountResponse>
   changeAccountPassword: AdminServiceCall<ChangeAccountPasswordInput, AccountResponse>
+  setInterfaceLocale: AdminServiceCall<SetInterfaceLocaleInput, SetInterfaceLocaleResult>
 
   // Admin user writes (page-container reads stay in the host for now)
   createAdminUser: AdminServiceCall<CreateAdminUserInput, AdminUserResponse>

package/src/widgets/diff-viewer/diff-modal.module.css

@@ -0,0 +1,79 @@
+/**
+ * DiffModal — side-by-side document version comparison modal.
+ *
+ * Override handles:
+ *   .byline-diff-modal-header     — modal header padding
+ *   .byline-diff-modal-title-stack — heading + subtitle stack
+ *   .byline-diff-modal-title      — heading
+ *   .byline-diff-modal-subtitle   — subtitle line
+ *   .byline-diff-modal-version    — inline pill identifying the historical version
+ *   .byline-diff-modal-content    — scrollable content
+ *   .byline-diff-modal-state      — loading / error placeholder
+ *   .byline-diff-modal-error      — error placeholder colour modifier
+ *   .byline-diff-modal-viewer     — diff viewer wrapper
+ */
+
+.header,
+:global(.byline-diff-modal-header) {
+  padding-top: var(--spacing-16);
+  margin-bottom: var(--spacing-8);
+  flex-shrink: 0;
+}
+
+.title-stack,
+:global(.byline-diff-modal-title-stack) {
+  display: flex;
+  flex-direction: column;
+}
+
+.title,
+:global(.byline-diff-modal-title) {
+  margin: 0;
+  font-size: var(--font-size-xl);
+}
+
+.subtitle,
+:global(.byline-diff-modal-subtitle) {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--gray-400);
+}
+
+.version,
+:global(.byline-diff-modal-version) {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  background-color: var(--canvas-700);
+  padding: 0 var(--spacing-4);
+  border-radius: var(--border-radius-sm);
+}
+
+.content,
+:global(.byline-diff-modal-content) {
+  flex: 1 1 0;
+  overflow: auto;
+  padding: 0;
+  min-height: 0;
+}
+
+.state,
+:global(.byline-diff-modal-state) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: var(--spacing-12);
+  color: var(--gray-400);
+}
+
+.error,
+:global(.byline-diff-modal-error) {
+  color: var(--red-400);
+  gap: 0;
+}
+
+.viewer,
+:global(.byline-diff-modal-viewer) {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+}

package/src/widgets/diff-viewer/diff-modal.tsx

@@ -0,0 +1,186 @@
+'use client'
+
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { useEffect, useState } from 'react'
+
+import { useTranslation } from '@byline/i18n/react'
+import { CloseIcon, IconButton, LoaderRing, Modal } from '@byline/ui/react'
+import cx from 'classnames'
+import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued'
+
+import styles from './diff-modal.module.css'
+
+// Keys that are per-version metadata rather than content — strip before diffing
+// so the diff focuses on meaningful content changes. ClientDocument-shape
+// metadata keys after the Phase 7 admin migration.
+const STRIP_KEYS = new Set([
+  'id',
+  'versionId',
+  'path',
+  'status',
+  'createdAt',
+  'updatedAt',
+  'hasPublishedVersion',
+  '_publishedVersion',
+])
+
+function stripMeta(doc: Record<string, unknown>): Record<string, unknown> {
+  // With the nested document shape, extract just the fields for diffing.
+  if (doc.fields && typeof doc.fields === 'object') {
+    return doc.fields as Record<string, unknown>
+  }
+  return Object.fromEntries(Object.entries(doc).filter(([k]) => !STRIP_KEYS.has(k)))
+}
+
+export interface DiffModalProps {
+  isOpen: boolean
+  onDismiss: () => void
+  collection: string
+  documentId: string
+  /** The `versionId` of the historical version to compare. */
+  versionId: string
+  /** A human-readable label for the historical version (e.g. a date string). */
+  versionLabel: string
+  /** The already-loaded current (latest) version of the document. */
+  currentDocument: Record<string, unknown>
+  /** Content locale to compare — undefined / 'all' shows all locales. */
+  locale?: string
+  /**
+   * Host-provided loader for a historical document version. The diff
+   * modal is framework-neutral; callers wire this to whatever transport
+   * they use (e.g. `BylineAdminServices.getCollectionDocumentVersion` in
+   * the admin shell).
+   */
+  loadHistoricalVersion: (
+    collection: string,
+    documentId: string,
+    versionId: string,
+    locale: string | undefined
+  ) => Promise<Record<string, unknown>>
+}
+
+export function DiffModal({
+  isOpen,
+  onDismiss,
+  collection,
+  documentId,
+  versionId,
+  versionLabel,
+  currentDocument,
+  locale,
+  loadHistoricalVersion,
+}: DiffModalProps) {
+  const { t } = useTranslation('byline-admin')
+  const [historicalDoc, setHistoricalDoc] = useState<Record<string, unknown> | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!isOpen || !versionId) return
+
+    let cancelled = false
+    setLoading(true)
+    setError(null)
+    setHistoricalDoc(null)
+
+    loadHistoricalVersion(collection, documentId, versionId, locale)
+      .then((doc) => {
+        if (cancelled) return
+        setHistoricalDoc(doc)
+      })
+      .catch((err) => {
+        if (cancelled) return
+        setError(err instanceof Error ? err.message : t('diffModal.loadFailed'))
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [isOpen, collection, documentId, versionId, locale, loadHistoricalVersion, t])
+
+  const currentStr = currentDocument ? JSON.stringify(stripMeta(currentDocument), null, 2) : ''
+
+  const historicalStr = historicalDoc ? JSON.stringify(stripMeta(historicalDoc), null, 2) : ''
+
+  return (
+    <Modal isOpen={isOpen} closeOnOverlayClick={true} onDismiss={onDismiss}>
+      <Modal.Container
+        style={{
+          width: '96vw',
+          maxWidth: '96vw',
+          height: '90vh',
+          maxHeight: '90vh',
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+        }}
+      >
+        <Modal.Header className={cx('byline-diff-modal-header', styles.header)}>
+          <div className={cx('byline-diff-modal-title-stack', styles['title-stack'])}>
+            <h3 className={cx('byline-diff-modal-title', styles.title)}>{t('diffModal.title')}</h3>
+            <p className={cx('byline-diff-modal-subtitle', styles.subtitle)}>
+              {t('diffModal.subtitleBefore')}{' '}
+              <span className={cx('byline-diff-modal-version', styles.version)}>
+                {versionLabel}
+              </span>{' '}
+              {t('diffModal.subtitleAfter')}
+            </p>
+          </div>
+          <IconButton onClick={onDismiss} size="xs" aria-label={t('diffModal.closeAriaLabel')}>
+            <CloseIcon width="15px" height="15px" />
+          </IconButton>
+        </Modal.Header>
+
+        <Modal.Content
+          className={cx('byline-diff-modal-content', styles.content)}
+          style={{ minHeight: 0 }}
+        >
+          {loading && (
+            <div className={cx('byline-diff-modal-state', styles.state)}>
+              <LoaderRing size={28} color="#666666" />
+              <span>{t('diffModal.loading')}</span>
+            </div>
+          )}
+
+          {error && (
+            <div
+              className={cx(
+                'byline-diff-modal-state',
+                'byline-diff-modal-error',
+                styles.state,
+                styles.error
+              )}
+            >
+              {error}
+            </div>
+          )}
+
+          {!loading && !error && historicalDoc && (
+            <div className={cx('byline-diff-modal-viewer', styles.viewer)}>
+              <ReactDiffViewer
+                oldValue={historicalStr}
+                newValue={currentStr}
+                splitView={true}
+                compareMethod={DiffMethod.LINES}
+                useDarkTheme={true}
+                leftTitle={versionLabel}
+                rightTitle={t('diffModal.currentVersion')}
+                hideLineNumbers={false}
+              />
+            </div>
+          )}
+        </Modal.Content>
+      </Modal.Container>
+    </Modal>
+  )
+}

package/src/widgets/status-badge/status-badge.module.css

@@ -0,0 +1,31 @@
+/**
+ * StatusBadge — workflow-status pill, optionally preceded by a "live" dot.
+ *
+ * Override handles:
+ *   .byline-status-badge-wrap   — the outer flex container
+ *   .byline-status-badge-dot    — the green "published version live" dot
+ *   .byline-status-badge        — the badge itself
+ */
+
+.wrap,
+:global(.byline-status-badge-wrap) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-4);
+}
+
+.dot,
+:global(.byline-status-badge-dot) {
+  display: inline-block;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: var(--border-radius-full);
+  background-color: var(--green-500);
+}
+
+.badge,
+:global(.byline-status-badge) {
+  padding: 0 0.375rem;
+  font-size: 0.65rem;
+  line-height: 1.5;
+}

package/src/widgets/status-badge/status-badge.tsx

@@ -0,0 +1,71 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import type { WorkflowStatus } from '@byline/core'
+import {
+  WORKFLOW_STATUS_ARCHIVED,
+  WORKFLOW_STATUS_DRAFT,
+  WORKFLOW_STATUS_PUBLISHED,
+} from '@byline/core'
+import { useTranslation } from '@byline/i18n/react'
+import { Badge } from '@byline/ui/react'
+import cx from 'classnames'
+
+import styles from './status-badge.module.css'
+
+function statusIntent(status: string): 'success' | 'warning' | 'info' | 'noeffect' {
+  switch (status) {
+    case WORKFLOW_STATUS_PUBLISHED:
+      return 'success'
+    case WORKFLOW_STATUS_DRAFT:
+      return 'warning'
+    case WORKFLOW_STATUS_ARCHIVED:
+      return 'info'
+    default:
+      return 'noeffect'
+  }
+}
+
+/**
+ * Compact badge for workflow status values. Maps the three built-in
+ * statuses (draft, published, archived) to semantic intents and falls
+ * back to `noeffect` for any custom workflow statuses.
+ *
+ * When `hasPublishedVersion` is true and the current status is not
+ * `published`, a small green dot is rendered before the badge to
+ * indicate that a published version is live.
+ *
+ * Stable override handles: `.byline-status-badge-wrap`,
+ * `.byline-status-badge-dot`, `.byline-status-badge`.
+ */
+export const StatusBadge = ({
+  status,
+  workflowStatuses,
+  hasPublishedVersion,
+}: {
+  status: string
+  workflowStatuses: WorkflowStatus[]
+  hasPublishedVersion?: boolean
+}) => {
+  const { t } = useTranslation('byline-admin')
+  const label = workflowStatuses.find((s) => s.name === status)?.label ?? String(status ?? '')
+
+  return (
+    <span className={cx('byline-status-badge-wrap', styles.wrap)}>
+      {hasPublishedVersion === true && status !== 'published' && (
+        <span
+          title={t('statusBadge.publishedVersionLive')}
+          className={cx('byline-status-badge-dot', styles.dot)}
+        />
+      )}
+      <Badge intent={statusIntent(status)} className={cx('byline-status-badge', styles.badge)}>
+        {label}
+      </Badge>
+    </span>
+  )
+}