@byline/admin 6.2.0 → 6.3.0

package/dist/forms/form-layout.js

@@ -0,0 +1,102 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as external_react_Fragment } from "react";
+import clsx from "clsx";
+import { sliceFieldAdmin } from "../fields/field-admin.js";
+import { FieldRenderer } from "../fields/field-renderer.js";
+import { AdminGroup } from "../presentation/group.js";
+import { AdminRow } from "../presentation/row.js";
+import { AdminTabs, tabPanelId, tabTriggerId } from "../presentation/tabs.js";
+import { useFormDomScope } from "./form-dom-scope.js";
+import form_renderer_module from "./form-renderer.module.js";
+import { useFormLayout } from "./use-form-layout.js";
+import { useFormTabs } from "./use-form-tabs.js";
+const BOTH_REGIONS = [
+    'main',
+    'sidebar'
+];
+const FormLayout = ({ fields, adminConfig, regions = BOTH_REGIONS, variant = 'split', activeLocale, initialData, activeTabBySet, onTabChange, sidebarSlot })=>{
+    const { fieldByName, tabSetByName, rowByName, groupByName, layout, fieldToTabPath } = useFormLayout(adminConfig, fields);
+    const tabs = useFormTabs(fieldToTabPath, activeTabBySet);
+    const domScope = useFormDomScope();
+    const renderField = (fieldName)=>{
+        const field = fieldByName.get(fieldName);
+        if (!field) return null;
+        return /*#__PURE__*/ jsx(FieldRenderer, {
+            field: field,
+            defaultValue: initialData?.fields?.[field.name],
+            contentLocale: activeLocale,
+            components: adminConfig?.fields?.[field.name]?.components,
+            editor: adminConfig?.fields?.[field.name]?.editor,
+            fieldAdmin: sliceFieldAdmin(adminConfig?.fields, field.name)
+        }, field.name);
+    };
+    const renderItem = (name)=>{
+        const tabSet = tabSetByName.get(name);
+        if (tabSet) return renderTabSet(tabSet);
+        const group = groupByName.get(name);
+        if (group) return renderGroup(group);
+        const row = rowByName.get(name);
+        if (row) return renderRow(row);
+        return renderField(name);
+    };
+    const renderRow = (row)=>/*#__PURE__*/ jsx(AdminRow, {
+            children: row.fields.map((name)=>renderField(name))
+        }, `row:${row.name}`);
+    const renderGroup = (group)=>/*#__PURE__*/ jsx(AdminGroup, {
+            label: group.label,
+            children: group.fields.map((name)=>renderItem(name))
+        }, `group:${group.name}`);
+    const renderTabSet = (set)=>{
+        const { visibleTabs, activeTabName, activeTab, errorCounts } = tabs.resolve(set);
+        const idBase = `${domScope}tabset:${set.name}`;
+        return /*#__PURE__*/ jsxs("div", {
+            className: clsx('byline-form-tabset', form_renderer_module.tabset),
+            children: [
+                visibleTabs.length > 0 && /*#__PURE__*/ jsx(AdminTabs, {
+                    idBase: idBase,
+                    tabs: visibleTabs,
+                    activeTab: activeTabName,
+                    onChange: (tabName)=>onTabChange(set.name, tabName),
+                    errorCounts: errorCounts,
+                    className: clsx('byline-form-tabset-tabs', form_renderer_module["tabset-tabs"])
+                }),
+                activeTab && /*#__PURE__*/ jsx("div", {
+                    role: "tabpanel",
+                    id: tabPanelId(idBase, activeTab.name),
+                    "aria-labelledby": tabTriggerId(idBase, activeTab.name),
+                    className: clsx('byline-form-tabset-fields', form_renderer_module["tabset-fields"]),
+                    children: activeTab.fields.map((name)=>renderItem(name))
+                })
+            ]
+        }, idBase);
+    };
+    const sidebarNames = layout.sidebar ?? [];
+    const sidebarContents = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            sidebarSlot,
+            sidebarNames.map((name)=>renderItem(name))
+        ]
+    });
+    const renderRegion = (region)=>'main' === region ? /*#__PURE__*/ jsx("div", {
+            className: clsx('byline-form-content', form_renderer_module.content),
+            children: layout.main.map((name)=>renderItem(name))
+        }, "main") : /*#__PURE__*/ jsx("div", {
+            className: clsx('byline-form-sidebar', form_renderer_module.sidebar),
+            children: sidebarContents
+        }, "sidebar");
+    if ('stacked' === variant) return /*#__PURE__*/ jsx("div", {
+        className: clsx('byline-form-layout-stacked', form_renderer_module["layout-stacked"]),
+        children: /*#__PURE__*/ jsx("div", {
+            className: clsx('byline-form-content', form_renderer_module.content),
+            children: regions.map((region)=>/*#__PURE__*/ jsx(external_react_Fragment, {
+                    children: 'main' === region ? layout.main.map((name)=>renderItem(name)) : sidebarContents
+                }, region))
+        })
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: clsx('byline-form-layout', form_renderer_module.layout),
+        children: regions.map((region)=>renderRegion(region))
+    });
+};
+export { FormLayout };

