@estiva-app/ui 0.48.0 → 0.50.0

package/README.md

@@ -79,6 +79,8 @@ instead. There are seven — six block, one warns:
   `className` or an inner box's class prop — a colour, a text size, a border, a
   corner, a shadow — and names the part's look props (`PART_LOOK_PROPS`). Only
   placement goes through (`PLACEMENT`), and `EmptyState` takes no padding.
+  A `Form` takes no layout of its own, and sits in no spaced box beside other
+  things: what comes before its fields goes inside it.
 - `estiva/no-handmade-header` refuses a column's header bar drawn by hand: a
   row first in a column, with its own side padding and a title, where the column
   fills its height or the row has a bar's height or hairline. It reads the
@@ -102,6 +104,12 @@ instead. There are seven — six block, one warns:
   `registry.json`, and the app's own exported components; the fix is to use
   the part. In the package the fix is to write the look once in `src/looks.ts`.
   A look written once as an exported `…_CLASSES` constant counts as a look too.
+- `estiva/no-field-outside-a-form` refuses a `Field`, `TextInput` or
+  `Textarea` with no `Form` around it in its file (the palette's
+  `CommandPaletteForm` is one), and names `Form`: without it nothing owns
+  sending the field. In a dialog that is `DialogShell` with a `Form`, never a
+  field inside `ConfirmDialog`. `EditableText` and `SearchInput` pass; a
+  component that draws fields for its caller's form says so with an escape.
 
 ```js
 // eslint.config.js — alongside your own rules

package/dist/DialogShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogShell.d.ts","sourceRoot":"","sources":["../src/DialogShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAS9C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,WAAW,gBAAgB;IAC/B;8CAC0C;IAC1C,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB;yDACqD;IACrD,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB;uCACmC;IACnC,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;IACnB,0GAA0G;IAC1G,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,KAAW,EAAE,KAAa,EAAE,EAAE,gBAAgB,+BAuG1J"}
+{"version":3,"file":"DialogShell.d.ts","sourceRoot":"","sources":["../src/DialogShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAS9C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,WAAW,gBAAgB;IAC/B;8CAC0C;IAC1C,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB;yDACqD;IACrD,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB;uCACmC;IACnC,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;IACnB,0GAA0G;IAC1G,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,KAAW,EAAE,KAAa,EAAE,EAAE,gBAAgB,+BAyG1J"}

package/dist/eslint/index.d.ts

@@ -5,6 +5,7 @@ export { OWNED_BEHAVIOURS, type OwnedBehaviour } from './no-rebuilt-behaviour';
 export { PART_LOOK_PROPS, PLACEMENT } from './no-restyled-part';
 export { PARTS_WITH_A_TITLE } from './no-native-title';
 export { MIN_COVER, MIN_SHARED } from './looks-of';
+export { FIELD_PARTS } from './no-field-outside-a-form';
 export { APP_RULE_IDS, PLUGIN_KEY };
 declare const plugin: {
     meta: {
@@ -23,6 +24,7 @@ declare const plugin: {
         'no-copied-look': import("eslint").Rule.RuleModule;
         'no-raw-element': import("eslint").Rule.RuleModule;
         'no-rebuilt-behaviour': import("eslint").Rule.RuleModule;
+        'no-field-outside-a-form': import("eslint").Rule.RuleModule;
     };
     configs: {
         recommended: Linter.Config;

package/dist/eslint/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eslint/index.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAW5C,OAAO,EAAE,YAAY,EAAE,UAAU,EAAoB,MAAM,YAAY,CAAA;AAEvE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAA;AAClG,OAAO,EAAE,gBAAgB,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC9E,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAIlD,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,CAAA;AAoDnC,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;aAGK;QAAE,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC,MAAM,CAAA;KAAE;CACrE,CAAA;AAEzB,wFAAwF;AACxF,eAAO,MAAM,gBAAgB,UAAmE,CAAA;AAoChG,eAAe,MAAM,CAAA;AAErB,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;IACpC;;;OAGG;IACH,QAAQ,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;CAC/D;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,IAAI,GAAE,SAAS,MAAM,EAAiB,GAAG,SAAS,CAmB1G"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eslint/index.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAY5C,OAAO,EAAE,YAAY,EAAE,UAAU,EAAoB,MAAM,YAAY,CAAA;AAEvE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAA;AAClG,OAAO,EAAE,gBAAgB,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC9E,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAIvD,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,CAAA;AAqDnC,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;aAGK;QAAE,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC,MAAM,CAAA;KAAE;CACrE,CAAA;AAEzB,wFAAwF;AACxF,eAAO,MAAM,gBAAgB,UAAmE,CAAA;AAqChG,eAAe,MAAM,CAAA;AAErB,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;IACpC;;;OAGG;IACH,QAAQ,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;CAC/D;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,IAAI,GAAE,SAAS,MAAM,EAAiB,GAAG,SAAS,CAmB1G"}

package/dist/eslint/index.js

@@ -218,6 +218,10 @@ var isFieldsLayout = (token) => {
   const { variants, utility } = splitClass(token);
   return !variants.some((variant) => REACHING_VARIANT.test(variant)) && FIELDS_LAYOUT.test(utility);
 };
+var isSpacing = (token) => {
+  const { variants, utility } = splitClass(token);
+  return !variants.some((variant) => REACHING_VARIANT.test(variant)) && /^(?:gap|gap-x|gap-y|space-x|space-y)-/.test(utility);
+};
 var isPadding = (token) => {
   const { variants, utility } = splitClass(token);
   return !variants.some((variant) => REACHING_VARIANT.test(variant)) && /^p[xytrblse]?-/.test(utility);
@@ -635,6 +639,7 @@ var noRestyledPart = {
       restyledStyle: "{{keys}} in the `style` of {{where}} changes how it looks. A part of @estiva-app/ui is placed from outside, never restyled, by class or by style: only space, size, flex and grid, and position pass in.{{use}} A look for what is around it goes on your own element around it.",
       emptyStatePadding: "{{classes}} pads {{where}}. EmptyState takes no padding (Katerina, 14 September): its room comes from the box its rows live in, so put the padding on that box.",
       formLayout: '{{classes}} lays out the fields of {{where}}. A Form places its own fields, 24px apart (Katerina, 28 September), so every form reads the same: remove it. A form that is not a list of fields (a field and its button, a composer) says `layout="free"` and lays itself out.',
+      formSpacedFromOutside: "{{classes}} on the box around `Form` spaces the form from what is beside it, so the gap above its first field is not the form\u2019s 24px. Put what is beside it inside the `Form`, as one block before the fields, and drop the box: the Form puts 24px between them (Katerina, 1 October; MoveDialog in Peek does this).",
       ...ESCAPE_MESSAGES
     }
   },
@@ -688,6 +693,26 @@ var noRestyledPart = {
       const where = binding.via && binding.via !== binding.part ? `\`${binding.via}\` (it hands its props to \`${binding.part}\`)` : `\`${binding.part}\``;
       context.report({ loc: at.loc, messageId: "restyledStyle", data: { keys: code([...new Set(keys)]), where, use } });
     };
