@nadicodeai/ui 12.1.101 → 12.1.103

package/dist/eslint/rules/command-shortcut-single-owner.js

@@ -0,0 +1,118 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector can match the
+ * string `"mod+k"`, but not a handler that reads `key` and `metaKey` as two
+ * separate checks (`(e.metaKey || e.ctrlKey) && e.key === "k"`), because the
+ * two reads only mean a shortcut together, in the same function; and it cannot
+ * allow the files that own Find.
+ */
+
+const SHORTCUT_STRING = /^(?:mod|meta|cmd|ctrl)\+k$/i;
+const MODIFIER_PROPERTIES = new Set(["metaKey", "ctrlKey"]);
+const CASE_METHODS = new Set(["toLowerCase", "toUpperCase"]);
+const KEY_VALUES = { key: new Set(["k", "K"]), code: new Set(["KeyK"]) };
+
+const inFiles = (filename, files) => {
+  const path = filename.replaceAll("\\", "/");
+  return files.some((file) => path === file || path.endsWith(`/${file}`));
+};
+
+const unwrapChain = (node) => (node.type === "ChainExpression" ? node.expression : node);
+
+const propertyName = (member) =>
+  member.type === "MemberExpression" && !member.computed ? member.property.name : null;
+
+function keyRead(node) {
+  const read = unwrapChain(node);
+  if (read.type === "CallExpression") {
+    const callee = unwrapChain(read.callee);
+    if (propertyName(callee) && CASE_METHODS.has(propertyName(callee))) {
+      return keyRead(callee.object);
+    }
+    return null;
+  }
+  const name = propertyName(read);
+  return name && name in KEY_VALUES ? name : null;
+}
+
+const isLetterK = (read, literal) =>
+  literal.type === "Literal" &&
+  // oxlint-disable-next-line anti-slop/no-runtime-typeof -- ESTree types Literal.value as string | number | boolean | RegExp | bigint | null; only typeof picks the string.
+  typeof literal.value === "string" &&
+  KEY_VALUES[read].has(literal.value);
+
+const COMPARISONS = new Set(["===", "==", "!==", "!="]);
+
+export const commandShortcutSingleOwner = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Only the files that own Find bind the command-and-K shortcut.",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          owners: { type: "array", items: { type: "string" }, uniqueItems: true },
+        },
+        additionalProperties: false,
+      },
+    ],
+    defaultOptions: [{ owners: [] }],
+    messages: {
+      "find-shortcut": "⌘K and Ctrl+K belong to Find. Bind an in-page field to another key.",
+    },
+  },
+  create(context) {
+    if (inFiles(context.filename, context.options[0].owners)) return {};
+
+    const frames = [{ letterKs: [], readsModifier: false }];
+    const frame = () => frames.at(-1);
+
+    const enter = () => frames.push({ letterKs: [], readsModifier: false });
+    const leave = () => {
+      const { letterKs, readsModifier } = frames.pop();
+      if (!readsModifier) return;
+      for (const node of letterKs) context.report({ node, messageId: "find-shortcut" });
+    };
+
+    const checkString = (node, value) => {
+      if (SHORTCUT_STRING.test(value.trim())) context.report({ node, messageId: "find-shortcut" });
+    };
+
+    const noteLetterK = (node, read, other) => {
+      const name = keyRead(read);
+      if (name && isLetterK(name, other)) frame().letterKs.push(node);
+    };
+
+    return {
+      FunctionDeclaration: enter,
+      FunctionExpression: enter,
+      ArrowFunctionExpression: enter,
+      "FunctionDeclaration:exit": leave,
+      "FunctionExpression:exit": leave,
+      "ArrowFunctionExpression:exit": leave,
+      "Program:exit"() {
+        leave();
+      },
+      MemberExpression(node) {
+        if (MODIFIER_PROPERTIES.has(propertyName(node))) frame().readsModifier = true;
+      },
+      BinaryExpression(node) {
+        if (!COMPARISONS.has(node.operator)) return;
+        noteLetterK(node, node.left, node.right);
+        noteLetterK(node, node.right, node.left);
+      },
+      SwitchCase(node) {
+        if (node.test) noteLetterK(node, node.parent.discriminant, node.test);
+      },
+      Literal(node) {
+        // oxlint-disable-next-line anti-slop/no-runtime-typeof -- ESTree types Literal.value as string | number | boolean | RegExp | bigint | null; only typeof picks the string.
+        if (typeof node.value === "string") checkString(node, node.value);
+      },
+      TemplateElement(node) {
+        if (node.parent.type === "TemplateLiteral" && node.parent.expressions.length === 0)
+          checkString(node, node.value.cooked ?? "");
+      },
+    };
+  },
+};

