@godxjp/ui 30.8.0 → 31.0.2

package/scripts/ui-audit.mjs

@@ -85,8 +85,6 @@ function changedFiles() {
     };
   }
 
-
-
   const parts = [
     run(["diff", "--name-only", "--diff-filter=ACMR", mergeBase.trim(), "--"]),
     run(["diff", "--name-only", "--diff-filter=ACMR", "--cached"]),
@@ -1895,6 +1893,105 @@ for (const dir of SCAN_DIRS) {
         snippet: match[0].replace(/\s+/g, " ").slice(0, 120),
       });
     }
+
+    /*
+     * THE LAYER ABOVE THE FIELD (gh#998). `bare-control-needs-formfield` stops a control without a
+     * FormField; nothing stopped a FormField without a Form, or a Form without a width, or a form
+     * that belongs on a page stuffed into a Dialog. godx-mailer hit all four in one day. Validated
+     * on the reporter's own files before and after its fixes: every defect caught before, none in
+     * the fixed files except one the fix missed (four FormFields in a hand-rolled wrapping Flex).
+     */
+    if (isJsx) {
+      const lineAt = (i) => scanContent.slice(0, i).split("\n").length;
+      /*
+       * TWO OR MORE FormFields under ONE parent with no <Form> above them. That is the shape of
+       * every defect in the report — a hand-rolled <Flex> row of fields, a long form in a Dialog, a
+       * page of fields each choosing its own layout. A LONE field is not: a search box, the
+       * ConfirmDialog's type-to-confirm input, a field component whose whole output is one
+       * FormField. Flagging those made this repo's own library code and 29 docs pages red on a
+       * rule whose defect they do not have.
+       *
+       * The walk keeps a stack of open JSX elements so "same parent" is structural. `(?<![\w.$])`
+       * skips a generic argument (`useRef<HTMLDivElement>`), which is preceded by an identifier.
+       */
+      const stack = [];
+      const bareByParent = new Map();
+      let formDepth = 0;
+      for (const m of scanContent.matchAll(
+        /(?<![\w.$])<(\/?)([A-Za-z][\w.]*)(?=[\s>/])([^<>]*?(?:\{[^{}]*\}[^<>]*?)*)(\/?)>/g,
+      )) {
+        const [, close, tag, , selfClose] = m;
+        if (close) {
+          for (let i = stack.length - 1; i >= 0; i -= 1) {
+            if (stack[i].tag === tag) {
+              stack.length = i;
+              break;
+            }
+          }
+          if (tag === "Form") formDepth = Math.max(0, formDepth - 1);
+          continue;
+        }
+        if (tag === "FormField" && formDepth === 0) {
+          const parent = stack.at(-1)?.index ?? -1;
+          (bareByParent.get(parent) ?? bareByParent.set(parent, []).get(parent)).push(m.index);
+        }
+        if (selfClose) continue;
+        stack.push({ tag, index: m.index });
+        if (tag === "Form") formDepth += 1;
+      }
+      for (const group of bareByParent.values()) {
+        if (group.length < 2) continue;
+        for (const at of group) {
+          const lineNo = lineAt(at);
+          if (suppressed("formfield-needs-form", lineNo - 1)) continue;
+          findings.push({
+            file: rel,
+            line: lineNo,
+            rule: "formfield-needs-form",
+            severity: "error",
+            standard: "@godxjp/ui Form (gh#998)",
+            message: `${group.length} FormFields under one parent with no <Form> around them. <Form layout="horizontal" labelWidth controlWidth> is what lines fields up — without it each form picks its own layout, and a row of fields in a hand-rolled <Flex> drops the required field's label out of line. Wrap them in <Form>; a row that belongs together is <SpaceCompact> or <Form columns>. A lone field (a search box, a type-to-confirm input) is not flagged.`,
+            snippet: scanContent.slice(at, at + 120).replace(/\s+/g, " "),
+          });
+        }
+      }
+
+      for (const m of scanContent.matchAll(/<(Dialog\.Body|DialogBody)(?=[\s>])[\s\S]*?<\/\1>/g)) {
+        const count = (m[0].match(/<FormField(?=[\s>/])/g) ?? []).length;
+        if (count < 3) continue;
+        const lineNo = lineAt(m.index);
+        if (suppressed("dialog-form-too-big", lineNo - 1)) continue;
+        findings.push({
+          file: rel,
+          line: lineNo,
+          rule: "dialog-form-too-big",
+          severity: "error",
+          standard: "@godxjp/ui form placement (gh#998)",
+          message: `${count} FormFields in a ${m[1]} — a form this size is a page of its own (its own route, back button, and room to scroll), not a modal. Keep dialogs for a confirmation or one or two fields. A Sheet is not flagged: a side drawer is where an advanced filter or an edit form belongs (antd Drawer).`,
+          snippet: m[0].slice(0, 120).replace(/\s+/g, " "),
+        });
+      }
+
+      for (const m of scanContent.matchAll(/<FormField(?=[\s>])([^>]*)>([\s\S]*?)<\/FormField>/g)) {
+        if (!/<Select(?=[\s>/])/.test(m[2]) || /controlWidth=/.test(m[1])) continue;
+        const before = scanContent.slice(0, m.index);
+        const lastForm = [...before.matchAll(/<Form(?=[\s>])([^>]*)>/g)].at(-1);
+        const insideForm = lastForm && before.lastIndexOf("</Form>") < lastForm.index;
+        if (insideForm && /controlWidth=/.test(lastForm[1])) continue;
+        const lineNo = lineAt(m.index);
+        if (suppressed("select-width-hint", lineNo - 1)) continue;
+        findings.push({
+          file: rel,
+          line: lineNo,
+          rule: "select-width-hint",
+          severity: "warn",
+          standard: "GOV.UK Design System · text input width",
+          message:
+            "A <Select> in a FormField with no controlWidth on the field or its <Form> stretches to the full column — a two-option select as wide as an address line. Size the control for its content (`controlWidth` on the FormField, or once on the Form). https://design-system.service.gov.uk/components/text-input/",
+          snippet: scanContent.slice(m.index, m.index + 120).replace(/\s+/g, " "),
+        });
+      }
+    }
   }
 }