@byline/admin 2.5.1 → 2.6.0

package/dist/forms/document-actions.js

@@ -0,0 +1,475 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslation } from "@byline/i18n/react";
+import { Button, Checkbox, CloseIcon, DeleteIcon, Dropdown, EllipsisIcon, IconButton, Modal, Select } from "@byline/ui/react";
+import classnames from "classnames";
+import document_actions_module from "./document-actions.module.js";
+const DUPLICATE_TITLE_SUFFIX = ' (copy)';
+function DocumentActions({ publishedVersion, onUnpublish, onDelete, onDuplicate, sourceTitle, onCopyToLocale, sourceLocale, contentLocales }) {
+    const { t } = useTranslation('byline-admin');
+    const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+    const [showDuplicateConfirm, setShowDuplicateConfirm] = useState(false);
+    const [duplicateBusy, setDuplicateBusy] = useState(false);
+    const availableTargetLocales = (contentLocales ?? []).filter((loc)=>loc.code !== sourceLocale);
+    const copyToLocaleAvailable = null != onCopyToLocale && availableTargetLocales.length > 0;
+    const [showCopyToLocaleConfirm, setShowCopyToLocaleConfirm] = useState(false);
+    const [copyToLocaleBusy, setCopyToLocaleBusy] = useState(false);
+    const [copyTargetLocale, setCopyTargetLocale] = useState(availableTargetLocales[0]?.code ?? '');
+    const [copyOverwrite, setCopyOverwrite] = useState(false);
+    const handleOnDelete = ()=>{
+        setShowDeleteConfirm(false);
+        if (onDelete) onDelete();
+    };
+    const handleOnDuplicate = async ()=>{
+        if (!onDuplicate) return;
+        setDuplicateBusy(true);
+        try {
+            await onDuplicate();
+            setShowDuplicateConfirm(false);
+        } finally{
+            setDuplicateBusy(false);
+        }
+    };
+    const handleOpenCopyToLocale = ()=>{
+        setCopyTargetLocale(availableTargetLocales[0]?.code ?? '');
+        setCopyOverwrite(false);
+        setShowCopyToLocaleConfirm(true);
+    };
+    const handleOnCopyToLocale = async ()=>{
+        if (!onCopyToLocale || !copyTargetLocale) return;
+        setCopyToLocaleBusy(true);
+        try {
+            await onCopyToLocale({
+                targetLocale: copyTargetLocale,
+                overwrite: copyOverwrite
+            });
+            setShowCopyToLocaleConfirm(false);
+        } finally{
+            setCopyToLocaleBusy(false);
+        }
+    };
+    const duplicatePreviewBefore = sourceTitle ?? '';
+    const duplicatePreviewAfter = (sourceTitle ?? '') + DUPLICATE_TITLE_SUFFIX;
+    const sourceLocaleLabel = contentLocales?.find((loc)=>loc.code === sourceLocale)?.label ?? sourceLocale ?? '';
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(Dropdown.Root, {
+                children: [
+                    /*#__PURE__*/ jsx(Dropdown.Trigger, {
+                        render: /*#__PURE__*/ jsx(IconButton, {
+                            variant: "text",
+                            intent: "noeffect",
+                            size: "sm"
+                        }),
+                        children: /*#__PURE__*/ jsx(EllipsisIcon, {
+                            className: classnames('byline-form-actions-icon', document_actions_module.icon),
+                            width: "15px",
+                            height: "15px"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Dropdown.Portal, {
+                        children: /*#__PURE__*/ jsxs(Dropdown.Content, {
+                            className: classnames('byline-form-actions-menu', document_actions_module.menu),
+                            align: "end",
+                            "data-side": "top",
+                            sideOffset: 10,
+                            children: [
+                                copyToLocaleAvailable && /*#__PURE__*/ jsx(Dropdown.Item, {
+                                    onClick: handleOpenCopyToLocale,
+                                    children: /*#__PURE__*/ jsx("div", {
+                                        className: classnames('byline-form-actions-item', document_actions_module.item),
+                                        children: /*#__PURE__*/ jsx("span", {
+                                            className: classnames('byline-form-actions-item-text', document_actions_module["item-text"]),
+                                            children: /*#__PURE__*/ jsx("button", {
+                                                type: "button",
+                                                children: t('documentActions.copyToLocaleMenuItem')
+                                            })
+                                        })
+                                    })
+                                }),
+                                onDuplicate && /*#__PURE__*/ jsx(Dropdown.Item, {
+                                    onClick: ()=>{
+                                        setShowDuplicateConfirm(true);
+                                    },
+                                    children: /*#__PURE__*/ jsx("div", {
+                                        className: classnames('byline-form-actions-item', document_actions_module.item),
+                                        children: /*#__PURE__*/ jsx("span", {
+                                            className: classnames('byline-form-actions-item-text', document_actions_module["item-text"]),
+                                            children: /*#__PURE__*/ jsx("button", {
+                                                type: "button",
+                                                children: t('common.actions.duplicate')
+                                            })
+                                        })
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Dropdown.Separator, {}),
+                                /*#__PURE__*/ jsx(Dropdown.Item, {
+                                    onClick: ()=>{
+                                        setShowDeleteConfirm(true);
+                                    },
+                                    children: /*#__PURE__*/ jsxs("div", {
+                                        className: classnames('byline-form-actions-item', document_actions_module.item),
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: classnames('byline-form-actions-item-icon', document_actions_module["item-icon"]),
+                                                children: /*#__PURE__*/ jsx(DeleteIcon, {
+                                                    width: "16px",
+                                                    height: "16px"
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: classnames('byline-form-actions-item-text', document_actions_module["item-text"]),
+                                                children: /*#__PURE__*/ jsx("button", {
+                                                    type: "button",
+                                                    className: classnames('byline-form-actions-delete', document_actions_module["delete"]),
+                                                    children: t('common.actions.delete')
+                                                })
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Modal, {
+                isOpen: showDeleteConfirm,
+                closeOnOverlayClick: true,
+                onDismiss: ()=>{
+                    setShowDeleteConfirm(false);
+                },
+                children: /*#__PURE__*/ jsxs(Modal.Container, {
+                    style: {
+                        maxWidth: '500px'
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxs(Modal.Header, {
+                            className: classnames('byline-form-actions-modal-head', document_actions_module["modal-head"]),
+                            children: [
+                                /*#__PURE__*/ jsx("h3", {
+                                    className: classnames('byline-form-actions-modal-title', document_actions_module["modal-title"]),
+                                    children: t('documentActions.delete.title')
+                                }),
+                                /*#__PURE__*/ jsx(IconButton, {
+                                    "arial-label": t('common.actions.close'),
+                                    size: "xs",
+                                    onClick: ()=>{
+                                        setShowDeleteConfirm(false);
+                                    },
+                                    children: /*#__PURE__*/ jsx(CloseIcon, {
+                                        width: "16px",
+                                        height: "16px",
+                                        svgClassName: "white-icon"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Modal.Content, {
+                            children: /*#__PURE__*/ jsx("p", {
+                                children: t('documentActions.delete.warning')
+                            })
+                        }),
+                        /*#__PURE__*/ jsxs(Modal.Actions, {
+                            children: [
+                                /*#__PURE__*/ jsx("button", {
+                                    "data-autofocus": true,
+                                    type: "button",
+                                    tabIndex: 0,
+                                    className: classnames('byline-form-actions-sr-only', document_actions_module["sr-only"]),
+                                    children: "no action"
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    size: "sm",
+                                    style: {
+                                        minWidth: '80px'
+                                    },
+                                    intent: "noeffect",
+                                    onClick: ()=>{
+                                        setShowDeleteConfirm(false);
+                                    },
+                                    children: t('common.actions.cancel')
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    size: "sm",
+                                    style: {
+                                        minWidth: '80px'
+                                    },
+                                    intent: "danger",
+                                    onClick: handleOnDelete,
+                                    children: t('common.actions.delete')
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(Modal, {
+                isOpen: showDuplicateConfirm,
+                closeOnOverlayClick: !duplicateBusy,
+                onDismiss: ()=>{
+                    if (!duplicateBusy) setShowDuplicateConfirm(false);
+                },
+                children: /*#__PURE__*/ jsxs(Modal.Container, {
+                    style: {
+                        maxWidth: '560px'
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxs(Modal.Header, {
+                            className: classnames('byline-form-actions-modal-head', document_actions_module["modal-head"]),
+                            children: [
+                                /*#__PURE__*/ jsx("h3", {
+                                    className: classnames('byline-form-actions-modal-title', document_actions_module["modal-title"]),
+                                    children: t('documentActions.duplicate.title')
+                                }),
+                                /*#__PURE__*/ jsx(IconButton, {
+                                    "arial-label": t('common.actions.close'),
+                                    size: "xs",
+                                    onClick: ()=>{
+                                        if (!duplicateBusy) setShowDuplicateConfirm(false);
+                                    },
+                                    children: /*#__PURE__*/ jsx(CloseIcon, {
+                                        width: "16px",
+                                        height: "16px",
+                                        svgClassName: "white-icon"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxs(Modal.Content, {
+                            className: "prose",
+                            children: [
+                                /*#__PURE__*/ jsx("p", {
+                                    className: "m-0",
+                                    children: t('documentActions.duplicate.intro')
+                                }),
+                                /*#__PURE__*/ jsxs("ul", {
+                                    className: classnames('byline-form-actions-list', document_actions_module.list),
+                                    children: [
+                                        /*#__PURE__*/ jsxs("li", {
+                                            children: [
+                                                t('documentActions.duplicate.bulletTitle'),
+                                                ' ',
+                                                /*#__PURE__*/ jsx("code", {
+                                                    children: DUPLICATE_TITLE_SUFFIX.trim()
+                                                }),
+                                                "."
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsx("li", {
+                                            children: t('documentActions.duplicate.bulletPath')
+                                        })
+                                    ]
+                                }),
+                                null != sourceTitle && sourceTitle.length > 0 && /*#__PURE__*/ jsxs("div", {
+                                    className: classnames('byline-form-actions-preview', document_actions_module.preview),
+                                    children: [
+                                        /*#__PURE__*/ jsx("div", {
+                                            className: classnames('byline-form-actions-preview-label', document_actions_module["preview-label"]),
+                                            children: t('documentActions.duplicate.previewLabel')
+                                        }),
+                                        /*#__PURE__*/ jsxs("div", {
+                                            className: classnames('byline-form-actions-preview-row', document_actions_module["preview-row"]),
+                                            children: [
+                                                /*#__PURE__*/ jsx("span", {
+                                                    className: classnames('byline-form-actions-preview-before', document_actions_module["preview-before"]),
+                                                    children: duplicatePreviewBefore
+                                                }),
+                                                /*#__PURE__*/ jsx("span", {
+                                                    className: classnames('byline-form-actions-preview-arrow', document_actions_module["preview-arrow"]),
+                                                    children: "→"
+                                                }),
+                                                /*#__PURE__*/ jsx("span", {
+                                                    className: classnames('byline-form-actions-preview-after', document_actions_module["preview-after"]),
+                                                    children: duplicatePreviewAfter
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxs(Modal.Actions, {
+                            children: [
+                                /*#__PURE__*/ jsx("button", {
+                                    "data-autofocus": true,
+                                    type: "button",
+                                    tabIndex: 0,
+                                    className: classnames('byline-form-actions-sr-only', document_actions_module["sr-only"]),
+                                    children: "no action"
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    size: "sm",
+                                    style: {
+                                        minWidth: '80px'
+                                    },
+                                    intent: "noeffect",
+                                    onClick: ()=>{
+                                        if (!duplicateBusy) setShowDuplicateConfirm(false);
+                                    },
+                                    disabled: duplicateBusy,
+                                    children: t('common.actions.cancel')
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    size: "sm",
+                                    style: {
+                                        minWidth: '80px'
+                                    },
+                                    intent: "primary",
+                                    onClick: handleOnDuplicate,
+                                    disabled: duplicateBusy,
+                                    children: duplicateBusy ? t('documentActions.duplicate.busyButton') : t('common.actions.duplicate')
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(Modal, {
+                isOpen: showCopyToLocaleConfirm,
+                closeOnOverlayClick: !copyToLocaleBusy,
+                onDismiss: ()=>{
+                    if (!copyToLocaleBusy) setShowCopyToLocaleConfirm(false);
+                },
+                children: /*#__PURE__*/ jsxs(Modal.Container, {
+                    style: {
+                        maxWidth: '560px'
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxs(Modal.Header, {
+                            className: classnames('byline-form-actions-modal-head', document_actions_module["modal-head"]),
+                            children: [
+                                /*#__PURE__*/ jsx("h3", {
+                                    className: classnames('byline-form-actions-modal-title', document_actions_module["modal-title"]),
+                                    children: t('documentActions.copyToLocale.title')
+                                }),
+                                /*#__PURE__*/ jsx(IconButton, {
+                                    "arial-label": t('common.actions.close'),
+                                    size: "xs",
+                                    onClick: ()=>{
+                                        if (!copyToLocaleBusy) setShowCopyToLocaleConfirm(false);
+                                    },
+                                    children: /*#__PURE__*/ jsx(CloseIcon, {
+                                        width: "16px",
+                                        height: "16px",
+                                        svgClassName: "white-icon"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxs(Modal.Content, {
+                            children: [
+                                /*#__PURE__*/ jsx("p", {
+                                    children: t('documentActions.copyToLocale.intro')
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: classnames('byline-form-actions-copy-row', document_actions_module["copy-row"]),
+                                    style: {
+                                        marginTop: 'var(--spacing-12)'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ jsxs("span", {
+                                            className: classnames('byline-form-actions-copy-label', document_actions_module["copy-label"]),
+                                            style: {
+                                                fontWeight: 500
+                                            },
+                                            children: [
+                                                t('documentActions.copyToLocale.fromLabel'),
+                                                "\xa0"
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: classnames('byline-form-actions-copy-source', document_actions_module["copy-source"]),
+                                            children: sourceLocaleLabel
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: classnames('byline-form-actions-copy-row', document_actions_module["copy-row"]),
+                                    style: {
+                                        marginTop: 'var(--spacing-12)'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: classnames('byline-form-actions-copy-label', document_actions_module["copy-label"]),
+                                            style: {
+                                                fontWeight: 500,
+                                                marginRight: 'var(--spacing-8)'
+                                            },
+                                            children: t('documentActions.copyToLocale.toLabel')
+                                        }),
+                                        /*#__PURE__*/ jsx(Select, {
+                                            size: "sm",
+                                            ariaLabel: t('documentActions.copyToLocale.targetAriaLabel'),
+                                            value: copyTargetLocale,
+                                            items: availableTargetLocales.map((loc)=>({
+                                                    value: loc.code,
+                                                    label: loc.label
+                                                })),
+                                            onValueChange: (value)=>{
+                                                if (null != value) setCopyTargetLocale(value);
+                                            },
+                                            disabled: copyToLocaleBusy
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx("div", {
+                                    className: classnames('byline-form-actions-copy-row', document_actions_module["copy-row"]),
+                                    style: {
+                                        marginTop: 'var(--spacing-16)'
+                                    },
+                                    children: /*#__PURE__*/ jsx(Checkbox, {
+                                        id: "copy-to-locale-overwrite",
+                                        name: "overwrite",
+                                        label: t('documentActions.copyToLocale.overwriteLabel'),
+                                        checked: copyOverwrite,
+                                        disabled: copyToLocaleBusy,
+                                        helpText: t('documentActions.copyToLocale.overwriteHelp'),
+                                        onCheckedChange: (value)=>{
+                                            setCopyOverwrite(true === value);
+                                        }
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxs(Modal.Actions, {
+                            children: [
+                                /*#__PURE__*/ jsx("button", {
+                                    "data-autofocus": true,
+                                    type: "button",
+                                    tabIndex: 0,
+                                    className: classnames('byline-form-actions-sr-only', document_actions_module["sr-only"]),
+                                    children: "no action"
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    size: "sm",
+                                    style: {
+                                        minWidth: '80px'
+                                    },
+                                    intent: "noeffect",
+                                    onClick: ()=>{
+                                        if (!copyToLocaleBusy) setShowCopyToLocaleConfirm(false);
+                                    },
+                                    disabled: copyToLocaleBusy,
+                                    children: t('common.actions.cancel')
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    size: "sm",
+                                    style: {
+                                        minWidth: '80px'
+                                    },
+                                    intent: "primary",
+                                    onClick: handleOnCopyToLocale,
+                                    disabled: copyToLocaleBusy || !copyTargetLocale,
+                                    children: copyToLocaleBusy ? t('documentActions.copyToLocale.busyButton') : t('documentActions.copyToLocale.confirmButton')
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+export { DocumentActions };

package/dist/forms/document-actions.module.js

@@ -0,0 +1,34 @@
+import "./document-actions_module.css";
+const document_actions_module = {
+    icon: "icon-s8mBo2",
+    menu: "menu-IxqAyg",
+    item: "item-k3szmy",
+    "item-icon": "item-icon-G0Twql",
+    itemIcon: "item-icon-G0Twql",
+    "item-text": "item-text-QjsRkV",
+    itemText: "item-text-QjsRkV",
+    delete: "delete-xmSRLN",
+    "modal-head": "modal-head-T7hzCI",
+    modalHead: "modal-head-T7hzCI",
+    "modal-title": "modal-title-e2sqE2",
+    modalTitle: "modal-title-e2sqE2",
+    "sr-only": "sr-only-VaKvc6",
+    srOnly: "sr-only-VaKvc6",
+    list: "list-TuqTao",
+    preview: "preview-oePPZR",
+    "preview-label": "preview-label-bvWDqG",
+    previewLabel: "preview-label-bvWDqG",
+    "preview-row": "preview-row-NyFKjX",
+    previewRow: "preview-row-NyFKjX",
+    "preview-before": "preview-before-tmxeNQ",
+    previewBefore: "preview-before-tmxeNQ",
+    "preview-arrow": "preview-arrow-plq330",
+    previewArrow: "preview-arrow-plq330",
+    "preview-after": "preview-after-pYlSUr",
+    previewAfter: "preview-after-pYlSUr",
+    "copy-row": "copy-row-EGqeNw",
+    copyRow: "copy-row-EGqeNw",
+    "copy-source": "copy-source-IV71b6",
+    copySource: "copy-source-IV71b6"
+};
+export default document_actions_module;

package/dist/forms/document-actions_module.css

@@ -0,0 +1,118 @@
+:is(.icon-s8mBo2, .byline-form-actions-icon) {
+  color: var(--primary-500);
+  transform: rotate(90deg);
+}
+
+:is(.menu-IxqAyg, .byline-form-actions-menu) {
+  min-width: 140px;
+}
+
+:is(.item-k3szmy, .byline-form-actions-item) {
+  margin-left: var(--spacing-8);
+  align-items: center;
+  display: flex;
+}
+
+:is(.item-icon-G0Twql, .byline-form-actions-item-icon) {
+  width: 28px;
+  display: inline-block;
+}
+
+:is(.item-text-QjsRkV, .byline-form-actions-item-text) {
+  width: 100%;
+  font-size: var(--font-size-sm);
+  text-align: left;
+  flex: 1;
+  display: inline-block;
+}
+
+:is(.delete-xmSRLN, .byline-form-actions-delete) {
+  width: 100%;
+  color: var(--red-600);
+  text-align: left;
+  cursor: pointer;
+  background: none;
+  border: none;
+  flex: 1;
+  padding: 0;
+  line-height: 1;
+}
+
+:is(.modal-head-T7hzCI, .byline-form-actions-modal-head) {
+  margin-bottom: var(--spacing-8);
+  padding-top: 1rem;
+}
+
+:is(.modal-title-e2sqE2, .byline-form-actions-modal-title) {
+  margin: 0 0 var(--spacing-8) 0;
+  font-size: var(--font-size-2xl);
+}
+
+:is(.sr-only-VaKvc6, .byline-form-actions-sr-only) {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+:is(.list-TuqTao, .byline-form-actions-list) {
+  margin: var(--spacing-8) 0;
+  font-size: var(--font-size-sm);
+  padding-left: 1.25rem;
+}
+
+:is(.preview-oePPZR, .byline-form-actions-preview) {
+  margin-top: var(--spacing-16);
+  padding: var(--spacing-8) var(--spacing-12);
+  background: var(--surface-2, #00000008);
+  border: 1px solid var(--border-subtle, #00000014);
+  border-radius: var(--radius-md, 4px);
+  font-size: var(--font-size-sm);
+}
+
+:is(.preview-label-bvWDqG, .byline-form-actions-preview-label) {
+  margin-bottom: var(--spacing-4);
+  opacity: .75;
+  font-weight: 500;
+}
+
+:is(.preview-row-NyFKjX, .byline-form-actions-preview-row) {
+  align-items: center;
+  gap: var(--spacing-8);
+  flex-wrap: wrap;
+  display: flex;
+}
+
+:is(.preview-before-tmxeNQ, .byline-form-actions-preview-before) {
+  font-family: var(--font-mono, monospace);
+  opacity: .7;
+}
+
+:is(.preview-arrow-plq330, .byline-form-actions-preview-arrow) {
+  opacity: .5;
+}
+
+:is(.preview-after-pYlSUr, .byline-form-actions-preview-after) {
+  font-family: var(--font-mono, monospace);
+  font-weight: 500;
+}
+
+:is(.copy-row-EGqeNw, .byline-form-actions-copy-row) {
+  flex-wrap: wrap;
+  align-items: center;
+  display: flex;
+}
+
+:is(.copy-source-IV71b6, .byline-form-actions-copy-source) {
+  font-family: var(--font-mono, monospace);
+}
+
+:is(:is([data-theme="dark"], .dark) .delete-xmSRLN, :is([data-theme="dark"], .dark) .byline-form-actions-delete) {
+  color: var(--red-400);
+}
+