feat(enforce-ref-last-prop): add fixer

packages/eslint-plugin-calcite-components/src/rules/enforce-ref-last-prop.ts

@@ -17,20 +17,37 @@ const rule: Rule.RuleModule = {
       JSXIdentifier(node) {
         const openingElement = node.parent as JSXOpeningElement;
         if (openingElement.type === "JSXOpeningElement") {
-          const attributes: string[] = [];
+          const attributes: (JSXAttribute | JSXSpreadAttribute)[] = [];
 
           openingElement.attributes.forEach((attr: JSXAttribute | JSXSpreadAttribute) => {
             if (attr.type === "JSXAttribute" && attr.name?.type === "JSXIdentifier") {
-              attributes.push(attr.name.name);
+              attributes.push(attr);
             }
           });
 
-          const refAttribute = attributes.find((attr: string) => attr === "ref");
+          const refAttribute = attributes.find(
+            (attr: JSXAttribute | JSXSpreadAttribute) =>
+              attr.type === "JSXAttribute" && attr.name?.type === "JSXIdentifier" && attr.name.name === "ref",
+          );
 
           if (refAttribute && attributes.indexOf(refAttribute) !== attributes.length - 1) {
             context.report({
               node,
               message: `"ref" prop should be placed last in JSX to ensure the node attrs/props are in sync.`,
+              fix(fixer) {
+                const sourceCode = context.getSourceCode();
+
+                const refAttrText = sourceCode.getText(refAttribute as typeof node);
+                const otherAttrs = attributes.filter((attr) => attr !== refAttribute);
+
+                return [
+                  fixer.remove(refAttribute as typeof node),
+                  fixer.insertTextAfterRange(
+                    [otherAttrs[otherAttrs.length - 1].range[1], otherAttrs[otherAttrs.length - 1].range[1]],
+                    ` // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n${refAttrText}`,
+                  ),
+                ];
+              },
             });
           }
         }

packages/eslint-plugin-calcite-components/tests/lib/rules/enforce-ref-last-prop/enforce-ref-last-prop.good.tsx

@@ -11,6 +11,7 @@ export class SampleTag {
             /* click! */
           }}
           tabIndex={0}
+          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
           ref={(el: HTMLDivElement): void => {
             /* refEl */
           }}