@byline/admin 5.1.3 → 5.2.0

package/dist/fields/select/select-field.jsx

@@ -1,27 +0,0 @@
-/**
- * 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 { ErrorText, Label, Select } from '@byline/ui/react';
-import cx from 'clsx';
-import { useFieldError, useFieldValue, useIsDirty } from '../../forms/form-context';
-import styles from './select-field.module.css';
-export const SelectField = ({ field, value, defaultValue, onChange, id, path, }) => {
-    const fieldPath = path ?? field.name;
-    const fieldError = useFieldError(fieldPath);
-    const isDirty = useIsDirty(fieldPath);
-    const fieldValue = useFieldValue(fieldPath);
-    const incomingValue = value ?? fieldValue ?? defaultValue ?? '';
-    const htmlId = id ?? fieldPath;
-    return (<div className={`byline-field-select ${field.name}`}>
-      {field.label && (<Label id={htmlId} htmlFor={htmlId} label={field.label} required={!field.optional} className={cx('byline-field-select-label', styles.label)}/>)}
-      <Select size="xs" variant="outlined" id={htmlId} name={field.name} placeholder="Select an option" required={!field.optional} value={incomingValue} ariaLabel={field.label} helpText={field.helpText} items={field.options.map((opt) => ({ value: opt.value, label: opt.label }))} onValueChange={(value) => {
-            if (value != null)
-                onChange?.(value);
-        }} className={cx(isDirty && ['byline-field-select-dirty', styles.dirty])}/>
-      {fieldError && <ErrorText id={`${field.name}-error`} text={fieldError}/>}
-    </div>);
-};

package/dist/fields/sortable-item.jsx

@@ -1,54 +0,0 @@
-/**
- * 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 { useState } from 'react';
-import { useTranslation } from '@byline/i18n/react';
-import { ChevronDownIcon, GripperVerticalIcon, useSortable } from '@byline/ui/react';
-import cx from 'clsx';
-import { DraggableContextMenu } from './draggable-context-menu';
-import styles from './sortable-item.module.css';
-const ItemFrame = ({ label, children, onAddBelow, onRemove, grip, rootRef, style, dragging = false, rootClassName, }) => {
-    const { t } = useTranslation('byline-admin');
-    const [collapsed, setCollapsed] = useState(false);
-    return (<div ref={rootRef} style={style} className={cx('byline-sortable', styles.root, rootClassName, dragging && ['byline-sortable-dragging', styles.dragging], collapsed && ['byline-sortable-collapsed', styles.collapsed])}>
-      <div className={cx('byline-sortable-header', styles.header, !collapsed && ['byline-sortable-header-expanded', styles['header-expanded']])}>
-        {grip}
-        <div className={cx('byline-sortable-label', styles.label)}>{label}</div>
-        <DraggableContextMenu onAddBelow={onAddBelow} onRemove={onRemove}/>
-        <button type="button" className={cx('byline-sortable-toggle', styles.toggle)} onClick={() => setCollapsed((prev) => !prev)} aria-label={collapsed
-            ? t('fields.sortable.expandAriaLabel')
-            : t('fields.sortable.collapseAriaLabel')}>
-          <ChevronDownIcon className={cx('byline-sortable-toggle-icon', styles['toggle-icon'], collapsed && ['byline-sortable-toggle-icon-rotated', styles['toggle-icon-rotated']])}/>
-        </button>
-      </div>
-      <div className={cx('byline-sortable-content', styles.content, collapsed && ['byline-sortable-content-hidden', styles['content-hidden']])}>
-        {children}
-      </div>
-    </div>);
-};
-export const SortableItem = ({ id, label, children, onAddBelow, onRemove, }) => {
-    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-        id,
-        transition: {
-            duration: 250,
-            easing: 'cubic-bezier(0, 0.2, 0.2, 1)',
-        },
-    });
-    const style = {
-        transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
-        transition,
-        zIndex: isDragging ? 10 : 'auto',
-    };
-    return (<ItemFrame label={label} onAddBelow={onAddBelow} onRemove={onRemove} rootRef={setNodeRef} style={style} dragging={isDragging} grip={<button type="button" className={cx('byline-sortable-grip', styles.grip)} {...attributes} {...listeners}>
-          <GripperVerticalIcon className={cx('byline-sortable-grip-icon', styles['grip-icon'])}/>
-        </button>}>
-      {children}
-    </ItemFrame>);
-};
-export const StaticItem = ({ label, children, onAddBelow, onRemove, }) => (<ItemFrame label={label} onAddBelow={onAddBelow} onRemove={onRemove} rootClassName="byline-sortable-static">
-    {children}
-  </ItemFrame>);

package/dist/fields/text/text-field.jsx

@@ -1,79 +0,0 @@
-/**
- * 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 { useCallback } from 'react';
-import { Input, Label } from '@byline/ui/react';
-import cx from 'clsx';
-import { useFieldError, useFieldValue } from '../../forms/form-context';
-import { LocaleBadge } from '../locale-badge';
-import styles from './text-field.module.css';
-export const TextField = ({ field, value, defaultValue, onChange, id, path, locale, components, }) => {
-    const fieldPath = path ?? field.name;
-    const fieldError = useFieldError(fieldPath);
-    const fieldValue = useFieldValue(fieldPath);
-    const incomingValue = value ?? fieldValue ?? defaultValue ?? '';
-    const htmlId = id ?? fieldPath;
-    const handleChange = useCallback((value) => {
-        if (onChange) {
-            onChange(value);
-        }
-    }, [onChange]);
-    // Custom component slots (from admin config)
-    const slots = components;
-    const CustomLabel = slots?.Label;
-    const CustomHelpText = slots?.HelpText;
-    const CustomField = slots?.Field;
-    const BeforeField = slots?.beforeField;
-    const AfterField = slots?.afterField;
-    // Shared props available to every slot component
-    const slotBaseProps = {
-        field: field,
-        path: fieldPath,
-        value: incomingValue,
-        error: fieldError,
-        id: htmlId,
-    };
-    // When a locale is active, render a custom Label+badge and suppress the
-    // Input's own label so the locale indicator appears in the label row.
-    const showBadge = !!locale && !!field.label;
-    // Determine whether the label is handled externally (by a custom slot or
-    // the locale badge row) so Input doesn't render its own.
-    const hasCustomLabel = !!CustomLabel;
-    const suppressInputLabel = showBadge || hasCustomLabel;
-    const suppressInputHelpText = !!CustomHelpText;
-    const labelRowClass = cx('byline-field-text-label-row', styles['label-row']);
-    // ── Label rendering ──────────────────────────────────────────
-    const renderLabel = () => {
-        if (hasCustomLabel) {
-            return (<div className={labelRowClass}>
-          <CustomLabel {...slotBaseProps} label={field.label} required={!field.optional}/>
-          {showBadge && <LocaleBadge locale={locale}/>}
-        </div>);
-        }
-        if (showBadge) {
-            return (<div className={labelRowClass}>
-          <Label id={`${htmlId}-label`} htmlFor={htmlId} label={field.label} required={!field.optional}/>
-          <LocaleBadge locale={locale}/>
-        </div>);
-        }
-        return null;
-    };
-    // ── Field input rendering ────────────────────────────────────
-    const renderInput = () => {
-        if (CustomField) {
-            return (<CustomField {...slotBaseProps} onChange={handleChange} defaultValue={defaultValue} placeholder={field.placeholder}/>);
-        }
-        return (<Input id={htmlId} name={field.name} label={suppressInputLabel ? undefined : field.label} required={!field.optional} helpText={suppressInputHelpText ? undefined : field.helpText} value={incomingValue} onChange={(e) => handleChange(e.target.value)} error={fieldError != null} errorText={fieldError}/>);
-    };
-    return (<div className={`byline-field-text ${field.name}`}>
-      {renderLabel()}
-      {BeforeField && <BeforeField {...slotBaseProps}/>}
-      {renderInput()}
-      {AfterField && <AfterField {...slotBaseProps}/>}
-      {CustomHelpText && <CustomHelpText {...slotBaseProps} helpText={field.helpText}/>}
-    </div>);
-};

package/dist/fields/text-area/text-area-field.jsx

@@ -1,79 +0,0 @@
-/**
- * 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 { useCallback } from 'react';
-import { Label, TextArea } from '@byline/ui/react';
-import cx from 'clsx';
-import { useFieldError, useFieldValue } from '../../forms/form-context';
-import { LocaleBadge } from '../locale-badge';
-import styles from './text-area-field.module.css';
-export const TextAreaField = ({ field, value, defaultValue, onChange, id, path, locale, components, }) => {
-    const fieldPath = path ?? field.name;
-    const fieldError = useFieldError(fieldPath);
-    const fieldValue = useFieldValue(fieldPath);
-    const incomingValue = value ?? fieldValue ?? defaultValue ?? '';
-    const htmlId = id ?? fieldPath;
-    const handleChange = useCallback((value) => {
-        if (onChange) {
-            onChange(value);
-        }
-    }, [onChange]);
-    // Custom component slots (from admin config)
-    const slots = components;
-    const CustomLabel = slots?.Label;
-    const CustomHelpText = slots?.HelpText;
-    const CustomField = slots?.Field;
-    const BeforeField = slots?.beforeField;
-    const AfterField = slots?.afterField;
-    // Shared props available to every slot component
-    const slotBaseProps = {
-        field: field,
-        path: fieldPath,
-        value: incomingValue,
-        error: fieldError,
-        id: htmlId,
-    };
-    // When a locale is active, render a custom Label+badge and suppress the
-    // TextArea's own label so the locale indicator appears in the label row.
-    const showBadge = !!locale && !!field.label;
-    // Determine whether the label is handled externally (by a custom slot or
-    // the locale badge row) so TextArea doesn't render its own.
-    const hasCustomLabel = !!CustomLabel;
-    const suppressInputLabel = showBadge || hasCustomLabel;
-    const suppressInputHelpText = !!CustomHelpText;
-    const labelRowClass = cx('byline-field-text-area-label-row', styles['label-row']);
-    // ── Label rendering ──────────────────────────────────────────
-    const renderLabel = () => {
-        if (hasCustomLabel) {
-            return (<div className={labelRowClass}>
-          <CustomLabel {...slotBaseProps} label={field.label} required={!field.optional}/>
-          {showBadge && <LocaleBadge locale={locale}/>}
-        </div>);
-        }
-        if (showBadge) {
-            return (<div className={labelRowClass}>
-          <Label id={`${htmlId}-label`} htmlFor={htmlId} label={field.label} required={!field.optional}/>
-          <LocaleBadge locale={locale}/>
-        </div>);
-        }
-        return null;
-    };
-    // ── Field input rendering ────────────────────────────────────
-    const renderInput = () => {
-        if (CustomField) {
-            return (<CustomField {...slotBaseProps} onChange={handleChange} defaultValue={defaultValue} placeholder={field.placeholder}/>);
-        }
-        return (<TextArea id={htmlId} name={field.name} label={suppressInputLabel ? undefined : field.label} required={!field.optional} helpText={suppressInputHelpText ? undefined : field.helpText} value={incomingValue} onChange={(e) => handleChange(e.target.value)} error={fieldError != null} errorText={fieldError} rows={4}/>);
-    };
-    return (<div className={`byline-field-text-area ${field.name}`}>
-      {renderLabel()}
-      {BeforeField && <BeforeField {...slotBaseProps}/>}
-      {renderInput()}
-      {AfterField && <AfterField {...slotBaseProps}/>}
-      {CustomHelpText && <CustomHelpText {...slotBaseProps} helpText={field.helpText}/>}
-    </div>);
-};

package/dist/forms/available-locales-reconcile.test.node.js

@@ -1,43 +0,0 @@
-/**
- * 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 { describe, expect, it } from 'vitest';
-import { reconcileLocaleState } from './available-locales-reconcile.js';
-/**
- * The widget's reconciliation is expressed purely as Checkbox intent +
- * disabled state — no per-row text. `reconcileLocaleState` is the pure heart
- * of that mapping; the four cells below are the full truth table from
- * docs/08-internationalization/index.md.
- */
-describe('reconcileLocaleState', () => {
-    it('ledger-complete + advertised → green, enabled (advertised & complete)', () => {
-        expect(reconcileLocaleState(true, true)).toEqual({ intent: 'success', disabled: false });
-    });
-    it('ledger-complete + not advertised → green, enabled (invitation to advertise)', () => {
-        expect(reconcileLocaleState(false, true)).toEqual({ intent: 'success', disabled: false });
-    });
-    it('not complete + advertised → amber, enabled (advertising an incomplete locale)', () => {
-        // The ⚠ row: surfaced as `warning` and kept enabled so the editor can
-        // uncheck to resolve the over-advertisement.
-        expect(reconcileLocaleState(true, false)).toEqual({ intent: 'warning', disabled: false });
-    });
-    it('not complete + not advertised → gray, disabled (nothing to advertise)', () => {
-        expect(reconcileLocaleState(false, false)).toEqual({ intent: 'noeffect', disabled: true });
-    });
-    it('completeness drives green regardless of advertised state', () => {
-        // The ledger fact wins the colour when complete; only the disabled/amber
-        // distinction depends on the advertised flag.
-        expect(reconcileLocaleState(true, true).intent).toBe('success');
-        expect(reconcileLocaleState(false, true).intent).toBe('success');
-    });
-    it('only the not-complete + not-advertised cell is non-interactive', () => {
-        expect(reconcileLocaleState(true, true).disabled).toBe(false);
-        expect(reconcileLocaleState(false, true).disabled).toBe(false);
-        expect(reconcileLocaleState(true, false).disabled).toBe(false);
-        expect(reconcileLocaleState(false, false).disabled).toBe(true);
-    });
-});

