@simmalugnt-se/payload-content-health 0.1.0 → 0.2.0

package/dist/view/WorkList.d.ts

@@ -0,0 +1,34 @@
+import { type UiLanguage } from "../copy.ts";
+import { type ListFilters } from "../links.ts";
+import type { CheckId } from "../types.ts";
+export type WorkListOption = {
+    value: string;
+    label: string;
+};
+/** One finding, ready to show: labels and links are made on the server. */
+export type WorkListRow = {
+    key: string;
+    check: CheckId;
+    checkLabel: string;
+    collection: string;
+    title: string;
+    locale?: string;
+    detail?: string;
+    draft: boolean;
+    /** The document in the finding's locale with the field selected. */
+    href: string;
+    /** The same with a prompt for the editor assistant; only where the assistant works. */
+    askHref?: string;
+};
+/**
+ * The findings with filters on check, collection and locale. Filters apply in the browser and are
+ * kept in the address, so the view can be linked to and reloaded with them.
+ */
+export declare function WorkList({ checks, collections, initialFilters, language, locales, rows, }: {
+    checks: WorkListOption[];
+    collections: WorkListOption[];
+    initialFilters: ListFilters;
+    language: UiLanguage;
+    locales: WorkListOption[];
+    rows: WorkListRow[];
+}): import("react").JSX.Element;

package/dist/view/WorkList.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Link } from "@payloadcms/ui";
+import { useMemo, useState } from "react";
+import { LIST_COPY } from "../copy.js";
+import { filterQuery, matchesFilters } from "../links.js";
+/**
+ * The findings with filters on check, collection and locale. Filters apply in the browser and are
+ * kept in the address, so the view can be linked to and reloaded with them.
+ */
+export function WorkList({ checks, collections, initialFilters, language, locales, rows, }) {
+    const copy = LIST_COPY[language];
+    const [filters, setFilters] = useState(initialFilters);
+    const shown = useMemo(() => rows.filter((row) => matchesFilters(row, filters)), [rows, filters]);
+    const documents = new Set(shown.map((row) => row.href.split("?")[0])).size;
+    const filtered = Boolean(filters.check || filters.collection || filters.locale);
+    const update = (next) => {
+        setFilters(next);
+        const query = filterQuery(next);
+        window.history.replaceState(window.history.state, "", `${window.location.pathname}${query ? `?${query}` : ""}`);
+    };
+    return (_jsxs("div", { className: "content-health-list__body", children: [_jsxs("div", { className: "content-health-list__filters", children: [_jsx(Filter, { label: copy.check, all: copy.all, onChange: (check) => update({ ...filters, check: check }), options: checks, value: filters.check }), collections.length > 1 ? (_jsx(Filter, { label: copy.collection, all: copy.all, onChange: (collection) => update({ ...filters, collection }), options: collections, value: filters.collection })) : null, locales.length > 1 ? (_jsx(Filter, { label: copy.locale, all: copy.all, onChange: (locale) => update({ ...filters, locale }), options: locales, value: filters.locale })) : null, filtered ? (_jsx(Button, { buttonStyle: "subtle", margin: false, onClick: () => update({}), size: "small", children: copy.clear })) : null] }), _jsx("p", { className: "content-health-list__summary", "aria-live": "polite", children: shown.length ? copy.summary(shown.length, documents) : null }), shown.length ? (_jsx("ul", { className: "content-health-list__rows", children: shown.map((row) => (_jsxs("li", { className: "content-health-list__row", children: [_jsxs("div", { className: "content-health-list__what", children: [_jsx("span", { className: "content-health-list__check", children: row.checkLabel }), row.detail ? (_jsx("span", { className: "content-health-list__detail", children: row.detail })) : null] }), _jsxs("div", { className: "content-health-list__document", children: [_jsx(Link, { href: row.href, prefetch: false, children: row.title }), row.locale ? (_jsx("span", { className: "content-health-list__pill", children: row.locale })) : null, row.draft ? (_jsx("span", { className: "content-health-list__pill content-health-list__pill--draft", children: copy.draft })) : null] }), _jsx("div", { className: "content-health-list__actions", children: row.askHref ? (_jsx(Button, { buttonStyle: "secondary", el: "link", margin: false, size: "small", url: row.askHref, children: copy.fix })) : null })] }, row.key))) })) : (_jsx("p", { className: "content-health-list__empty", children: filtered ? copy.noneFiltered : copy.none }))] }));
+}
+function Filter({ all, label, onChange, options, value, }) {
+    return (_jsxs("label", { className: "content-health-list__filter", children: [_jsx("span", { children: label }), _jsxs("select", { onChange: (event) => onChange(event.target.value || undefined), value: value ?? "", children: [_jsx("option", { value: "", children: all }), options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] })] }));
+}

package/dist/widget/ContentHealthWidget.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { formatAdminURL } from "payload/shared";
-import { COPY, STATUS, TILE_LABELS, uiLanguage } from "../copy.js";
+import { COPY, findingDetail, STATUS, TILE_LABELS, uiLanguage } from "../copy.js";
 import { checkStats, countDocuments } from "../group.js";
+import { editURL, listURL } from "../links.js";
 import { scanContentHealth } from "../scan.js";
 import { CHECK_IDS } from "../types.js";
 import { Ring } from "./Ring.js";
