@estiva-app/ui 0.32.0 → 0.33.0

package/README.md

@@ -64,7 +64,7 @@ export default {
 
 The UI Guardrails' rules ship with the package, as an ESLint plugin, so an app
 gets a new rule with a version bump. Each rule names the component to use
-instead. There are five:
+instead. There are six:
 
 - `estiva/no-raw-element` refuses a raw interactive element (`<a>`, `<input>`,
   `<form>`, `<dialog>`…) and names the part to use, or says the package has none yet.
@@ -90,6 +90,11 @@ instead. There are five:
   `ScrollArea` whose content is only as tall as what is in it, where it sits at
   the top instead of the middle, following the app's own components into their
   files to find one.
+- `estiva/no-native-title` refuses a `title` attribute, the browser's own
+  tooltip, and names `WithTooltip`. It fires on a plain element and on a part
+  that hands `title` on to its element (`<Button title>`); a part whose
+  `title` is its own heading (`PARTS_WITH_A_TITLE`) and an `<svg>`'s `<title>`
+  element pass.
 
 ```js
 // eslint.config.js — alongside your own rules

package/dist/eslint/index.d.ts

@@ -2,6 +2,7 @@ import type { ESLint, Linter } from 'eslint';
 export { ESCAPE_MARKER, MIN_REASON, SETTINGS_KEY, isEscaped, type EstivaSettings } from './escape';
 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';
 /** The name the configs register the plugin under, so every rule id is `estiva/<rule>`. */
 export declare const PLUGIN_KEY = "estiva";
 declare const plugin: {
@@ -17,6 +18,7 @@ declare const plugin: {
         'no-restyled-part': import("eslint").Rule.RuleModule;
         'no-handmade-header': import("eslint").Rule.RuleModule;
         'no-handmade-empty-state': import("eslint").Rule.RuleModule;
+        'no-native-title': import("eslint").Rule.RuleModule;
         'no-raw-element': import("eslint").Rule.RuleModule;
         'no-rebuilt-behaviour': import("eslint").Rule.RuleModule;
     };

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;AAU5C,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;AAI/D,2FAA2F;AAC3F,eAAO,MAAM,UAAU,WAAW,CAAA;AA6ClC,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,qFAAqF;AACrF,eAAO,MAAM,YAAY,UAA+D,CAAA;AACxF,wFAAwF;AACxF,eAAO,MAAM,gBAAgB,UAAmE,CAAA;AAgChG,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;AAW5C,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;AAItD,2FAA2F;AAC3F,eAAO,MAAM,UAAU,WAAW,CAAA;AA+ClC,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,qFAAqF;AACrF,eAAO,MAAM,YAAY,UAA+D,CAAA;AACxF,wFAAwF;AACxF,eAAO,MAAM,gBAAgB,UAAmE,CAAA;AAiChG,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

@@ -920,16 +920,16 @@ function classesOf2(el) {
 }
 function meaningful(el) {
   const out = [];
-  for (const child3 of el.children) {
-    if (child3.type === "JSXText") {
-      if (String(child3.value).trim()) out.push(child3);
-    } else if (child3.type === "JSXExpressionContainer") {
-      const e = child3.expression;
+  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;
       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(child3);
-    } else if (child3.type === "JSXElement" || child3.type === "JSXFragment") out.push(child3);
+      else out.push(child4);
+    } else if (child4.type === "JSXElement" || child4.type === "JSXFragment") out.push(child4);
   }
   return out;
 }
@@ -937,16 +937,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 child3 of meaningful(el)) {
-    if (child3.type === "JSXText") return true;
-    if (child3.type === "JSXExpressionContainer") {
-      if (VALUE_EXPRESSIONS.has(child3.expression.type)) return true;
+  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;
       continue;
     }
-    if (!isElement(child3)) continue;
-    const tag = tagOf(child3);
+    if (!isElement(child4)) continue;
+    const tag = tagOf(child4);
     if (/^h[1-6]$/.test(tag) || TEXT_PARTS.has(tag) || /\.(?:Title|Heading)$/.test(tag)) return true;
-    if (/^[a-z]/.test(tag) && carriesTitle(child3, depth + 1)) return true;
+    if (/^[a-z]/.test(tag) && carriesTitle(child4, depth + 1)) return true;
   }
   return false;
 }
@@ -984,6 +984,45 @@ var noHandmadeHeader = {
   }
 };
 
+// src/eslint/no-native-title.ts
+var PARTS_WITH_A_TITLE = ["CollapsibleSection", "ConfirmDialog", "ContainerHeader", "DialogShell", "ListColumn", "SectionHeader"];
+var child3 = (node, key) => node[key];
+var nameOf3 = (node) => node?.type === "JSXIdentifier" || node?.type === "Identifier" ? node.name : void 0;
+var noNativeTitle = {
+  meta: {
+    type: "problem",
+    docs: { description: "A title attribute: the browser's tooltip where WithTooltip is the part" },
+    schema: [],
+    messages: {
+      native: "`title` is the browser's tooltip, not ours. Wrap it in `WithTooltip` from @estiva-app/ui, or use `IconButton`'s `tooltip`: its page (Primitives/Tooltip) says when it shows and how.",
+      ...ESCAPE_MESSAGES
+    }
+  },
+  create(context) {
+    const parser = context.languageOptions?.parser ?? {};
+    let locals;
+    return {
+      Program(program) {
+        locals = partsOfFile(context.filename, program, parser);
+      },
+      JSXAttribute(ruleNode) {
+        const attribute3 = ruleNode;
+        if (nameOf3(child3(attribute3, "name")) !== "title") return;
+        const opening = attribute3.parent;
+        const tag = child3(opening, "name");
+        const name = nameOf3(tag);
+        if (!(name && /^[a-z]/.test(name))) {
+          const binding = locals && bindingOfTag(tag, locals);
+          if (!binding || binding.props !== "all") return;
+          if (PARTS_WITH_A_TITLE.includes(binding.part)) return;
+        }
+        if (isEscaped(context, opening)) return;
+        context.report({ loc: attribute3.loc, messageId: "native" });
+      }
+    };
+  }
+};
+
 // src/eslint/no-raw-element.ts
 var RAW_ELEMENT_PARTS = {
   a: { use: "Link", more: " For a chip, `InlineChip`; for a whole card, `Card` with `href`." },
@@ -1267,10 +1306,10 @@ function anchorOf(node) {
   if (node.type === "FunctionDeclaration") {
     return node.parent && /^Export/.test(node.parent.type) ? node.parent : node;
   }
-  let child3 = node;
-  for (let p = node.parent; p; child3 = p, p = p.parent) {
+  let child4 = node;
+  for (let p = node.parent; p; child4 = p, p = p.parent) {
     if (p.type === "JSXOpeningElement" || p.type === "Property" || p.type === "MethodDefinition" || p.type === "PropertyDefinition") return p;
-    if (p.type === "ArrayExpression") return child3;
+    if (p.type === "ArrayExpression") return child4;
     if (p.type !== "BlockStatement" && /(Statement|Declaration)$/.test(p.type)) return p;
   }
   return node;
@@ -1584,7 +1623,8 @@ var appRules = {
   "no-rebuilt-behaviour": noRebuiltBehaviour,
   "no-restyled-part": noRestyledPart,
   "no-handmade-header": noHandmadeHeader,
-  "no-handmade-empty-state": noHandmadeEmptyState
+  "no-handmade-empty-state": noHandmadeEmptyState,
+  "no-native-title": noNativeTitle
 };
 var packageRules = {
   "raw-element-outside-a-wrapper": rawElementOutsideAWrapper,
@@ -1593,7 +1633,8 @@ var packageRules = {
   "component-has-a-story": componentHasAStory,
   "no-restyled-part": noRestyledPart,
   "no-handmade-header": noHandmadeHeader,
-  "no-handmade-empty-state": noHandmadeEmptyState
+  "no-handmade-empty-state": noHandmadeEmptyState,
+  "no-native-title": noNativeTitle
 };
 var rules = { ...appRules, ...packageRules };
 var plugin = {
@@ -1611,7 +1652,8 @@ plugin.configs.recommended = {
     [`${PLUGIN_KEY}/no-rebuilt-behaviour`]: "error",
     [`${PLUGIN_KEY}/no-restyled-part`]: "error",
     [`${PLUGIN_KEY}/no-handmade-header`]: "error",
-    [`${PLUGIN_KEY}/no-handmade-empty-state`]: "error"
+    [`${PLUGIN_KEY}/no-handmade-empty-state`]: "error",
+    [`${PLUGIN_KEY}/no-native-title`]: "error"
   }
 };
 plugin.configs.strict = {
@@ -1649,6 +1691,7 @@ export {
   MIN_REASON,
   OWNED_BEHAVIOURS,
   PACKAGE_RULE_IDS,
+  PARTS_WITH_A_TITLE,
   PART_LOOK_PROPS,
   PLACEMENT,
   PLUGIN_KEY,