@trackunit/eslint-plugin-trackunit 0.0.2

package/src/lib/rules/prefer-field-components/prefer-field-components.js

@@ -0,0 +1,289 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.preferFieldComponents = void 0;
+const utils_1 = require("@typescript-eslint/utils");
+const import_utils_1 = require("../../utils/import-utils");
+const createRule = utils_1.ESLintUtils.RuleCreator(name => `https://github.com/trackunit/manager/blob/main/libs/eslint/plugin-trackunit/src/lib/rules/${name}/README.md`);
+const FORM_COMPONENTS_PACKAGE = "@trackunit/react-form-components";
+const REACT_COMPONENTS_PACKAGE = "@trackunit/react-components";
+/**
+ * Map of base component names to their recommended Field component replacements
+ * used in the error message (human-readable, may contain alternatives).
+ */
+const BASE_TO_FIELD_MESSAGE_MAP = {
+    BaseSelect: "SelectField (or MultiSelectField for multi-select)",
+    CreatableSelect: "CreatableSelectField",
+    BaseInput: "TextField (or the appropriate *Field component for your input type)",
+    TextBaseInput: "TextField",
+    NumberBaseInput: "NumberField",
+    DateBaseInput: "DateField",
+    PhoneBaseInput: "PhoneField",
+    TextAreaBaseInput: "TextAreaField",
+    PasswordBaseInput: "PasswordField",
+    EmailBaseInput: "EmailField",
+    UrlBaseInput: "UrlField",
+};
+/**
+ * Map used for autofix — always resolves to a single concrete component name.
+ *
+ * NOTE: BaseSelect and CreatableSelect are intentionally excluded here.
+ * SelectField and CreatableSelectField have different value/onChange APIs
+ * compared to their base counterparts:
+ *   - BaseSelect uses `value={optionObject}` and `onChange={(option) => ...}`
+ *   - SelectField uses `value={rawValue}` and `onChange={(event) => ...}`
+ * Auto-fixing would silently break the component's behaviour.
+ *
+ * BaseSelect with isMulti → MultiSelectField IS compatible and is handled
+ * separately in getAutofixFieldName().
+ */
+const BASE_TO_FIELD_AUTOFIX_MAP = {
+    BaseInput: "TextField",
+    TextBaseInput: "TextField",
+    NumberBaseInput: "NumberField",
+    DateBaseInput: "DateField",
+    PhoneBaseInput: "PhoneField",
+    TextAreaBaseInput: "TextAreaField",
+    PasswordBaseInput: "PasswordField",
+    EmailBaseInput: "EmailField",
+    UrlBaseInput: "UrlField",
+};
+const BASE_COMPONENT_NAMES = new Set(Object.keys(BASE_TO_FIELD_MESSAGE_MAP));
+/**
+ * Component names that act as a manual label above a base input/select.
+ */
+const LABEL_COMPONENT_NAMES = new Set(["Label", "Text"]);
+/**
+ * Get the JSX element name from a JSXOpeningElement.
+ * Returns null for member expressions or namespaced names.
+ */
+function getJSXElementName(openingElement) {
+    if (openingElement.name.type === utils_1.AST_NODE_TYPES.JSXIdentifier) {
+        return openingElement.name.name;
+    }
+    return null;
+}
+/**
+ * Check if a JSX child is a JSXText node that only contains whitespace.
+ */
+function isWhitespaceText(child) {
+    return child.type === utils_1.AST_NODE_TYPES.JSXText && child.value.trim() === "";
+}
+/**
+ * Check if a JSX child is a label-like element (Label or Text).
+ */
+function isLabelLikeElement(child) {
+    if (child.type !== utils_1.AST_NODE_TYPES.JSXElement) {
+        return false;
+    }
+    const name = getJSXElementName(child.openingElement);
+    return name !== null && LABEL_COMPONENT_NAMES.has(name);
+}
+/**
+ * Find the previous non-whitespace sibling in a list of JSX children.
+ */
+function getPreviousNonWhitespaceSibling(children, currentIndex) {
+    for (let i = currentIndex - 1; i >= 0; i--) {
+        const sibling = children[i];
+        if (sibling !== undefined && !isWhitespaceText(sibling)) {
+            return sibling;
+        }
+    }
+    return null;
+}
+/**
+ * Check if a JSXOpeningElement has a specific boolean or truthy prop.
+ */
+function hasJSXProp(openingElement, propName) {
+    return openingElement.attributes.some(attr => attr.type === utils_1.AST_NODE_TYPES.JSXAttribute &&
+        attr.name.type === utils_1.AST_NODE_TYPES.JSXIdentifier &&
+        attr.name.name === propName);
+}
+/**
+ * Extract the meaningful label content from a Label/Text element's children.
+ *
+ * Returns null if the content is too complex to autofix (e.g. multiple meaningful
+ * children, or JSX element children).
+ */
+function extractLabelContent(labelElement, sourceCode) {
+    // Filter out whitespace-only text children
+    const meaningfulChildren = labelElement.children.filter(node => {
+        if (node.type === utils_1.AST_NODE_TYPES.JSXText) {
+            return node.value.trim() !== "";
+        }
+        return true;
+    });
+    if (meaningfulChildren.length !== 1) {
+        return null; // Complex content — skip autofix
+    }
+    const child = meaningfulChildren[0];
+    if (child === undefined) {
+        return null;
+    }
+    if (child.type === utils_1.AST_NODE_TYPES.JSXText) {
+        const trimmed = child.value.trim();
+        if (trimmed.length === 0) {
+            return null;
+        }
+        return { type: "string", value: trimmed };
+    }
+    if (child.type === utils_1.AST_NODE_TYPES.JSXExpressionContainer) {
+        if (child.expression.type === utils_1.AST_NODE_TYPES.JSXEmptyExpression) {
+            return null;
+        }
+        return { type: "expression", text: sourceCode.getText(child.expression) };
+    }
+    return null;
+}
+/**
+ * Determine the field component name for autofix.
+ *
+ * Returns null (no autofix) for BaseSelect without isMulti and CreatableSelect,
+ * because SelectField/CreatableSelectField have incompatible value/onChange APIs.
+ *
+ * BaseSelect with isMulti → MultiSelectField is safe because MultiSelectField
+ * preserves the same option-object-based value/onChange API as BaseSelect.
+ */
+function getAutofixFieldName(baseComponentName, openingElement) {
+    if (baseComponentName === "BaseSelect" && hasJSXProp(openingElement, "isMulti")) {
+        return "MultiSelectField";
+    }
+    return BASE_TO_FIELD_AUTOFIX_MAP[baseComponentName] ?? null;
+}
+/**
+ * Build the label prop string for the autofix.
+ */
+function buildLabelPropValue(content) {
+    switch (content.type) {
+        case "string":
+            return `"${content.value}"`;
+        case "expression":
+            return `{${content.text}}`;
+        default: {
+            const _exhaustiveCheck = content;
+            return _exhaustiveCheck;
+        }
+    }
+}
+/**
+ * Count how many times a component is used as a JSX opening tag in the source text.
+ * Uses a regex that matches `<ComponentName` followed by whitespace, `>`, or `/>`.
+ */
+function countJSXElementUsages(sourceText, componentName) {
+    const pattern = new RegExp(`<${componentName}(?=[\\s/>])`, "g");
+    const matches = sourceText.match(pattern);
+    return matches ? matches.length : 0;
+}
+/**
+ * Build a new import statement string with the given specifiers, preserving semicolons.
+ */
+function buildImportStatement(sourceCode, importNode, specifiers) {
+    const sortedSpecifiers = Array.from(specifiers).sort().join(", ");
+    const originalText = sourceCode.getText(importNode);
+    const semicolon = originalText.trimEnd().endsWith(";") ? ";" : "";
+    return `import { ${sortedSpecifiers} } from "${importNode.source.value}"${semicolon}`;
+}
+exports.preferFieldComponents = createRule({
+    name: "prefer-field-components",
+    meta: {
+        type: "suggestion",
+        fixable: "code",
+        docs: {
+            description: "Prefer using Field components (e.g. SelectField, TextField) instead of manually combining Label/Text with base input components (e.g. BaseSelect, BaseInput).",
+        },
+        schema: [],
+        messages: {
+            preferFieldComponent: "Avoid using {{labelComponent}} with {{baseComponent}}. Use {{fieldComponent}} instead, which includes a built-in label via the `label` prop.",
+        },
+    },
+    defaultOptions: [],
+    create(context) {
+        const sourceCode = context.sourceCode;
+        return {
+            JSXElement(node) {
+                const children = node.children;
+                for (let i = 0; i < children.length; i++) {
+                    const child = children[i];
+                    // Only look at JSXElement children
+                    if (child === undefined || child.type !== utils_1.AST_NODE_TYPES.JSXElement) {
+                        continue;
+                    }
+                    const childName = getJSXElementName(child.openingElement);
+                    // Check if this child is a base component
+                    if (childName === null || !BASE_COMPONENT_NAMES.has(childName)) {
+                        continue;
+                    }
+                    // Found a base component — check if the previous non-whitespace sibling is a Label/Text
+                    const previousSibling = getPreviousNonWhitespaceSibling(children, i);
+                    if (previousSibling === null || !isLabelLikeElement(previousSibling)) {
+                        continue;
+                    }
+                    const labelName = getJSXElementName(previousSibling.openingElement);
+                    const fieldComponentMessage = BASE_TO_FIELD_MESSAGE_MAP[childName] ?? "the appropriate *Field component";
+                    const fieldComponentAutofix = getAutofixFieldName(childName, child.openingElement);
+                    const labelContent = extractLabelContent(previousSibling, sourceCode);
+                    context.report({
+                        node: child,
+                        messageId: "preferFieldComponent",
+                        data: {
+                            labelComponent: labelName ?? "Label/Text",
+                            baseComponent: childName,
+                            fieldComponent: fieldComponentMessage,
+                        },
+                        fix: fieldComponentAutofix !== null && labelContent !== null
+                            ? fixer => {
+                                const fixes = [];
+                                const labelPropValue = buildLabelPropValue(labelContent);
+                                const fullSourceText = sourceCode.getText();
+                                // 1. Replace everything from Label start through the base component's tag name
+                                //    in a single operation: <Label>...</Label>\n...<BaseSelect → <SelectField label={...}
+                                fixes.push(fixer.replaceTextRange([previousSibling.range[0], child.openingElement.name.range[1]], `<${fieldComponentAutofix} label=${labelPropValue}`));
+                                // 2. Rename the closing tag if present (for non-self-closing elements)
+                                if (child.closingElement !== null) {
+                                    fixes.push(fixer.replaceText(child.closingElement.name, fieldComponentAutofix));
+                                }
+                                // 3. Update imports: add the field component, remove base/label if no longer used.
+                                //    All modifications to the same import declaration are combined into a single fix.
+                                const baseUsageCount = countJSXElementUsages(fullSourceText, childName);
+                                const labelUsageCount = labelName !== null ? countJSXElementUsages(fullSourceText, labelName) : 0;
+                                // Handle @trackunit/react-form-components import
+                                const formImport = (0, import_utils_1.findImportDeclaration)(sourceCode, FORM_COMPONENTS_PACKAGE);
+                                if (formImport) {
+                                    const specifiers = (0, import_utils_1.getImportSpecifiers)(formImport);
+                                    // Add field component
+                                    specifiers.add(fieldComponentAutofix);
+                                    // Remove base component if this is the only JSX usage
+                                    if (baseUsageCount <= 1) {
+                                        specifiers.delete(childName);
+                                    }
+                                    // Remove Label if it's from this package and this is the only JSX usage
+                                    if (labelName === "Label" && labelUsageCount <= 1) {
+                                        specifiers.delete("Label");
+                                    }
+                                    fixes.push(fixer.replaceText(formImport, buildImportStatement(sourceCode, formImport, specifiers)));
+                                }
+                                // Handle @trackunit/react-components import (for Text removal)
+                                if (labelName === "Text" && labelUsageCount <= 1) {
+                                    const reactImport = (0, import_utils_1.findImportDeclaration)(sourceCode, REACT_COMPONENTS_PACKAGE);
+                                    if (reactImport) {
+                                        const specifiers = (0, import_utils_1.getImportSpecifiers)(reactImport);
+                                        if (specifiers.has("Text")) {
+                                            specifiers.delete("Text");
+                                            if (specifiers.size === 0) {
+                                                fixes.push(fixer.remove(reactImport));
+                                            }
+                                            else {
+                                                fixes.push(fixer.replaceText(reactImport, buildImportStatement(sourceCode, reactImport, specifiers)));
+                                            }
+                                        }
+                                    }
+                                }
+                                return fixes;
+                            }
+                            : null,
+                    });
+                }
+            },
+        };
+    },
+});
+//# sourceMappingURL=prefer-field-components.js.map