+    const checkSpacedFromOutside = (opening) => {
+      const form = opening.parent;
+      const box = form?.parent;
+      if (form?.type !== "JSXElement" || box?.type !== "JSXElement") return;
+      const beside = children(box, "children").filter((node) => {
+        if (!node || node === form) return false;
+        if (node.type === "JSXText") return String(node.value).trim() !== "";
+        if (node.type === "JSXExpressionContainer") return child(node, "expression")?.type !== "JSXEmptyExpression";
+        return true;
+      });
+      if (!beside.length) return;
+      const boxOpening = child(box, "openingElement");
+      const spacing = children(boxOpening, "attributes").flatMap((attribute3) => {
+        if (attribute3?.type !== "JSXAttribute") return [];
+        const prop = nameOf(child(attribute3, "name"));
+        return prop === "className" || prop === "bodyClassName" ? classesOf(child(attribute3, "value"), scopeOf).filter(isSpacing) : [];
+      });
+      if (!spacing.length || escaped(opening)) return;
+      context.report({ loc: opening.loc, messageId: "formSpacedFromOutside", data: { classes: code([...new Set(spacing)]) } });
+    };
     return {
       Program(program) {
         locals = moduleParts(file, program, parser, /* @__PURE__ */ new Set([file])).locals;
@@ -696,6 +721,7 @@ var noRestyledPart = {
         const element = ruleNode;
         const binding = locals && bindingOfTag(child(element, "name"), locals);
         if (!binding) return;
+        if (binding.part === "Form" && binding.props === "all" && placesItsFields(element)) checkSpacedFromOutside(element);
         for (const attribute3 of children(element, "attributes")) {
           if (!attribute3) continue;
           if (attribute3.type === "JSXAttribute") {
@@ -991,16 +1017,16 @@ function classesOf2(el) {
 }
 function meaningful(el) {
   const out = [];
-  for (const child4 of el.children) {
-    if (child4.type === "JSXText") {
-      if (String(child4.value).trim()) out.push(child4);
-    } else if (child4.type === "JSXExpressionContainer") {
-      const e = child4.expression;
+  for (const child5 of el.children) {
+    if (child5.type === "JSXText") {
+      if (String(child5.value).trim()) out.push(child5);
+    } else if (child5.type === "JSXExpressionContainer") {
+      const e = child5.expression;
       if (e.type === "JSXEmptyExpression") continue;
       if (e.type === "LogicalExpression" && isElement(e.right)) out.push(e.right);
       else if (isElement(e)) out.push(e);
-      else out.push(child4);
-    } else if (child4.type === "JSXElement" || child4.type === "JSXFragment") out.push(child4);
+      else out.push(child5);
+    } else if (child5.type === "JSXElement" || child5.type === "JSXFragment") out.push(child5);
   }
   return out;
 }
@@ -1008,16 +1034,16 @@ var TEXT_PARTS = /* @__PURE__ */ new Set(["EditableText", "Person", "Breadcrumb"
 var VALUE_EXPRESSIONS = /* @__PURE__ */ new Set(["Identifier", "MemberExpression", "TemplateLiteral", "Literal", "LogicalExpression", "ConditionalExpression", "ChainExpression", "CallExpression"]);
 function carriesTitle(el, depth = 0) {
   if (depth > 3) return false;
-  for (const child4 of meaningful(el)) {
-    if (child4.type === "JSXText") return true;
-    if (child4.type === "JSXExpressionContainer") {
-      if (VALUE_EXPRESSIONS.has(child4.expression.type)) return true;
+  for (const child5 of meaningful(el)) {
+    if (child5.type === "JSXText") return true;
+    if (child5.type === "JSXExpressionContainer") {
+      if (VALUE_EXPRESSIONS.has(child5.expression.type)) return true;
       continue;
     }
-    if (!isElement(child4)) continue;
-    const tag = tagOf(child4);
+    if (!isElement(child5)) continue;
+    const tag = tagOf(child5);
     if (/^h[1-6]$/.test(tag) || TEXT_PARTS.has(tag) || /\.(?:Title|Heading)$/.test(tag)) return true;
-    if (/^[a-z]/.test(tag) && carriesTitle(child4, depth + 1)) return true;
+    if (/^[a-z]/.test(tag) && carriesTitle(child5, depth + 1)) return true;
   }
   return false;
 }
@@ -1439,10 +1465,65 @@ var noCopiedLook = {
   }
 };
 
-// src/eslint/no-native-title.ts
-var PARTS_WITH_A_TITLE = ["CollapsibleSection", "ConfirmDialog", "ContainerHeader", "DialogShell", "ListColumn", "Panel", "SectionHeader"];
+// src/eslint/no-field-outside-a-form.ts
+var FIELD_PARTS = ["Field", "TextInput", "Textarea"];
+var FORM_PARTS = ["Form", "CommandPaletteForm"];
 var child3 = (node, key) => node[key];
 var nameOf4 = (node) => node?.type === "JSXIdentifier" || node?.type === "Identifier" ? node.name : void 0;
+var noFieldOutsideAForm = {
+  meta: {
+    type: "problem",
+    docs: { description: "A field with no Form around it" },
+    schema: [],
+    messages: {
+      loose: "`{{part}}` has no `Form` around it, so nothing owns sending it: Enter and Ctrl+Enter, `busy`, and focus after. Put it in `Form` from @estiva-app/ui; in a dialog, that is `DialogShell` with a `Form`, never `ConfirmDialog` (Primitives/Form says how).",
+      ...ESCAPE_MESSAGES
+    }
+  },
+  create(context) {
+    const parser = context.languageOptions?.parser ?? {};
+    let locals;
+    const loose = [];
+    let drawsAField = false;
+    const partOf = (element) => {
+      const tag = child3(child3(element, "openingElement"), "name");
+      const name = nameOf4(tag);
+      if (!name || /^[a-z]/.test(name)) return void 0;
+      const binding = locals && bindingOfTag(tag, locals);
+      return binding && binding.props === "all" ? binding.part : void 0;
+    };
+    return {
+      Program(program) {
+        locals = partsOfFile(context.filename, program, parser);
+      },
+      JSXElement(ruleNode) {
+        const element = ruleNode;
+        const part = partOf(element);
+        if (!part || !FIELD_PARTS.includes(part)) return;
+        if (part === "Field") drawsAField = true;
+        for (let up = element.parent; up; up = up.parent) {
+          if (up.type !== "JSXElement") continue;
+          const around = partOf(up);
+          if (around && FORM_PARTS.includes(around)) return;
+          if (around === "Field") return;
+        }
+        loose.push({ opening: child3(element, "openingElement"), part });
+      },
+      "Program:exit"() {
+        for (const { opening, part } of loose) {
+          if (part !== "Field" && drawsAField) continue;
+          if (isEscaped(context, opening)) continue;
+          context.report({ loc: opening.loc, messageId: "loose", data: { part } });
+        }
+      }
+    };
+  }
+};
+
+// src/eslint/no-native-title.ts
+var PARTS_WITH_A_TITLE = ["CollapsibleSection", "ConfirmDialog", "ContainerHeader", "DialogShell", "ListColumn", "Panel", "SectionHeader"];
+var child4 = (node, key) => node[key];
+var nameOf5 = (node) => node?.type === "JSXIdentifier" || node?.type === "Identifier" ? node.name : void 0;
 var noNativeTitle = {
   meta: {
     type: "problem",
@@ -1462,10 +1543,10 @@ var noNativeTitle = {
       },
       JSXAttribute(ruleNode) {
         const attribute3 = ruleNode;
-        if (nameOf4(child3(attribute3, "name")) !== "title") return;
+        if (nameOf5(child4(attribute3, "name")) !== "title") return;
         const opening = attribute3.parent;
-        const tag = child3(opening, "name");
-        const name = nameOf4(tag);
+        const tag = child4(opening, "name");
+        const name = nameOf5(tag);
         if (!(name && /^[a-z]/.test(name))) {
           const binding = locals && bindingOfTag(tag, locals);
           if (!binding || binding.props !== "all") return;
@@ -1789,10 +1870,10 @@ function anchorOf(node) {
   if (node.type === "FunctionDeclaration") {
     return node.parent && /^Export/.test(node.parent.type) ? node.parent : node;
   }
-  let child4 = node;
-  for (let p = node.parent; p; child4 = p, p = p.parent) {
+  let child5 = node;
+  for (let p = node.parent; p; child5 = p, p = p.parent) {
     if (p.type === "JSXOpeningElement" || p.type === "Property" || p.type === "MethodDefinition" || p.type === "PropertyDefinition") return p;
-    if (p.type === "ArrayExpression") return child4;
+    if (p.type === "ArrayExpression") return child5;
     if (p.type !== "BlockStatement" && /(Statement|Declaration)$/.test(p.type)) return p;
   }
   return node;
@@ -2107,7 +2188,8 @@ var APP_RULE_NAMES = [
   "no-handmade-header",
   "no-handmade-empty-state",
   "no-native-title",
-  "no-copied-look"
+  "no-copied-look",
+  "no-field-outside-a-form"
 ];
 var APP_RULE_IDS = APP_RULE_NAMES.map((name) => `${PLUGIN_KEY}/${name}`);
 
@@ -2120,7 +2202,8 @@ var appRules = {
   "no-handmade-header": noHandmadeHeader,
   "no-handmade-empty-state": noHandmadeEmptyState,
   "no-native-title": noNativeTitle,
-  "no-copied-look": noCopiedLook
+  "no-copied-look": noCopiedLook,
+  "no-field-outside-a-form": noFieldOutsideAForm
 };
 var packageRules = {
   "raw-element-outside-a-wrapper": rawElementOutsideAWrapper,
@@ -2151,7 +2234,8 @@ plugin.configs.recommended = {
     [`${PLUGIN_KEY}/no-handmade-empty-state`]: "error",
     [`${PLUGIN_KEY}/no-native-title`]: "error",
     // A warning, never an error (Katerina, 13 September): likeness is a judgement.
-    [`${PLUGIN_KEY}/no-copied-look`]: "warn"
+    [`${PLUGIN_KEY}/no-copied-look`]: "warn",
+    [`${PLUGIN_KEY}/no-field-outside-a-form`]: "error"
   }
 };
 plugin.configs.strict = {
@@ -2187,6 +2271,7 @@ function countGates(results, seed = APP_RULE_IDS) {
 export {
   APP_RULE_IDS,
   ESCAPE_MARKER,
+  FIELD_PARTS,
   MIN_COVER,
   MIN_REASON,
   MIN_SHARED,