package/dist/forms/available-locales-widget.jsx

@@ -1,63 +0,0 @@
-'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 { useCallback, useMemo } from 'react';
-import { useTranslation } from '@byline/i18n/react';
-import { Checkbox, Label } from '@byline/ui/react';
-import cx from 'clsx';
-import { reconcileLocaleState } from './available-locales-reconcile';
-import styles from './available-locales-widget.module.css';
-import { useFormContext, useSystemAvailableLocales } from './form-context';
-export { reconcileLocaleState } from './available-locales-reconcile';
-/**
- * System-managed `availableLocales` widget — the editorial "advertise these
- * content locales" control. Renders one checkbox per content locale in the
- * sidebar, directly below the path widget. The checked state reflects the
- * stored advertised set (`useSystemAvailableLocales`); each row's intent
- * reconciles that against the structural ledger fact (`availableVersionLocales`)
- * via {@link reconcileLocaleState}. Opt-in: nothing is advertised until the
- * editor checks a (green) locale.
- *
- * Stable override handles: `.byline-form-available-locales`,
- * `.byline-form-available-locales-list`.
- */
-export const AvailableLocalesWidget = ({ disabled: mutationsBlocked = false, contentLocales, availableVersionLocales, }) => {
-    const { t } = useTranslation('byline-admin');
-    const { setSystemAvailableLocales } = useFormContext();
-    const advertised = useSystemAvailableLocales();
-    const advertisedSet = useMemo(() => new Set(advertised), [advertised]);
-    const ledgerSet = useMemo(() => new Set(availableVersionLocales), [availableVersionLocales]);
-    const toggle = useCallback((code, checked) => {
-        if (mutationsBlocked)
-            return;
-        const next = new Set(advertised);
-        if (checked) {
-            next.add(code);
-        }
-        else {
-            next.delete(code);
-        }
-        setSystemAvailableLocales([...next]);
-    }, [mutationsBlocked, advertised, setSystemAvailableLocales]);
-    if (contentLocales.length === 0) {
-        return null;
-    }
-    return (<div className={cx('byline-form-available-locales', styles.container)}>
-      <Label id="available-locales" htmlFor="available-locales-group" label={t('availableLocalesWidget.label')}/>
-      <div id="available-locales-group" className={cx('byline-form-available-locales-list', styles.list)} role="group" aria-labelledby="label-for-available-locales" aria-describedby="available-locales-description">
-        {contentLocales.map(({ code, label }) => {
-            const checked = advertisedSet.has(code);
-            const { intent, disabled } = reconcileLocaleState(checked, ledgerSet.has(code));
-            return (<Checkbox key={code} id={`available-locale-${code}`} name={`__availableLocale_${code}__`} label={label} intent={intent} checked={checked} disabled={mutationsBlocked || disabled} onCheckedChange={(value) => toggle(code, value === true)}/>);
-        })}
-      </div>
-      <span id="available-locales-description" className={cx('byline-form-available-locales-sr-only', styles['sr-only'])}>
-        {t('availableLocalesWidget.srDescription')}
-      </span>
-    </div>);
-};