@@ -39,23 +39,18 @@ function CheckTile({ adminRoute, language, stat, }) {
         : stat.failing
             ? STATUS[language][stat.check](stat.checked - stat.failing, stat.checked)
             : copy.checkPasses;
-    return (_jsxs("li", { className: "content-health__tile", children: [_jsxs("div", { className: "content-health__tile-head", children: [_jsx(Ring, { className: "content-health__ring", failing: stat.failing, label: status, total: stat.checked }), _jsxs("div", { children: [_jsx("h3", { className: "content-health__tile-title", children: TILE_LABELS[language][stat.check] }), _jsx("p", { className: "content-health__tile-status", children: status })] })] }), stat.documents.length ? (_jsxs("ul", { className: "content-health__rows", children: [stat.documents.slice(0, ROWS_PER_CHECK).map((row) => (_jsxs("li", { className: "content-health__row", children: [_jsx("a", { href: editURL(adminRoute, row.findings[0]), children: row.title }), row.findings.map((finding) => (_jsxs("span", { className: "content-health__locale", children: [finding.locale ? (_jsx("a", { className: "content-health__pill", href: editURL(adminRoute, finding), children: finding.locale })) : null, _jsx(Detail, { copy: copy, finding: finding })] }, finding.locale ?? "")))] }, `${row.collection}:${row.id}`))), stat.documents.length > ROWS_PER_CHECK ? (_jsx("li", { className: "content-health__more", children: copy.more(stat.documents.length - ROWS_PER_CHECK) })) : null] })) : null] }));
+    return (_jsxs("li", { className: "content-health__tile", children: [_jsxs("div", { className: "content-health__tile-head", children: [_jsx(Ring, { className: "content-health__ring", failing: stat.failing, label: status, total: stat.checked }), _jsxs("div", { children: [_jsx("h3", { className: "content-health__tile-title", children: TILE_LABELS[language][stat.check] }), _jsx("p", { className: "content-health__tile-status", children: status })] })] }), stat.documents.length ? (_jsxs("ul", { className: "content-health__rows", children: [stat.documents.slice(0, ROWS_PER_CHECK).map((row) => (_jsx(FindingRow, { adminRoute: adminRoute, language: language, row: row }, `${row.collection}:${row.id}`))), stat.documents.length > ROWS_PER_CHECK ? (_jsx("li", { className: "content-health__more", children: _jsx("a", { href: listURL(adminRoute, { check: stat.check }), children: copy.more(stat.documents.length - ROWS_PER_CHECK) }) })) : null] })) : null] }));
 }
-function Detail({ copy, finding }) {
-    const { heading, length, words } = finding;
-    const text = length
-        ? copy.length(length.actual, length.min, length.max)
-        : words
-            ? copy.words(words.actual, words.min)
-            : heading?.previous !== undefined
-                ? copy.headingSkip(heading.previous, heading.level)
-                : heading?.count
-                    ? copy.h1Count(heading.count)
-                    : undefined;
-    return text ? _jsx("span", { className: "content-health__detail", children: text }) : null;
-}
-function editURL(adminRoute, finding) {
-    const path = `/collections/${finding.collection}/${encodeURIComponent(String(finding.id))}`;
-    const url = formatAdminURL({ adminRoute, path });
-    return finding.locale ? `${url}?locale=${encodeURIComponent(finding.locale)}` : url;
+/**
+ * A document on its own line, then its locales: one per line when they carry details (lengths, word
+ * counts), otherwise side by side.
+ */
+function FindingRow({ adminRoute, language, row, }) {
+    const locales = row.findings.map((finding) => ({
+        finding,
+        detail: findingDetail(language, finding),
+    }));
+    const stacked = locales.some(({ detail }) => detail);
+    const shown = locales.filter(({ finding, detail }) => finding.locale || detail);
+    return (_jsxs("li", { className: "content-health__row", children: [_jsx("a", { href: editURL(adminRoute, row.findings[0]), children: row.title }), shown.length ? (_jsx("ul", { className: `content-health__locales${stacked ? " content-health__locales--stacked" : ""}`, children: shown.map(({ finding, detail }) => (_jsxs("li", { className: "content-health__locale", children: [finding.locale ? (_jsx("a", { className: "content-health__pill", href: editURL(adminRoute, finding), children: finding.locale })) : null, detail ? _jsx("span", { className: "content-health__detail", children: detail }) : null] }, finding.locale ?? ""))) })) : null] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simmalugnt-se/payload-content-health",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Content health checks and dashboard widgets for Payload Admin: alt texts, SEO fields and more",
   "keywords": [
     "payload",
@@ -34,20 +34,34 @@
       "import": "./dist/exports/rsc.js",
       "types": "./dist/exports/rsc.d.ts",
       "default": "./dist/exports/rsc.js"
+    },
+    "./client": {
+      "import": "./dist/exports/client.js",
+      "types": "./dist/exports/client.d.ts",
+      "default": "./dist/exports/client.js"
     }
   },
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
+    "@payloadcms/next": ">=3.90.2 <4",
+    "@payloadcms/ui": ">=3.90.2 <4",
+    "next": ">=16.2.6 <17",
     "payload": ">=3.90.2 <4",
-    "react": "^19.0.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@payloadcms/next": "3.90.2",
+    "@payloadcms/ui": "3.90.2",
     "@types/node": "^22",
     "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "next": "16.3.6",
     "payload": "3.90.2",
     "react": "19.2.8",
+    "react-dom": "19.2.8",
     "tsx": "^4.21.0",
     "typescript": "5.9.3"
   },