@estiva-app/ui 0.49.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

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") {