package/dist/eslint/rules/confirm-dialog-words.js

@@ -0,0 +1,63 @@
+/*
+ * Standard tool checked first: `no-restricted-syntax` reads one attribute at a
+ * time, and this check compares two of them on the same element (the title's
+ * verb with the confirm label's), and must know the element is the package's
+ * `ConfirmDialog` or the Portal's wrapper of it, not a local component.
+ */
+import { stringAttribute } from "./literal-text.js";
+import { renderedImports, writtenName } from "./rendered-import.js";
+
+const DIALOGS = new Set(["ConfirmDialog", "ConfirmedActionForm"]);
+const QUESTION_OPENING = /^(?:are you sure|do you (?:really )?want|would you like|should)\b/i;
+
+const words = (text) => text.trim().split(/\s+/).filter(Boolean);
+
+export const confirmDialogWords = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A ConfirmDialog's title is a statement, and its confirm label repeats the title's verb with the noun.",
+    },
+    schema: [],
+    messages: {
+      "title-is-a-question":
+        'The title of a confirmation is a statement that names the record, "Remove pec@acme.it", never a question.',
+      "confirm-label-bare":
+        'The confirm label repeats the verb and the noun, "Remove mailbox"; "{{label}}" alone does not say what is confirmed.',
+      "confirm-verb-differs":
+        'The confirm label repeats the title\'s verb: the title says "{{title}}", so the label starts with "{{verb}}", not "{{label}}".',
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+
+    return {
+      JSXOpeningElement(node) {
+        if (!importOf(node.name) || !DIALOGS.has(writtenName(node.name))) return;
+        const titleText = stringAttribute(node, "title");
+        const labelText = stringAttribute(node, "confirmLabel");
+        if (
+          titleText !== null &&
+          (titleText.trim().endsWith("?") || QUESTION_OPENING.test(titleText.trim()))
+        ) {
+          context.report({ node, messageId: "title-is-a-question" });
+        }
+        if (labelText === null) return;
+        const labelWords = words(labelText);
+        if (labelWords.length < 2) {
+          context.report({ node, messageId: "confirm-label-bare", data: { label: labelText } });
+          return;
+        }
+        const verb = titleText === null ? undefined : words(titleText)[0];
+        if (verb !== undefined && verb.toLowerCase() !== labelWords[0].toLowerCase()) {
+          context.report({
+            node,
+            messageId: "confirm-verb-differs",
+            data: { title: titleText, verb, label: labelText },
+          });
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/data-table-one-unsized-column.js

@@ -0,0 +1,96 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector matches one
+ * node, but this reads a whole `columns` array (how many of its objects lack a
+ * `size`, whether one sets `meta.wraps`, whether a spread or a call makes the
+ * list unknowable) and follows a variable to its array, which no selector can.
+ */
+import { renderedImports } from "./rendered-import.js";
+
+const COMMANDS_COLUMN_ID = "actions";
+
+const WRAPPERS = new Set(["TSAsExpression", "TSSatisfiesExpression", "TSNonNullExpression"]);
+
+function unwrap(node) {
+  let current = node;
+  while (WRAPPERS.has(current.type)) current = current.expression;
+  return current;
+}
+
+const keyName = (property) => {
+  if (property.computed) return null;
+  return property.key.type === "Identifier" ? property.key.name : property.key.value;
+};
+
+const propertyOf = (column, name) =>
+  column.properties.find((property) => property.type === "Property" && keyName(property) === name);
+
+function setsWraps(column) {
+  const meta = propertyOf(column, "meta")?.value;
+  if (meta?.type !== "ObjectExpression") return false;
+  const wraps = propertyOf(meta, "wraps")?.value;
+  return wraps !== undefined && !(wraps.type === "Literal" && wraps.value === false);
+}
+
+const isCommandsColumn = (column) => propertyOf(column, "id")?.value.value === COMMANDS_COLUMN_ID;
+
+const isKnownColumn = (element) =>
+  element?.type === "ObjectExpression" &&
+  element.properties.every((property) => property.type === "Property");
+
+function arrayOf(context, expression) {
+  const node = unwrap(expression);
+  if (node.type === "ArrayExpression") return node;
+  if (node.type !== "Identifier") return null;
+  for (let scope = context.sourceCode.getScope(node); scope; scope = scope.upper) {
+    const variable = scope.set.get(node.name);
+    if (!variable) continue;
+    const [definition] = variable.defs;
+    const initialisedOnce =
+      variable.defs.length === 1 && variable.references.filter((use) => use.isWrite()).length === 1;
+    if (!initialisedOnce || definition.node.type !== "VariableDeclarator") return null;
+    const init = definition.node.init ? unwrap(definition.node.init) : null;
+    return init?.type === "ArrayExpression" ? init : null;
+  }
+  return null;
+}
+
+function breaksTheRule(array) {
+  if (!array.elements.every(isKnownColumn)) return false;
+  if (array.elements.some(setsWraps)) return false;
+  const unsized = array.elements.filter((column) => !propertyOf(column, "size"));
+  if (unsized.length > 1) return true;
+  const content = array.elements.filter((column) => !isCommandsColumn(column));
+  return content.length > 0 && unsized.length === 0;
+}
+
+export const dataTableOneUnsizedColumn = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A DataTable's columns all have a size in pixels except the one that takes the spare width.",
+    },
+    schema: [],
+    messages: {
+      "one-unsized-column":
+        "Give every column a `size` in pixels except the one that takes the spare width. Columns without a size share what is left, so two of them make the widths depend on the data.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    return {
+      JSXOpeningElement(node) {
+        if (importOf(node.name)?.name !== "DataTable") return;
+        const attribute = node.attributes.find(
+          (candidate) => candidate.type === "JSXAttribute" && candidate.name.name === "columns",
+        );
+        const value = attribute?.value;
+        if (value?.type !== "JSXExpressionContainer") return;
+        const array = arrayOf(context, value.expression);
+        if (array && breaksTheRule(array)) {
+          context.report({ node: value.expression, messageId: "one-unsized-column" });
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/destructive-action-placement.js

@@ -0,0 +1,69 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` descendant selector can
+ * match a `Button` below `SheetContent`, but not that the button is the design
+ * system's, nor follow a renamed import, nor read `variant="destructive"` off
+ * the opening element or ignore a match that only sits in a `render` prop.
+ */
+import { renderedImports, staticAttribute } from "./rendered-import.js";
+
+const BUTTONS = new Set(["Button", "ButtonLink"]);
+const CONFIRMATIONS = new Set(["ConfirmDialog", "AlertDialog", "ConfirmActionDialog"]);
+const CLOSED_SURFACES = new Set([
+  "SheetContent",
+  "DrawerContent",
+  "FormDrawer",
+  "CatalogDrawer",
+  "AccordionContent",
+  "CollapsibleContent",
+  "Disclosure",
+  "HoverCardContent",
+]);
+
+const FROM_DESIGN_SYSTEM = /^(@nadicodeai\/ui(\/|$)|@\/|\.)/;
+
+export const destructiveActionPlacement = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A destructive action is confirmed in a ConfirmDialog opened from the page or a row's menu, never inside a sheet, drawer, hover card or collapsed section.",
+    },
+    schema: [],
+    messages: {
+      "destructive-placement":
+        "A destructive action is confirmed in a ConfirmDialog opened from the page or the row's menu: only a modal dims the whole page. Do not place it in a sheet, a drawer, a hover card or a section that starts closed.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const exportOf = (element) => {
+      const imported = importOf(element.openingElement.name);
+      return imported && FROM_DESIGN_SYSTEM.test(imported.source) ? imported.name : null;
+    };
+
+    const isDestructive = (element) => {
+      const name = exportOf(element);
+      if (CONFIRMATIONS.has(name)) return true;
+      return (
+        BUTTONS.has(name) && staticAttribute(element.openingElement, "variant") === "destructive"
+      );
+    };
+
+    function insideClosedSurface(element) {
+      let child = element;
+      for (let node = element.parent; node; child = node, node = node.parent) {
+        if (node.type !== "JSXElement" || !node.children.includes(child)) continue;
+        if (CLOSED_SURFACES.has(exportOf(node))) return true;
+      }
+      return false;
+    }
+
+    return {
+      JSXElement(node) {
+        if (isDestructive(node) && insideClosedSurface(node)) {
+          context.report({ node: node.openingElement, messageId: "destructive-placement" });
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/disabled-choice-says-why.js

@@ -0,0 +1,71 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector can match a
+ * `disabled` attribute on a `Checkbox`, but not follow a renamed import to the
+ * component, nor read the other attributes of the same element (aria-describedby,
+ * a spread) or tell a wait (`disabled={pending}`) from a reason.
+ */
+import { PACKAGE_BARREL, partOf, renderedImports } from "./rendered-import.js";
+
+const MODULES = [
+  ["Checkbox", "checkbox"],
+  ["Switch", "switch"],
+  ["RadioGroupItem", "radio-group"],
+];
+
+const CHOICE = new Map(
+  MODULES.map(([part, module]) => [
+    part,
+    [`@nadicodeai/ui/components/${module}`, PACKAGE_BARREL].map((from) => ({ from, part })),
+  ]),
+);
+
+const WAIT = /^(?:is)?(?:pending|saving|submitting|busy)$/i;
+
+const unwrapChain = (node) => (node.type === "ChainExpression" ? node.expression : node);
+
+function isWait(attribute) {
+  if (attribute.value?.type !== "JSXExpressionContainer") return false;
+  const read = unwrapChain(attribute.value.expression);
+  if (read.type === "Identifier") return WAIT.test(read.name);
+  if (read.type !== "MemberExpression" || read.computed) return false;
+  return WAIT.test(read.property.name);
+}
+
+function isEnabledLiteral(attribute) {
+  const expression = attribute.value?.expression;
+  return expression?.type === "Literal" && expression.value === false;
+}
+
+const attributeNamed = (openingElement, name) =>
+  openingElement.attributes.find(
+    (attribute) => attribute.type === "JSXAttribute" && attribute.name.name === name,
+  );
+
+export const disabledChoiceSaysWhy = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A disabled Checkbox, Switch or RadioGroupItem points aria-describedby at the line that names the reason.",
+    },
+    schema: [],
+    messages: {
+      "disabled-without-reason":
+        "Say why this is disabled: point aria-describedby at the line that names the reason, or use ChoiceboxGroupItem's disabledReason.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+
+    return {
+      JSXOpeningElement(node) {
+        if (!partOf(importOf(node.name), CHOICE, context.filename)) return;
+        const disabled = attributeNamed(node, "disabled");
+        if (!disabled || isEnabledLiteral(disabled) || isWait(disabled)) return;
+        if (attributeNamed(node, "aria-describedby")) return;
+        if (node.attributes.some((attribute) => attribute.type === "JSXSpreadAttribute")) return;
+        context.report({ node: disabled, messageId: "disabled-without-reason" });
+      },
+    };
+  },
+};

package/dist/eslint/rules/ellipsis-opens-a-dialog.js

@@ -0,0 +1,110 @@
+/*
+ * Standard tool checked first: `no-restricted-syntax` can match a label that
+ * ends in an ellipsis, but not what its command does: whether the handler
+ * opens something (a call that opens or passes `true`), runs, or navigates.
+ */
+import { childText, keyName, literalText } from "./literal-text.js";
+import { renderedImports } from "./rendered-import.js";
+
+const ENDS_IN_ELLIPSIS = /(?:…|\.\.\.)\s*$/;
+const COMMAND_KEYS = new Set(["onClick", "onSelect", "link", "render", "icon"]);
+const HANDLER_KEYS = new Set(["onClick", "onSelect"]);
+const MENU_ROWS = new Set([
+  "DropdownMenuItem",
+  "DropdownMenuCommand",
+  "ContextMenuItem",
+  "MenubarItem",
+]);
+const MENU_LINKS = new Set(["DropdownMenuLink", "ContextMenuLink"]);
+const FROM_DESIGN_SYSTEM = /^(@nadicodeai\/ui(\/|$)|@\/|\.)/;
+const OPENING_CALL = /^(?:open|show)(?:[A-Z]|$)/;
+const FUNCTIONS = new Set(["ArrowFunctionExpression", "FunctionExpression"]);
+
+const calleeName = (callee) => {
+  if (callee.type === "Identifier") return callee.name;
+  if (callee.type === "MemberExpression" && !callee.computed) return callee.property.name;
+  return null;
+};
+
+function opensSomething(node, visitorKeys) {
+  const calls = [];
+  const stack = [node.body];
+  while (stack.length > 0) {
+    const current = stack.pop();
+    if (current.type === "CallExpression") calls.push(current);
+    for (const key of visitorKeys[current.type] ?? []) {
+      const value = current[key];
+      for (const child of Array.isArray(value) ? value : [value]) {
+        if (child?.type) stack.push(child);
+      }
+    }
+  }
+  return calls.some(
+    (call) =>
+      OPENING_CALL.test(calleeName(call.callee) ?? "") ||
+      call.arguments.some((argument) => argument.type === "Literal" && argument.value === true),
+  );
+}
+
+export const ellipsisOpensADialog = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "A command's label ends in an ellipsis only when the command opens a dialog.",
+    },
+    schema: [],
+    messages: {
+      "ellipsis-without-dialog":
+        'An ellipsis says "this asks for more before it acts". "{{label}}" navigates or runs at once, so drop the ellipsis; keep it only on a command that opens a dialog.',
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const { visitorKeys } = context.sourceCode;
+
+    function reportsNoDialog(handler) {
+      return (
+        handler !== undefined &&
+        FUNCTIONS.has(handler.type) &&
+        !opensSomething(handler, visitorKeys)
+      );
+    }
+
+    return {
+      ObjectExpression(node) {
+        const keys = new Map(node.properties.map((property) => [keyName(property), property]));
+        const label = literalText(keys.get("label")?.value);
+        if (label === null || !ENDS_IN_ELLIPSIS.test(label)) return;
+        if (![...keys.keys()].some((key) => COMMAND_KEYS.has(key))) return;
+        if (keys.has("render")) return;
+        const handlerProperty = [...keys].find(([key]) => HANDLER_KEYS.has(key))?.[1];
+        const navigates = keys.has("link");
+        if (navigates || reportsNoDialog(handlerProperty?.value)) {
+          context.report({
+            node: keys.get("label").value,
+            messageId: "ellipsis-without-dialog",
+            data: { label },
+          });
+        }
+      },
+      JSXElement(node) {
+        const imported = importOf(node.openingElement.name);
+        if (!imported || !FROM_DESIGN_SYSTEM.test(imported.source)) return;
+        const row = MENU_ROWS.has(imported.name);
+        if (!row && !MENU_LINKS.has(imported.name)) return;
+        const label = childText(node);
+        if (label === null || !ENDS_IN_ELLIPSIS.test(label)) return;
+        const handler = node.openingElement.attributes.find(
+          (attribute) => attribute.type === "JSXAttribute" && HANDLER_KEYS.has(attribute.name.name),
+        )?.value?.expression;
+        if (!row || reportsNoDialog(handler)) {
+          context.report({
+            node: node.openingElement,
+            messageId: "ellipsis-without-dialog",
+            data: { label },
+          });
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/input-group-owners.js

@@ -0,0 +1,155 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector can match an
+ * `InputGroupAddon` holding `<Search/>`, but not an element joined to its import
+ * (a renamed or namespaced one), nor the shape of a whole group: only addons of
+ * fixed text or one icon around one input, a group with another button, a
+ * block addon or a textarea allowed. That needs the group's children together.
+ */
+import {
+  PACKAGE_BARREL,
+  findBelow,
+  partOf,
+  renderedImports,
+  staticAttribute,
+  walk,
+} from "./rendered-import.js";
+
+const GROUP_PARTS = [
+  "InputGroup",
+  "InputGroupAddon",
+  "InputGroupButton",
+  "InputGroupInput",
+  "InputGroupText",
+  "InputGroupTextarea",
+];
+
+const GROUP_MODULES = [
+  "@nadicodeai/ui/components/input-group",
+  PACKAGE_BARREL,
+  "@/components/input-group",
+];
+
+const PARTS = new Map(
+  GROUP_PARTS.map((part) => [part, GROUP_MODULES.map((from) => ({ from, part }))]),
+);
+
+const ICON_MODULES = new Set(["lucide-react", "@nadicodeai/ui/components/house-icons"]);
+const SEARCH_ICONS = new Set(["Search", "SearchIcon"]);
+const CLEAR_ICONS = new Set(["X", "XIcon"]);
+const INLINE_ALIGNS = new Set(["inline-start", "inline-end"]);
+
+const significant = (element) =>
+  element.children.filter(
+    (child) =>
+      !(child.type === "JSXText" && child.value.trim() === "") &&
+      !(child.type === "JSXExpressionContainer" && child.expression.type === "JSXEmptyExpression"),
+  );
+
+const isFixedText = (child) =>
+  child.type === "JSXText" ||
+  (child.type === "JSXExpressionContainer" && child.expression.type === "Literal");
+
+export const inputGroupOwners = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A search box, a box that clears and fixed text or an icon in a box are drawn by the component that owns them, not by hand from InputGroup parts.",
+    },
+    schema: [],
+    messages: {
+      "hand-built-field":
+        "Use the component that owns this field: CollectionSearch for a collection's search, ClearableInput for a box that clears, Input's prefix and suffix for fixed text or an icon in the box.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const { visitorKeys } = context.sourceCode;
+
+    const partName = (element) =>
+      partOf(importOf(element.openingElement.name), PARTS, context.filename);
+
+    const iconName = (element) => {
+      const imported = importOf(element.openingElement.name);
+      return imported && ICON_MODULES.has(imported.source) ? imported.name : null;
+    };
+
+    const holdsIcon = (element, names) =>
+      findBelow(
+        element,
+        visitorKeys,
+        (node) => node.type === "JSXElement" && names.has(iconName(node)),
+      ) !== null;
+
+    function holdsTextOrOneIcon(element) {
+      const content = significant(element);
+      if (content.length === 0) return false;
+      if (content.length === 1 && content[0].type === "JSXElement") {
+        const [only] = content;
+        if (iconName(only)) return true;
+        return partName(only) === "InputGroupText" && holdsTextOrOneIcon(only);
+      }
+      return content.every(isFixedText);
+    }
+
+    function readGroup(group) {
+      const facts = {
+        inputs: 0,
+        hasTextarea: false,
+        hasBlockAddon: false,
+        hasSearchAddon: false,
+        hasClearButton: false,
+        hasOtherButton: false,
+      };
+      walk(group, visitorKeys, (node) => {
+        if (node.type !== "JSXElement") return true;
+        const part = partName(node);
+        if (part === "InputGroup") return false;
+        if (part === "InputGroupInput") facts.inputs += 1;
+        if (part === "InputGroupTextarea") facts.hasTextarea = true;
+        if (part === "InputGroupAddon") {
+          const { openingElement } = node;
+          const hasAlign = openingElement.attributes.some(
+            (attribute) => attribute.type === "JSXAttribute" && attribute.name.name === "align",
+          );
+          if (hasAlign && !INLINE_ALIGNS.has(staticAttribute(openingElement, "align"))) {
+            facts.hasBlockAddon = true;
+          }
+          if (holdsIcon(node, SEARCH_ICONS)) facts.hasSearchAddon = true;
+        }
+        if (part === "InputGroupButton") {
+          if (holdsIcon(node, CLEAR_ICONS)) facts.hasClearButton = true;
+          else facts.hasOtherButton = true;
+        }
+        return true;
+      });
+      return facts;
+    }
+
+    function isFixedAdornments(group) {
+      const children = significant(group);
+      if (!children.every((child) => child.type === "JSXElement")) return false;
+      const parts = children.map(partName);
+      const addons = children.filter((_, index) => parts[index] === "InputGroupAddon");
+      const inputs = parts.filter((part) => part === "InputGroupInput");
+      return (
+        inputs.length === 1 &&
+        addons.length > 0 &&
+        addons.length + inputs.length === children.length &&
+        addons.every(holdsTextOrOneIcon)
+      );
+    }
+
+    return {
+      JSXElement(node) {
+        if (partName(node) !== "InputGroup") return;
+        const facts = readGroup(node);
+        if (facts.hasTextarea || facts.hasBlockAddon || facts.hasOtherButton) return;
+        const isSearch = facts.inputs > 0 && facts.hasSearchAddon;
+        if (isSearch || facts.hasClearButton || isFixedAdornments(node)) {
+          context.report({ node: node.openingElement, messageId: "hand-built-field" });
+        }
+      },
+    };
+  },
+};