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

package/dist/view/ContentHealthView.d.ts

@@ -0,0 +1,9 @@
+import type { AdminViewServerProps } from "payload";
+import "../styles/view.css";
+/**
+ * The work list: every finding with filters on check, collection and locale. Each row opens the
+ * document in the finding's locale with the field selected; where the editor assistant works, a
+ * second link opens it with a ready prompt too. Scans once per visit; the filters work in the browser.
+ * Only for visitors who may use Admin: Payload leaves custom views public.
+ */
+export declare function ContentHealthView({ initPageResult, params, searchParams, }: AdminViewServerProps): Promise<import("react").JSX.Element>;

package/dist/view/ContentHealthView.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DefaultTemplate } from "@payloadcms/next/templates";
+import { Gutter, SetStepNav } from "@payloadcms/ui";
+import { redirect } from "next/navigation";
+import { ASK, CHECK_LABELS, findingDetail, LIST_COPY, uiLanguage } from "../copy.js";
+import { accessRedirect, assistantCollections, editURL, readFilters } from "../links.js";
+import { scanContentHealth } from "../scan.js";
+import { CHECK_IDS } from "../types.js";
+import { WorkList } from "./WorkList.js";
+import "../styles/view.css";
+/**
+ * The work list: every finding with filters on check, collection and locale. Each row opens the
+ * document in the finding's locale with the field selected; where the editor assistant works, a
+ * second link opens it with a ready prompt too. Scans once per visit; the filters work in the browser.
+ * Only for visitors who may use Admin: Payload leaves custom views public.
+ */
+export async function ContentHealthView({ initPageResult, params, searchParams, }) {
+    const { req, locale, permissions, visibleEntities } = initPageResult;
+    const denied = accessRedirect({
+        routes: { admin: req.payload.config.routes.admin, ...req.payload.config.admin.routes },
+        canAccessAdmin: Boolean(permissions?.canAccessAdmin),
+        signedIn: Boolean(req.user),
+        searchParams,
+    });
+    if (denied) {
+        redirect(denied);
+    }
+    const language = uiLanguage(req.i18n?.language);
+    const copy = LIST_COPY[language];
+    const { config } = req.payload;
+    const adminRoute = config.routes.admin;
+    const result = await scanContentHealth({ payload: req.payload, user: req.user });
+    const withAssistant = new Set(assistantCollections(config.admin?.custom));
+    const rows = sortFindings(result.findings).map((finding, index) => {
+        const detail = findingDetail(language, finding);
+        return {
+            key: `${index}:${finding.collection}:${finding.id}:${finding.check}:${finding.path}:${finding.locale ?? ""}`,
+            check: finding.check,
+            checkLabel: CHECK_LABELS[language][finding.check],
+            collection: finding.collection,
+            title: finding.title,
+            draft: finding.status === "draft",
+            href: editURL(adminRoute, finding),
+            ...(finding.locale ? { locale: finding.locale } : {}),
+            ...(detail ? { detail } : {}),
+            ...(withAssistant.has(finding.collection)
+                ? { askHref: editURL(adminRoute, finding, ASK[language][finding.check](finding)) }
+                : {}),
+        };
+    });
+    const checks = result.checks.map((check) => ({
+        value: check,
+        label: CHECK_LABELS[language][check],
+    }));
+    const collections = Object.keys(result.documents).map((slug) => ({
+        value: slug,
+        label: label(req.payload.collections[slug]?.config.labels?.plural, language) ?? slug,
+    }));
+    const locales = config.localization
+        ? config.localization.locales.map((locale) => ({
+            value: locale.code,
+            label: label(locale.label, language) ?? locale.code,
+        }))
+        : [];
+    // Payload wraps only its own views in the Admin shell; a custom view brings nav and header itself.
+    return (_jsx(DefaultTemplate, { i18n: req.i18n, locale: locale, params: params, payload: req.payload, permissions: permissions, req: req, searchParams: searchParams, user: req.user ?? undefined, visibleEntities: visibleEntities, children: _jsxs(Gutter, { className: "content-health-list", children: [_jsx(SetStepNav, { nav: [{ label: copy.title }] }), _jsxs("header", { className: "content-health-list__header", children: [_jsx("h1", { children: copy.title }), _jsx("p", { className: "content-health-list__intro", children: copy.intro })] }), _jsx(WorkList, { checks: checks, collections: collections, initialFilters: readFilters(searchParams), language: language, locales: locales, rows: rows }), result.problems.length ? (_jsx("ul", { className: "content-health-list__problems", children: result.problems.map((problem) => (_jsx("li", { children: problem }, problem))) })) : null] }) }));
+}
+/** By check, then document, then locale, so a document's locales sit together. */
+function sortFindings(findings) {
+    return [...findings].sort((a, b) => CHECK_IDS.indexOf(a.check) - CHECK_IDS.indexOf(b.check) ||
+        a.collection.localeCompare(b.collection) ||
+        a.title.localeCompare(b.title) ||
+        String(a.id).localeCompare(String(b.id)) ||
+        a.path.localeCompare(b.path) ||
+        (a.locale ?? "").localeCompare(b.locale ?? ""));
+}
+/** A config label: a string, or one per language. Functions are left to Payload. */
+function label(value, language) {
+    if (typeof value === "string") {
+        return value;
+    }
+    if (value && typeof value === "object") {
+        const labels = value;
+        const text = labels[language] ?? labels.en ?? Object.values(labels)[0];
+        return typeof text === "string" ? text : undefined;
+    }
+    return undefined;
+}

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.1",
   "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"
   },