package/dist/forms/form-page-chrome.d.ts

@@ -0,0 +1,110 @@
+/**
+ * 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
+ */
+/**
+ * Page-level chrome for the full-page document editor: the parts that frame a
+ * form rather than render it. The embedded creation view renders none of this.
+ *
+ * Each component takes only the props it needs — deliberately not a
+ * `FormRendererProps` pass-through, so what a region actually depends on stays
+ * visible at its call site.
+ */
+import type { ReactNode, RefObject } from 'react';
+import type { SlugifierFn, StructuralMutationReceipt, WorkflowStatus } from '@byline/core';
+import { type DocumentActionsLocaleOption } from './document-actions.js';
+import { type UseScheduledPublicationReturn } from './scheduled-publication-control.js';
+import type { PublishedVersionInfo } from './form-renderer.js';
+import type { StatusTransitions } from './status-transitions.js';
+export interface FormHeadingRowProps {
+    heading: ReactNode;
+    /** Host-supplied controls rendered beside the heading (locale switcher, …). */
+    headerSlot?: ReactNode;
+}
+export declare const FormHeadingRow: ({ heading, headerSlot }: FormHeadingRowProps) => ReactNode;
+export interface FormStatusBarProps {
+    /** Mutations blocked or a discard in flight. */
+    disabled: boolean;
+    initialData?: any;
+    workflowStatuses?: WorkflowStatus[];
+    publishedVersion?: PublishedVersionInfo | null;
+    scheduling: UseScheduledPublicationReturn;
+    hasChanges: boolean;
+    isUploading: boolean;
+    isSubmitting: boolean;
+    onCancel: () => void;
+    /** Status transitions, already computed for the current workflow position. */
+    transitions: StatusTransitions;
+    statusBusy: boolean;
+    onStatusBusyChange: (busy: boolean) => void;
+    onStatusChange?: (nextStatus: string) => Promise<void>;
+    onMutationError?: (error: unknown) => 'blocked' | 'committed' | null | void;
+    /** Read synchronously at click time, not at render time. */
+    isBlocked: () => boolean;
+    /** A guarded action was attempted while the form is dirty. */
+    onUnsavedChanges: () => void;
+    onUnpublish?: () => Promise<void>;
+    onDelete?: () => Promise<void>;
+    onDuplicate?: () => Promise<void>;
+    onCopyToLocale?: (args: {
+        targetLocale: string;
+        overwrite: boolean;
+    }) => Promise<void>;
+    onDeleteLocale?: (args: {
+        targetLocale: string;
+    }) => Promise<void>;
+    useAsTitle?: string;
+    contentLocale: string;
+    contentLocales?: ReadonlyArray<DocumentActionsLocaleOption>;
+    defaultLocale: string;
+}
+export declare const FormStatusBar: ({ disabled, initialData, workflowStatuses, publishedVersion, scheduling, hasChanges, isUploading, isSubmitting, onCancel, transitions, statusBusy, onStatusBusyChange, onStatusChange, onMutationError, isBlocked, onUnsavedChanges, onUnpublish, onDelete, onDuplicate, onCopyToLocale, onDeleteLocale, useAsTitle, contentLocale, contentLocales, defaultLocale, }: FormStatusBarProps) => ReactNode;
+export interface FormConcurrencyNoticesProps {
+    /** Mutations blocked or a discard in flight. */
+    disabled: boolean;
+    mutationIssue?: 'stale' | 'reload' | 'lock' | 'unavailable' | 'committed' | null;
+    scheduledPublicationsNeedReconfirmation?: boolean;
+    scheduledPublicationsHref?: string;
+    /**
+     * Focus target when a mutation issue appears. The ref belongs to the form
+     * component, which restores focus after a save; this region only attaches it.
+     */
+    warningRef: RefObject<HTMLDivElement | null>;
+    discarding: boolean;
+    reloadFailed: boolean;
+    onDiscardRequested: () => void;
+    scheduling: UseScheduledPublicationReturn;
+    restoreWarnings?: string[];
+}
+export declare const FormConcurrencyNotices: ({ disabled, mutationIssue, scheduledPublicationsNeedReconfirmation, scheduledPublicationsHref, warningRef, discarding, reloadFailed, onDiscardRequested, scheduling, restoreWarnings, }: FormConcurrencyNoticesProps) => ReactNode;
+export interface FormSidebarWidgetsProps {
+    /** Mutations blocked or a discard in flight. */
+    disabled: boolean;
+    mode: 'create' | 'edit';
+    initialData?: any;
+    collectionPath?: string;
+    defaultLocale: string;
+    contentLocale: string;
+    contentLocales?: ReadonlyArray<DocumentActionsLocaleOption>;
+    showPath: boolean;
+    useAsPath?: string;
+    lockPath?: boolean;
+    pathSlugifier?: SlugifierFn;
+    pathSourceLocked?: boolean;
+    tree?: boolean;
+    useAsTitle?: string;
+    advertiseLocales?: boolean;
+    observedRevision?: number;
+    onMutationError?: (error: unknown) => 'blocked' | 'committed' | null | void;
+    onTreeMutationCommitted?: (receipt: StructuralMutationReceipt) => void;
+}
+/**
+ * The page-level widgets in the editor's sidebar: path, tree placement and
+ * advertised locales. They are page concerns rather than schema fields, so they
+ * reach `FormLayout` through its `sidebarSlot` and the embedded creation view
+ * passes none of them.
+ */
+export declare const FormSidebarWidgets: ({ disabled, mode, initialData, collectionPath, defaultLocale, contentLocale, contentLocales, showPath, useAsPath, lockPath, pathSlugifier, pathSourceLocked, tree, useAsTitle, advertiseLocales, observedRevision, onMutationError, onTreeMutationCommitted, }: FormSidebarWidgetsProps) => ReactNode;