package/src/lib/rules/prefer-field-components/prefer-field-components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prefer-field-components.js","sourceRoot":"","sources":["../../../../../../../../libs/eslint/plugin-trackunit/src/lib/rules/prefer-field-components/prefer-field-components.ts"],"names":[],"mappings":"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","sourcesContent":["import { AST_NODE_TYPES, ESLintUtils, TSESTree } from \"@typescript-eslint/utils\";\nimport { findImportDeclaration, getImportSpecifiers } from \"../../utils/import-utils\";\n\nconst createRule = ESLintUtils.RuleCreator(\n  name => `https://github.com/trackunit/manager/blob/main/libs/eslint/plugin-trackunit/src/lib/rules/${name}/README.md`\n);\n\ntype MessageIds = \"preferFieldComponent\";\n\nconst FORM_COMPONENTS_PACKAGE = \"@trackunit/react-form-components\";\nconst REACT_COMPONENTS_PACKAGE = \"@trackunit/react-components\";\n\n/**\n * Map of base component names to their recommended Field component replacements\n * used in the error message (human-readable, may contain alternatives).\n */\nconst BASE_TO_FIELD_MESSAGE_MAP: Record<string, string> = {\n  BaseSelect: \"SelectField (or MultiSelectField for multi-select)\",\n  CreatableSelect: \"CreatableSelectField\",\n  BaseInput: \"TextField (or the appropriate *Field component for your input type)\",\n  TextBaseInput: \"TextField\",\n  NumberBaseInput: \"NumberField\",\n  DateBaseInput: \"DateField\",\n  PhoneBaseInput: \"PhoneField\",\n  TextAreaBaseInput: \"TextAreaField\",\n  PasswordBaseInput: \"PasswordField\",\n  EmailBaseInput: \"EmailField\",\n  UrlBaseInput: \"UrlField\",\n};\n\n/**\n * Map used for autofix — always resolves to a single concrete component name.\n *\n * NOTE: BaseSelect and CreatableSelect are intentionally excluded here.\n * SelectField and CreatableSelectField have different value/onChange APIs\n * compared to their base counterparts:\n *   - BaseSelect uses `value={optionObject}` and `onChange={(option) => ...}`\n *   - SelectField uses `value={rawValue}` and `onChange={(event) => ...}`\n * Auto-fixing would silently break the component's behaviour.\n *\n * BaseSelect with isMulti → MultiSelectField IS compatible and is handled\n * separately in getAutofixFieldName().\n */\nconst BASE_TO_FIELD_AUTOFIX_MAP: Record<string, string> = {\n  BaseInput: \"TextField\",\n  TextBaseInput: \"TextField\",\n  NumberBaseInput: \"NumberField\",\n  DateBaseInput: \"DateField\",\n  PhoneBaseInput: \"PhoneField\",\n  TextAreaBaseInput: \"TextAreaField\",\n  PasswordBaseInput: \"PasswordField\",\n  EmailBaseInput: \"EmailField\",\n  UrlBaseInput: \"UrlField\",\n};\n\nconst BASE_COMPONENT_NAMES = new Set(Object.keys(BASE_TO_FIELD_MESSAGE_MAP));\n\n/**\n * Component names that act as a manual label above a base input/select.\n */\nconst LABEL_COMPONENT_NAMES = new Set([\"Label\", \"Text\"]);\n\n/**\n * Get the JSX element name from a JSXOpeningElement.\n * Returns null for member expressions or namespaced names.\n */\nfunction getJSXElementName(openingElement: TSESTree.JSXOpeningElement): string | null {\n  if (openingElement.name.type === AST_NODE_TYPES.JSXIdentifier) {\n    return openingElement.name.name;\n  }\n  return null;\n}\n\n/**\n * Check if a JSX child is a JSXText node that only contains whitespace.\n */\nfunction isWhitespaceText(child: TSESTree.JSXChild): boolean {\n  return child.type === AST_NODE_TYPES.JSXText && child.value.trim() === \"\";\n}\n\n/**\n * Check if a JSX child is a label-like element (Label or Text).\n */\nfunction isLabelLikeElement(child: TSESTree.JSXChild): child is TSESTree.JSXElement {\n  if (child.type !== AST_NODE_TYPES.JSXElement) {\n    return false;\n  }\n  const name = getJSXElementName(child.openingElement);\n  return name !== null && LABEL_COMPONENT_NAMES.has(name);\n}\n\n/**\n * Find the previous non-whitespace sibling in a list of JSX children.\n */\nfunction getPreviousNonWhitespaceSibling(\n  children: Array<TSESTree.JSXChild>,\n  currentIndex: number\n): TSESTree.JSXChild | null {\n  for (let i = currentIndex - 1; i >= 0; i--) {\n    const sibling = children[i];\n    if (sibling !== undefined && !isWhitespaceText(sibling)) {\n      return sibling;\n    }\n  }\n  return null;\n}\n\n/**\n * Check if a JSXOpeningElement has a specific boolean or truthy prop.\n */\nfunction hasJSXProp(openingElement: TSESTree.JSXOpeningElement, propName: string): boolean {\n  return openingElement.attributes.some(\n    attr =>\n      attr.type === AST_NODE_TYPES.JSXAttribute &&\n      attr.name.type === AST_NODE_TYPES.JSXIdentifier &&\n      attr.name.name === propName\n  );\n}\n\ntype LabelContent = { type: \"string\"; value: string } | { type: \"expression\"; text: string };\n\n/**\n * Extract the meaningful label content from a Label/Text element's children.\n *\n * Returns null if the content is too complex to autofix (e.g. multiple meaningful\n * children, or JSX element children).\n */\nfunction extractLabelContent(\n  labelElement: TSESTree.JSXElement,\n  sourceCode: Readonly<{ getText(node: TSESTree.Node): string }>\n): LabelContent | null {\n  // Filter out whitespace-only text children\n  const meaningfulChildren = labelElement.children.filter(node => {\n    if (node.type === AST_NODE_TYPES.JSXText) {\n      return node.value.trim() !== \"\";\n    }\n    return true;\n  });\n\n  if (meaningfulChildren.length !== 1) {\n    return null; // Complex content — skip autofix\n  }\n\n  const child = meaningfulChildren[0];\n  if (child === undefined) {\n    return null;\n  }\n\n  if (child.type === AST_NODE_TYPES.JSXText) {\n    const trimmed = child.value.trim();\n    if (trimmed.length === 0) {\n      return null;\n    }\n    return { type: \"string\", value: trimmed };\n  }\n\n  if (child.type === AST_NODE_TYPES.JSXExpressionContainer) {\n    if (child.expression.type === AST_NODE_TYPES.JSXEmptyExpression) {\n      return null;\n    }\n    return { type: \"expression\", text: sourceCode.getText(child.expression) };\n  }\n\n  return null;\n}\n\n/**\n * Determine the field component name for autofix.\n *\n * Returns null (no autofix) for BaseSelect without isMulti and CreatableSelect,\n * because SelectField/CreatableSelectField have incompatible value/onChange APIs.\n *\n * BaseSelect with isMulti → MultiSelectField is safe because MultiSelectField\n * preserves the same option-object-based value/onChange API as BaseSelect.\n */\nfunction getAutofixFieldName(baseComponentName: string, openingElement: TSESTree.JSXOpeningElement): string | null {\n  if (baseComponentName === \"BaseSelect\" && hasJSXProp(openingElement, \"isMulti\")) {\n    return \"MultiSelectField\";\n  }\n  return BASE_TO_FIELD_AUTOFIX_MAP[baseComponentName] ?? null;\n}\n\n/**\n * Build the label prop string for the autofix.\n */\nfunction buildLabelPropValue(content: LabelContent): string {\n  switch (content.type) {\n    case \"string\":\n      return `\"${content.value}\"`;\n    case \"expression\":\n      return `{${content.text}}`;\n    default: {\n      const _exhaustiveCheck: never = content;\n      return _exhaustiveCheck;\n    }\n  }\n}\n\n/**\n * Count how many times a component is used as a JSX opening tag in the source text.\n * Uses a regex that matches `<ComponentName` followed by whitespace, `>`, or `/>`.\n */\nfunction countJSXElementUsages(sourceText: string, componentName: string): number {\n  const pattern = new RegExp(`<${componentName}(?=[\\\\s/>])`, \"g\");\n  const matches = sourceText.match(pattern);\n  return matches ? matches.length : 0;\n}\n\n/**\n * Build a new import statement string with the given specifiers, preserving semicolons.\n */\nfunction buildImportStatement(\n  sourceCode: Readonly<{ getText(node: TSESTree.Node): string }>,\n  importNode: TSESTree.ImportDeclaration,\n  specifiers: Iterable<string>\n): string {\n  const sortedSpecifiers = Array.from(specifiers).sort().join(\", \");\n  const originalText = sourceCode.getText(importNode);\n  const semicolon = originalText.trimEnd().endsWith(\";\") ? \";\" : \"\";\n  return `import { ${sortedSpecifiers} } from \"${importNode.source.value}\"${semicolon}`;\n}\n\nexport const preferFieldComponents = createRule<[], MessageIds>({\n  name: \"prefer-field-components\",\n  meta: {\n    type: \"suggestion\",\n    fixable: \"code\",\n    docs: {\n      description:\n        \"Prefer using Field components (e.g. SelectField, TextField) instead of manually combining Label/Text with base input components (e.g. BaseSelect, BaseInput).\",\n    },\n    schema: [],\n    messages: {\n      preferFieldComponent:\n        \"Avoid using {{labelComponent}} with {{baseComponent}}. Use {{fieldComponent}} instead, which includes a built-in label via the `label` prop.\",\n    },\n  },\n  defaultOptions: [],\n  create(context) {\n    const sourceCode = context.sourceCode;\n\n    return {\n      JSXElement(node: TSESTree.JSXElement) {\n        const children = node.children;\n\n        for (let i = 0; i < children.length; i++) {\n          const child = children[i];\n\n          // Only look at JSXElement children\n          if (child === undefined || child.type !== AST_NODE_TYPES.JSXElement) {\n            continue;\n          }\n\n          const childName = getJSXElementName(child.openingElement);\n\n          // Check if this child is a base component\n          if (childName === null || !BASE_COMPONENT_NAMES.has(childName)) {\n            continue;\n          }\n\n          // Found a base component — check if the previous non-whitespace sibling is a Label/Text\n          const previousSibling = getPreviousNonWhitespaceSibling(children, i);\n\n          if (previousSibling === null || !isLabelLikeElement(previousSibling)) {\n            continue;\n          }\n\n          const labelName = getJSXElementName(previousSibling.openingElement);\n          const fieldComponentMessage = BASE_TO_FIELD_MESSAGE_MAP[childName] ?? \"the appropriate *Field component\";\n          const fieldComponentAutofix = getAutofixFieldName(childName, child.openingElement);\n          const labelContent = extractLabelContent(previousSibling, sourceCode);\n\n          context.report({\n            node: child,\n            messageId: \"preferFieldComponent\",\n            data: {\n              labelComponent: labelName ?? \"Label/Text\",\n              baseComponent: childName,\n              fieldComponent: fieldComponentMessage,\n            },\n            fix:\n              fieldComponentAutofix !== null && labelContent !== null\n                ? fixer => {\n                    const fixes: Array<ReturnType<typeof fixer.replaceText>> = [];\n                    const labelPropValue = buildLabelPropValue(labelContent);\n                    const fullSourceText = sourceCode.getText();\n\n                    // 1. Replace everything from Label start through the base component's tag name\n                    //    in a single operation: <Label>...</Label>\\n...<BaseSelect → <SelectField label={...}\n                    fixes.push(\n                      fixer.replaceTextRange(\n                        [previousSibling.range[0], child.openingElement.name.range[1]],\n                        `<${fieldComponentAutofix} label=${labelPropValue}`\n                      )\n                    );\n\n                    // 2. Rename the closing tag if present (for non-self-closing elements)\n                    if (child.closingElement !== null) {\n                      fixes.push(fixer.replaceText(child.closingElement.name, fieldComponentAutofix));\n                    }\n\n                    // 3. Update imports: add the field component, remove base/label if no longer used.\n                    //    All modifications to the same import declaration are combined into a single fix.\n                    const baseUsageCount = countJSXElementUsages(fullSourceText, childName);\n                    const labelUsageCount = labelName !== null ? countJSXElementUsages(fullSourceText, labelName) : 0;\n\n                    // Handle @trackunit/react-form-components import\n                    const formImport = findImportDeclaration(sourceCode, FORM_COMPONENTS_PACKAGE);\n                    if (formImport) {\n                      const specifiers = getImportSpecifiers(formImport);\n\n                      // Add field component\n                      specifiers.add(fieldComponentAutofix);\n\n                      // Remove base component if this is the only JSX usage\n                      if (baseUsageCount <= 1) {\n                        specifiers.delete(childName);\n                      }\n\n                      // Remove Label if it's from this package and this is the only JSX usage\n                      if (labelName === \"Label\" && labelUsageCount <= 1) {\n                        specifiers.delete(\"Label\");\n                      }\n\n                      fixes.push(\n                        fixer.replaceText(formImport, buildImportStatement(sourceCode, formImport, specifiers))\n                      );\n                    }\n\n                    // Handle @trackunit/react-components import (for Text removal)\n                    if (labelName === \"Text\" && labelUsageCount <= 1) {\n                      const reactImport = findImportDeclaration(sourceCode, REACT_COMPONENTS_PACKAGE);\n                      if (reactImport) {\n                        const specifiers = getImportSpecifiers(reactImport);\n                        if (specifiers.has(\"Text\")) {\n                          specifiers.delete(\"Text\");\n                          if (specifiers.size === 0) {\n                            fixes.push(fixer.remove(reactImport));\n                          } else {\n                            fixes.push(\n                              fixer.replaceText(reactImport, buildImportStatement(sourceCode, reactImport, specifiers))\n                            );\n                          }\n                        }\n                      }\n                    }\n\n                    return fixes;\n                  }\n                : null,\n          });\n        }\n      },\n    };\n  },\n});\n"]}

package/src/lib/rules/prefer-mouse-event-handler-in-react-props/prefer-mouse-event-handler-in-react-props.d.ts

@@ -0,0 +1,26 @@
+/**
+ * ESLint rule: prefer-mouse-event-handler-in-react-props
+ *
+ * Enforces using MouseEventHandler<T> instead of () => void or (e: MouseEvent) => void
+ * for onClick* props in React components. This ensures proper React typing and consistency.
+ *
+ * Only flags properties in actual React component props, not in hook options or other interfaces.
+ *
+ * Uses ESLint suggestions (not autofix) to let users choose the appropriate element type.
+ */
+import { ESLintUtils } from "@typescript-eslint/utils";
+type Options = [
+    {
+        /**
+         * Prop names to exempt from this rule.
+         *
+         * @example ["onClick"]
+         */
+        allowedNames?: ReadonlyArray<string>;
+    }
+];
+type MessageIds = "preferMouseEventHandler" | "suggestMouseEventHandler";
+export declare const preferMouseEventHandlerInReactProps: ESLintUtils.RuleModule<MessageIds, Options, unknown, ESLintUtils.RuleListener> & {
+    name: string;
+};
+export {};