@byline/admin 6.0.0 → 6.0.2

package/src/modules/analytics/components/timeseries.tsx

@@ -124,6 +124,55 @@ export function buildAnalyticsColumns(
   })
 }
 
+/**
+ * Where the hover card sits relative to the plot box.
+ *
+ * `leftPercent` / `topPercent` are percentages of the plot rather than user
+ * -space units because the card is HTML laid over a stretched SVG: the plot
+ * is drawn `preserveAspectRatio="none"`, so anything measured in viewBox
+ * units would skew with the container width (the same reason the axis labels
+ * are HTML). Percentages survive the stretch.
+ */
+export interface AnalyticsHoverCardPlacement {
+  /** Horizontal centre of the hovered column, as a percentage of plot width. */
+  leftPercent: number
+  /** Top edge of the hovered column, as a percentage of plot height. */
+  topPercent: number
+  /**
+   * How the card lines up with `leftPercent`. Columns near a plot edge anchor
+   * that edge instead of centring, so the card never overhangs the chart.
+   */
+  align: 'start' | 'center' | 'end'
+  /**
+   * Which side of the column top the card occupies. A column tall enough that
+   * a card above it would clip the top of the plot takes the card below
+   * instead.
+   */
+  side: 'above' | 'below'
+}
+
+/** Distance from a plot edge, in percent, inside which the card anchors. */
+const CARD_EDGE_MARGIN = 15
+/** Bar tops above this percentage leave no room for a card above them. */
+const CARD_FLIP_THRESHOLD = 45
+
+/** Project one column's geometry into hover-card placement. */
+export function resolveHoverCardPlacement(column: AnalyticsColumn): AnalyticsHoverCardPlacement {
+  const leftPercent = ((column.hitX + column.hitWidth / 2) / VIEWBOX_WIDTH) * 100
+  const topPercent = (column.y / VIEWBOX_HEIGHT) * 100
+  return {
+    leftPercent,
+    topPercent,
+    align:
+      leftPercent < CARD_EDGE_MARGIN
+        ? 'start'
+        : leftPercent > 100 - CARD_EDGE_MARGIN
+          ? 'end'
+          : 'center',
+    side: topPercent < CARD_FLIP_THRESHOLD ? 'below' : 'above',
+  }
+}
+
 export interface AnalyticsTimeseriesProps {
   days: readonly AnalyticsSummaryDay[]
   granularity: AnalyticsChartGranularity
@@ -159,6 +208,24 @@ export function AnalyticsTimeseries({
       ? t('analytics.stats.dailyUniques')
       : t('analytics.stats.summedDailyUniques')
   const active = hovered == null ? undefined : buckets[hovered]
+  const activePlacement =
+    hovered == null || columns[hovered] == null
+      ? undefined
+      : resolveHoverCardPlacement(columns[hovered])
+
+  // The hover card stays mounted so it can transition in and out — an element
+  // that mounts already-visible has no previous state to animate from, which
+  // is why a transition alone would still pop. Retaining the last hovered
+  // bucket keeps its figures on screen through the fade-out, rather than
+  // blanking the card the instant the pointer leaves.
+  const lastShown = useRef<{
+    bucket: AnalyticsChartBucket
+    placement: AnalyticsHoverCardPlacement
+  } | null>(null)
+  if (active != null && activePlacement != null) {
+    lastShown.current = { bucket: active, placement: activePlacement }
+  }
+  const shown = lastShown.current
   const readBucket = (bucket: AnalyticsChartBucket) =>
     [
       formatBucket(bucket),
@@ -206,47 +273,93 @@ export function AnalyticsTimeseries({
       onKeyDown={trackKey}
       onBlur={() => setHovered(null)}
     >
-      <svg
-        ref={plot}
-        className={cx('byline-analytics-chart', styles.chart)}
-        viewBox={`0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`}
-        preserveAspectRatio="none"
-        aria-hidden="true"
-      >
-        <title>{t('analytics.chart.views')}</title>
-        {[0.5, 1].map((fraction) => (
-          <line
-            key={fraction}
-            className={styles.gridline}
-            x1={0}
-            x2={VIEWBOX_WIDTH}
-            y1={VIEWBOX_HEIGHT - VIEWBOX_HEIGHT * fraction}
-            y2={VIEWBOX_HEIGHT - VIEWBOX_HEIGHT * fraction}
-            vectorEffect="non-scaling-stroke"
-          />
-        ))}
-        {columns.map((column) => (
-          <g
-            key={buckets[column.index]?.from}
-            className={cx(styles.column, hovered === column.index && styles.columnActive)}
-          >
-            <rect
-              className={styles.views}
-              x={column.x}
-              width={column.width}
-              y={column.y}
-              height={column.height}
-            />
-            <rect
-              className={styles.visitors}
-              x={column.insetX}
-              width={column.insetWidth}
-              y={column.insetY}
-              height={column.insetHeight}
+      {/* The plot and its hover card share a positioned box, so the card can
+          be placed against the plot's own edges rather than the whole block
+          (which also carries the axis and the readout). */}
+      <div className={cx('byline-analytics-plot', styles.plot)}>
+        <svg
+          ref={plot}
+          className={cx('byline-analytics-chart', styles.chart)}
+          viewBox={`0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`}
+          preserveAspectRatio="none"
+          aria-hidden="true"
+        >
+          <title>{t('analytics.chart.views')}</title>
+          {[0.5, 1].map((fraction) => (
+            <line
+              key={fraction}
+              className={styles.gridline}
+              x1={0}
+              x2={VIEWBOX_WIDTH}
+              y1={VIEWBOX_HEIGHT - VIEWBOX_HEIGHT * fraction}
+              y2={VIEWBOX_HEIGHT - VIEWBOX_HEIGHT * fraction}
+              vectorEffect="non-scaling-stroke"
             />
-          </g>
-        ))}
-      </svg>
+          ))}
+          {columns.map((column) => (
+            <g
+              key={buckets[column.index]?.from}
+              className={cx(styles.column, hovered === column.index && styles.columnActive)}
+            >
+              <rect
+                className={styles.views}
+                x={column.x}
+                width={column.width}
+                y={column.y}
+                height={column.height}
+              />
+              <rect
+                className={styles.visitors}
+                x={column.insetX}
+                width={column.insetWidth}
+                y={column.insetY}
+                height={column.insetHeight}
+              />
+            </g>
+          ))}
+        </svg>
+
+        {/* Sits over the hovered column. `aria-hidden` because the slider's
+            `aria-valuetext` already reads the same figures to assistive
+            technology — the card is the sighted equivalent of that readout,
+            not a second announcement. */}
+        {buckets.length > 0 && (
+          <div
+            className={cx(
+              'byline-analytics-hovercard',
+              styles.hoverCard,
+              shown != null && styles[shown.placement.align],
+              shown != null && (shown.placement.side === 'below' ? styles.below : styles.above),
+              active != null && styles.hoverCardVisible
+            )}
+            style={{
+              left: `${shown?.placement.leftPercent ?? 50}%`,
+              top: `${shown?.placement.topPercent ?? 100}%`,
+            }}
+            aria-hidden="true"
+          >
+            {shown != null && (
+              <>
+                <span className={styles.hoverCardDate}>{formatBucket(shown.bucket)}</span>
+                <span className={styles.hoverCardRow}>
+                  <span className={cx(styles.keyLine, styles.keyViews)} />
+                  <span className={styles.hoverCardLabel}>{t('analytics.stats.views')}</span>
+                  <span className={styles.hoverCardValue}>
+                    {numbers.format(shown.bucket.views)}
+                  </span>
+                </span>
+                <span className={styles.hoverCardRow}>
+                  <span className={cx(styles.keyLine, styles.keyVisitors)} />
+                  <span className={styles.hoverCardLabel}>{visitorLabel(shown.bucket)}</span>
+                  <span className={styles.hoverCardValue}>
+                    {numbers.format(shown.bucket.visitors)}
+                  </span>
+                </span>
+              </>
+            )}
+          </div>
+        )}
+      </div>
 
       {/* HTML axis labels remain undistorted while the SVG stretches. */}
       <div className={cx('byline-analytics-axis', styles.axis)} aria-hidden="true">

package/dist/exports-parity.test.node.js

@@ -1,37 +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
- */
-/**
- * Guard against `publishConfig.exports` drift.
- *
- * `@byline/admin` carries a `publishConfig.exports` block that npm uses to
- * **override** the top-level `exports` at publish time. The workspace and dev
- * builds resolve through the top-level `exports` (or source), so a subpath
- * added there but forgotten in `publishConfig.exports` typechecks and builds
- * locally yet is **missing from the published package** — surfacing only as a
- * downstream consumer's build error ("X is not exported …"). That is exactly
- * how `./admin-activity` slipped through in v3.11.0.
- *
- * This test fails the moment the two blocks drift, so the gap is caught in
- * `pnpm test` / CI rather than in a production Docker build.
- */
-import { readFileSync } from 'node:fs';
-import { dirname, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { describe, expect, it } from 'vitest';
-const pkgPath = resolve(dirname(fileURLToPath(import.meta.url)), '../package.json');
-const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'));
-describe('package.json export parity', () => {
-    it('every top-level export subpath is also declared in publishConfig.exports', () => {
-        const publishExports = pkg.publishConfig?.exports;
-        // If there is no override, the top-level exports ship as-is — nothing to check.
-        if (publishExports == null)
-            return;
-        const missing = Object.keys(pkg.exports).filter((key) => !(key in publishExports));
-        expect(missing, `publishConfig.exports is missing subpath(s) present in the top-level exports: ${missing.join(', ')}. The published package would not expose them — add them to BOTH blocks.`).toEqual([]);
-    });
-});

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

@@ -1,209 +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 { useEffect, useState } from 'react';
-import { useTranslation } from '@byline/i18n/react';
-import { DraggableSortable, IconButton, moveItem, PlusIcon } from '@byline/ui/react';
-import cx from 'clsx';
-import { sliceFieldAdmin } from '../../fields/field-admin';
-import { defaultScalarForField } from '../../fields/field-helpers';
-import { FieldRenderer } from '../../fields/field-renderer';
-import { SortableItem, StaticItem } from '../../fields/sortable-item';
-import { useFormContext } from '../../forms/form-context';
-import { hasExistingIdTargets } from '../../forms/nested-path';
-import { moveRepeatingItems, repeatingItemId, repeatingItemPath } from '../../forms/repeating-items';
-import styles from './array-field.module.css';
-// ---------------------------------------------------------------------------
-// ArrayField — renders `type: 'array'` fields. Each item renders every child
-// field declared in the array's `fields` (value fields and/or groups, in any
-// combination). Supports D&D.
-// ---------------------------------------------------------------------------
-export const ArrayField = ({ field, defaultValue, path, disableSorting = false, contentLocale, fieldAdmin, }) => {
-    const { appendPatch, getFieldValue, getFieldValues, removePendingUploadsUnder, setFieldStore } = useFormContext();
-    const { t } = useTranslation('byline-admin');
-    const [items, setItems] = useState([]);
-    useEffect(() => {
-        // Prefer the live form-store value over `defaultValue` when seeding the
-        // rendered list. The store lives in FormProvider — above the tab layout —
-        // so it survives this field unmounting/remounting as the editor switches
-        // tabs; `defaultValue` is only the initial seed and is empty in create
-        // mode. Re-seeding from `defaultValue` on remount would drop items the
-        // editor had already added on an earlier visit to this tab.
-        const storeValue = getFieldValue(path);
-        const source = Array.isArray(storeValue) ? storeValue : defaultValue;
-        if (Array.isArray(source)) {
-            setItems(source.map((item) => ({
-                id: item && typeof item === 'object' && '_id' in item
-                    ? String(item._id)
-                    : item && typeof item === 'object' && 'id' in item
-                        ? String(item.id)
-                        : crypto.randomUUID(),
-                data: item,
-            })));
-        }
-        else {
-            setItems([]);
-        }
-    }, [defaultValue, getFieldValue, path]);
-    const handleDragEnd = ({ moveFromIndex, moveToIndex, }) => {
-        const currentArray = (getFieldValue(path) ?? defaultValue);
-        if (!Array.isArray(currentArray))
-            return;
-        const move = moveRepeatingItems(currentArray, moveFromIndex, moveToIndex);
-        if (move == null)
-            return;
-        setItems((prev) => moveItem(prev, move.fromIndex, move.toIndex));
-        setFieldStore(path, move.items);
-        appendPatch({
-            kind: 'array.move',
-            path,
-            itemId: move.itemId,
-            toIndex: move.toIndex,
-        });
-    };
-    const handleAddItem = async (atIndex) => {
-        const childFields = field.fields ?? [];
-        if (childFields.length === 0)
-            return;
-        const newId = crypto.randomUUID();
-        // Build a new item with default values for ALL child fields.
-        // Assign the stable `_id` client-side — exactly like BlocksField's
-        // handleAddItem — so the item is patch-addressable (move / remove by
-        // `_id`) within the same editing session, before any server write has
-        // assigned identity. The storage layer persists `_id` via store_meta.
-        const newItem = { _id: newId };
-        for (const childField of childFields) {
-            if (childField.type === 'group' && childField.fields && childField.fields.length > 0) {
-                // Group child — build a nested object with defaults for each inner field
-                const groupObj = {};
-                for (const innerField of childField.fields) {
-                    groupObj[innerField.name] = await defaultScalarForField(innerField, getFieldValues);
-                }
-                newItem[childField.name] = groupObj;
-            }
-            else {
-                newItem[childField.name] = await defaultScalarForField(childField, getFieldValues);
-            }
-        }
-        // Defaults may resolve asynchronously. If an enclosing stable-id item was
-        // removed in the meantime, do not append a structural patch that would
-        // recreate that missing parent on the server.
-        if (!hasExistingIdTargets(getFieldValues(), path))
-            return;
-        const currentArray = (getFieldValue(path) ?? defaultValue);
-        const insertAt = atIndex != null ? atIndex : currentArray ? currentArray.length : 0;
-        const newItemWrapper = { id: newId, data: newItem };
-        setItems((prev) => {
-            const next = [...prev];
-            next.splice(insertAt, 0, newItemWrapper);
-            return next;
-        });
-        appendPatch({
-            kind: 'array.insert',
-            path: path,
-            index: insertAt,
-            item: newItem,
-        });
-        const newArrayValue = currentArray ? [...currentArray] : [];
-        newArrayValue.splice(insertAt, 0, newItem);
-        setFieldStore(path, newArrayValue);
-    };
-    const handleRemoveItem = (index) => {
-        const currentArray = (getFieldValue(path) ?? defaultValue);
-        if (!Array.isArray(currentArray) || index < 0 || index >= currentArray.length)
-            return;
-        const item = currentArray[index];
-        const itemPath = repeatingItemPath(path, item, index);
-        setItems((prev) => prev.filter((_, i) => i !== index));
-        removePendingUploadsUnder(itemPath);
-        appendPatch({
-            kind: 'array.remove',
-            path: path,
-            itemId: repeatingItemId(item) ?? String(index),
-        });
-        const newArrayValue = [...currentArray];
-        newArrayValue.splice(index, 1);
-        setFieldStore(path, newArrayValue);
-    };
-    const handleInsertBelow = (index) => {
-        void handleAddItem(index + 1);
-    };
-    const renderItem = (itemWrapper, index) => {
-        const item = itemWrapper.data;
-        const arrayElementPath = repeatingItemPath(path, item, index);
-        if (!item || typeof item !== 'object')
-            return null;
-        const childFields = field.fields ?? [];
-        if (childFields.length === 0)
-            return null;
-        // Render ALL child fields defined in the array's field schema
-        const innerBody = childFields.map((childField) => {
-            const initial = item[childField.name];
-            if (childField.type === 'group' && childField.fields && childField.fields.length > 0) {
-                // Group child — render its inner fields with the group's sub-object.
-                // fieldAdmin slices one level per structural hop: the group's
-                // descendant map first, then each inner field's own slice.
-                const groupData = initial && typeof initial === 'object' ? initial : {};
-                const groupAdmin = sliceFieldAdmin(fieldAdmin, childField.name);
-                return (<div key={childField.name} className={cx('byline-field-array-group-fields', styles['group-fields'])}>
-            {childField.label && (<h4 className={cx('byline-field-array-group-header', styles['group-header'])}>
-                {childField.label}
-              </h4>)}
-            {childField.fields.map((innerField) => (<FieldRenderer key={innerField.name} field={innerField} defaultValue={groupData[innerField.name]} basePath={`${arrayElementPath}.${childField.name}`} disableSorting={true} contentLocale={contentLocale} components={groupAdmin?.[innerField.name]?.components} editor={groupAdmin?.[innerField.name]?.editor} fieldAdmin={sliceFieldAdmin(groupAdmin, innerField.name)}/>))}
-          </div>);
-            }
-            return (<FieldRenderer key={childField.name} field={childField} defaultValue={initial} basePath={arrayElementPath} disableSorting={true} contentLocale={contentLocale} components={fieldAdmin?.[childField.name]?.components} editor={fieldAdmin?.[childField.name]?.editor} fieldAdmin={sliceFieldAdmin(fieldAdmin, childField.name)}/>);
-        });
-        // Per-item label: the array label plus a 1-based position, so items
-        // read "Questions 1", "Questions 2" rather than all repeating the bare
-        // array label.
-        const itemLabel = `${field.label ?? field.name} ${index + 1}`;
-        // `disableSorting` removes only the drag affordance. Structural editing
-        // (add-below / remove / collapse) is always available — StaticItem is
-        // the grip-less sibling of SortableItem (see sortable-item.tsx for why
-        // it is a separate component rather than a prop).
-        if (disableSorting) {
-            return (<StaticItem key={itemWrapper.id} label={itemLabel} onAddBelow={() => handleInsertBelow(index)} onRemove={() => handleRemoveItem(index)}>
-          <div className={cx('byline-field-array-group-fields', styles['group-fields'])}>
-            {innerBody}
-          </div>
-        </StaticItem>);
-        }
-        return (<SortableItem key={itemWrapper.id} id={itemWrapper.id} label={itemLabel} onAddBelow={() => handleInsertBelow(index)} onRemove={() => handleRemoveItem(index)}>
-        <div className={cx('byline-field-array-group-fields', styles['group-fields'])}>
-          {innerBody}
-        </div>
-      </SortableItem>);
-    };
-    // The add-row renders in both branches — structural editing does not
-    // depend on sortability.
-    const addRow = (<div className={cx('byline-field-array-add-row', styles['add-row'])}>
-      <IconButton onClick={() => {
-            void handleAddItem();
-        }} aria-label={t('fields.array.addItemAriaLabel')}>
-        <PlusIcon />
-      </IconButton>
-      {/* Text-styled button so the label is clickable too. Removed from
-            the tab order (tabIndex -1) — the IconButton is the single
-            keyboard/screen-reader control for this action. */}
-      <button type="button" tabIndex={-1} onClick={() => {
-            void handleAddItem();
-        }} className={cx('byline-field-array-add-label', styles['add-label'])}>
-        {t('fields.array.addItem')}
-      </button>
-    </div>);
-    return (<div className={`byline-field-array ${field.name}`}>
-      {field.label && (<h3 className={cx('byline-field-array-title', styles.title)}>{field.label}</h3>)}
-      {disableSorting ? (<div className={cx('byline-field-array-stack', styles.stack)}>
-          {items.map((item, index) => renderItem(item, index))}
-          {addRow}
-        </div>) : (<DraggableSortable ids={items.map((i) => i.id)} onDragEnd={handleDragEnd} className={cx('byline-field-array-stack', styles.stack)}>
-          {items.map((item, index) => renderItem(item, index))}
-          {addRow}
-        </DraggableSortable>)}
-    </div>);
-};