package/dist/forms/form-page-chrome.js

@@ -0,0 +1,253 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "@byline/i18n/react";
+import { Alert, Button, ComboButton, LoaderEllipsis } from "@byline/ui/react";
+import clsx from "clsx";
+import { AvailableLocalesWidget } from "./available-locales-widget.js";
+import { DocumentActions } from "./document-actions.js";
+import form_renderer_module from "./form-renderer.module.js";
+import { FormStatusDisplay } from "./form-status-display.js";
+import { PathWidget } from "./path-widget.js";
+import { ScheduledPublicationCell, ScheduledPublicationNotice } from "./scheduled-publication-control.js";
+import { TreePlacementWidget } from "./tree-placement-widget.js";
+const FormHeadingRow = ({ heading, headerSlot })=>/*#__PURE__*/ jsxs("div", {
+        className: clsx('byline-form-heading-row', form_renderer_module["heading-row"]),
+        children: [
+            /*#__PURE__*/ jsx("h1", {
+                className: clsx('byline-form-heading', form_renderer_module.heading),
+                children: heading
+            }),
+            headerSlot
+        ]
+    });
+const FormStatusBar = ({ disabled, initialData, workflowStatuses, publishedVersion, scheduling, hasChanges, isUploading, isSubmitting, onCancel, transitions, statusBusy, onStatusBusyChange, onStatusChange, onMutationError, isBlocked, onUnsavedChanges, onUnpublish, onDelete, onDuplicate, onCopyToLocale, onDeleteLocale, useAsTitle, contentLocale, contentLocales, defaultLocale })=>{
+    const { t } = useTranslation('byline-admin');
+    const { primaryStatus, secondaryStatuses, isTerminal } = transitions;
+    return /*#__PURE__*/ jsxs("div", {
+        className: clsx('byline-form-status-bar', form_renderer_module["status-bar"]),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: clsx('byline-form-status-details', form_renderer_module["status-details"]),
+                children: /*#__PURE__*/ jsx(FormStatusDisplay, {
+                    disabled: disabled,
+                    initialData: initialData,
+                    workflowStatuses: workflowStatuses,
+                    publishedVersion: publishedVersion,
+                    onUnpublish: onUnpublish,
+                    afterStatusCells: /*#__PURE__*/ jsx(ScheduledPublicationCell, {
+                        state: scheduling.state,
+                        timeZone: scheduling.timeZone
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: clsx('byline-form-actions', form_renderer_module.actions),
+                children: [
+                    /*#__PURE__*/ jsx(Button, {
+                        className: clsx('byline-form-actions-button', form_renderer_module["actions-button"]),
+                        size: "sm",
+                        intent: "noeffect",
+                        type: "button",
+                        onClick: onCancel,
+                        children: false === hasChanges ? t('common.actions.close') : t('common.actions.cancel')
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        className: clsx('byline-form-actions-button', form_renderer_module["actions-button"]),
+                        size: "sm",
+                        type: "submit",
+                        disabled: disabled || false === hasChanges || isUploading || isSubmitting,
+                        "aria-label": isSubmitting ? t('common.actions.save') : void 0,
+                        children: isUploading ? t('forms.actions.uploading') : /*#__PURE__*/ jsxs("span", {
+                            className: clsx('byline-form-save-content', form_renderer_module["save-content"]),
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    className: clsx('byline-form-save-label', form_renderer_module["save-label"], isSubmitting && form_renderer_module["save-label-hidden"]),
+                                    children: t('common.actions.save')
+                                }),
+                                isSubmitting ? /*#__PURE__*/ jsx("span", {
+                                    className: clsx('byline-form-save-loader', form_renderer_module["save-loader"]),
+                                    children: /*#__PURE__*/ jsx(LoaderEllipsis, {
+                                        size: 28,
+                                        "aria-hidden": "true"
+                                    })
+                                }) : null
+                            ]
+                        })
+                    }),
+                    primaryStatus && onStatusChange && /*#__PURE__*/ jsx("div", {
+                        className: clsx('byline-form-actions-status-wrap', form_renderer_module["actions-status-wrap"]),
+                        children: /*#__PURE__*/ jsx(ComboButton, {
+                            buttonClassName: clsx('byline-form-actions-combo-button', form_renderer_module["actions-combo-button"]),
+                            triggerClassName: clsx('byline-form-actions-combo-trigger', form_renderer_module["actions-combo-trigger"]),
+                            options: secondaryStatuses.map((s)=>({
+                                    label: isTerminal ? t('forms.actions.revertTo', {
+                                        label: s.label ?? s.name
+                                    }) : s.verb ?? s.label ?? s.name,
+                                    value: s.name
+                                })),
+                            sideOffset: 5,
+                            size: "sm",
+                            type: "button",
+                            intent: isTerminal ? 'info' : 'success',
+                            disabled: disabled || statusBusy,
+                            onOptionSelect: async (value)=>{
+                                if (isBlocked()) return;
+                                if (hasChanges) return void onUnsavedChanges();
+                                onStatusBusyChange(true);
+                                try {
+                                    await onStatusChange(value);
+                                } catch (error) {
+                                    onMutationError?.(error);
+                                } finally{
+                                    onStatusBusyChange(false);
+                                }
+                            },
+                            onButtonClick: isTerminal ? void 0 : async ()=>{
+                                if (isBlocked()) return;
+                                if (hasChanges) return void onUnsavedChanges();
+                                onStatusBusyChange(true);
+                                try {
+                                    await onStatusChange(primaryStatus.name);
+                                } catch (error) {
+                                    onMutationError?.(error);
+                                } finally{
+                                    onStatusBusyChange(false);
+                                }
+                            },
+                            children: statusBusy ? '...' : isTerminal ? primaryStatus.label ?? primaryStatus.name : primaryStatus.verb ?? primaryStatus.label ?? primaryStatus.name
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(DocumentActions, {
+                        disabled: disabled,
+                        publishedVersion: publishedVersion,
+                        onUnpublish: onUnpublish,
+                        onDelete: onDelete,
+                        onDuplicate: onDuplicate,
+                        sourceTitle: null != useAsTitle && null != initialData ? initialData[useAsTitle] : null,
+                        onCopyToLocale: onCopyToLocale,
+                        sourceLocale: contentLocale,
+                        contentLocales: contentLocales,
+                        hasUnsavedChanges: hasChanges,
+                        onUnsavedChanges: ()=>onUnsavedChanges(),
+                        onDeleteLocale: onDeleteLocale,
+                        defaultLocale: defaultLocale,
+                        availableLocales: initialData?._availableVersionLocales,
+                        scheduledPublicationState: scheduling.state,
+                        onSchedulePublication: scheduling.openSchedule,
+                        onConfirmScheduledPublication: scheduling.confirm,
+                        onCancelScheduledPublication: scheduling.cancel
+                    })
+                ]
+            })
+        ]
+    });
+};
+const FormConcurrencyNotices = ({ disabled, mutationIssue, scheduledPublicationsNeedReconfirmation, scheduledPublicationsHref, warningRef, discarding, reloadFailed, onDiscardRequested, scheduling, restoreWarnings })=>{
+    const { t } = useTranslation('byline-admin');
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            (mutationIssue || scheduledPublicationsNeedReconfirmation) && /*#__PURE__*/ jsxs("div", {
+                ref: warningRef,
+                tabIndex: -1,
+                role: "alert",
+                "aria-live": "assertive",
+                className: clsx('byline-document-concurrency', form_renderer_module.concurrency),
+                children: [
+                    mutationIssue && /*#__PURE__*/ jsxs(Alert, {
+                        intent: "warning",
+                        icon: true,
+                        close: false,
+                        title: t(`documentConcurrency.${mutationIssue}Title`),
+                        children: [
+                            /*#__PURE__*/ jsx("p", {
+                                children: t(`documentConcurrency.${mutationIssue}`)
+                            }),
+                            'committed' !== mutationIssue && /*#__PURE__*/ jsx(Button, {
+                                type: "button",
+                                disabled: discarding,
+                                onClick: onDiscardRequested,
+                                children: t('documentConcurrency.reloadAction')
+                            }),
+                            reloadFailed && /*#__PURE__*/ jsx("p", {
+                                children: t('documentConcurrency.reloadFailed')
+                            })
+                        ]
+                    }),
+                    scheduledPublicationsNeedReconfirmation && /*#__PURE__*/ jsxs(Alert, {
+                        intent: "warning",
+                        icon: true,
+                        close: false,
+                        title: t('documentConcurrency.schedulesTitle'),
+                        children: [
+                            /*#__PURE__*/ jsx("p", {
+                                children: t('documentConcurrency.schedules')
+                            }),
+                            scheduledPublicationsHref && /*#__PURE__*/ jsx("a", {
+                                href: scheduledPublicationsHref,
+                                children: t('documentConcurrency.reviewSchedules')
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(ScheduledPublicationNotice, {
+                state: scheduling.state,
+                timeZone: scheduling.timeZone,
+                busy: disabled || scheduling.busy,
+                onConfirm: scheduling.confirm,
+                onReschedule: scheduling.openSchedule,
+                onCancel: scheduling.cancel
+            }),
+            scheduling.modal,
+            restoreWarnings && restoreWarnings.length > 0 && /*#__PURE__*/ jsxs(Alert, {
+                className: "m-0 mt-4",
+                intent: "warning",
+                icon: true,
+                close: false,
+                title: t('forms.restoreWarnings.title'),
+                children: [
+                    /*#__PURE__*/ jsx("p", {
+                        children: t('forms.restoreWarnings.body', {
+                            count: restoreWarnings.length
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("ul", {
+                        children: restoreWarnings.map((w)=>/*#__PURE__*/ jsx("li", {
+                                children: w
+                            }, w))
+                    })
+                ]
+            })
+        ]
+    });
+};
+const FormSidebarWidgets = ({ disabled, mode, initialData, collectionPath, defaultLocale, contentLocale, contentLocales, showPath, useAsPath, lockPath, pathSlugifier, pathSourceLocked, tree, useAsTitle, advertiseLocales, observedRevision, onMutationError, onTreeMutationCommitted })=>/*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            showPath && (useAsPath || true === lockPath || 'string' == typeof initialData?.path && initialData.path.length > 0) && /*#__PURE__*/ jsx(PathWidget, {
+                disabled: disabled,
+                useAsPath: useAsPath,
+                collectionPath: collectionPath ?? '',
+                defaultLocale: defaultLocale,
+                activeLocale: contentLocale,
+                mode: mode,
+                slugifier: pathSlugifier,
+                sourceLocked: pathSourceLocked,
+                lockPath: lockPath
+            }),
+            tree && 'edit' === mode && 'string' == typeof initialData?.id && /*#__PURE__*/ jsx(TreePlacementWidget, {
+                disabled: disabled,
+                onMutationError: onMutationError,
+                onCommitted: onTreeMutationCommitted,
+                expectedRevision: observedRevision ?? initialData.revision,
+                collectionPath: collectionPath ?? '',
+                documentId: initialData.id,
+                useAsTitle: useAsTitle
+            }),
+            advertiseLocales && /*#__PURE__*/ jsx(AvailableLocalesWidget, {
+                disabled: disabled,
+                contentLocales: contentLocales ?? [],
+                availableVersionLocales: initialData?._availableVersionLocales ?? []
+            })
+        ]
+    });
+export { FormConcurrencyNotices, FormHeadingRow, FormSidebarWidgets, FormStatusBar };

package/dist/forms/form-renderer.d.ts

@@ -7,10 +7,10 @@
  */
 import { type ReactNode } from 'react';
 import type { AdminResourceConfig, Field, WorkflowStatus } from '@byline/core';
-import type { DocumentPatch } from '@byline/core/patches';
-import { type DocumentActionsLocaleOption } from './document-actions.js';
 import { type ScheduledPublicationInfo, type SchedulePublicationInput } from './scheduled-publication-control.js';
+import type { DocumentActionsLocaleOption } from './document-actions.js';
 import type { UseNavigationGuard } from './navigation-guard.js';
+export type { SystemFieldsSubmitPayload } from './use-form-submission.js';
 /** Metadata about a previously published version that is still live. */
 export interface PublishedVersionInfo {
     id: string;
@@ -19,22 +19,6 @@ export interface PublishedVersionInfo {
     createdAt: string | Date;
     updatedAt: string | Date;
 }
-/**
- * Payload emitted by the form on Save. Carries the content (field data +
- * patches) alongside the document-grain system fields (path / advertised
- * locales) and per-bucket dirty flags so the host can route each piece to the
- * right write path — versioned for content, immediate/non-versioned for the
- * system fields. See docs/08-internationalization/index.md.
- */
-export interface SystemFieldsSubmitPayload {
-    data: any;
-    patches: DocumentPatch[];
-    contentDirty: boolean;
-    pathDirty: boolean;
-    systemPath?: string | null;
-    availableLocalesDirty: boolean;
-    systemAvailableLocales?: string[];
-}
 /** Props shared by both the public FormRenderer and its internal FormContent component. */
 export interface FormRendererProps {
     mutationIssue?: 'stale' | 'reload' | 'lock' | 'unavailable' | 'committed' | null;