@atlaskit/eslint-plugin-design-system 9.6.0 → 10.0.0

package/dist/es2019/rules/no-html-button/node-types/styled-component/get-styled-component-call.js

@@ -0,0 +1,42 @@
+import { closestOfType, isNodeOfType } from 'eslint-codemod-utils';
+
+/**
+ * Returns a styled component
+ */
+
+export const getStyledComponentCall = node => {
+  // halts unless we are dealing with a styled component
+  if (!isStyledCallExpression(node)) {
+    return;
+  }
+  // halts if the component is being exported directly
+  if (closestOfType(node, 'ExportNamedDeclaration')) {
+    return;
+  }
+  const styledComponentVariableRef = node.parent;
+  // halts if the styled component is not assigned to a variable immediately
+  if (!isNodeOfType(styledComponentVariableRef, 'VariableDeclarator')) {
+    return;
+  }
+  return styledComponentVariableRef;
+};
+
+/**
+ * Some verbose precondition checks but all it does is check
+ * a call expression is of form `styled.button` or `styled2.button`
+ */
+const isStyledCallExpression = call => {
+  if (!isNodeOfType(call, 'CallExpression')) {
+    return false;
+  }
+  if (!isNodeOfType(call.callee, 'MemberExpression')) {
+    return false;
+  }
+  if (!isNodeOfType(call.callee.object, 'Identifier') || !isNodeOfType(call.callee.property, 'Identifier')) {
+    return false;
+  }
+  if (/^styled2?$/.test(call.callee.object.name)) {
+    return true;
+  }
+  return false;
+};

package/dist/es2019/rules/no-html-button/node-types/styled-component/index.js

@@ -0,0 +1,32 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { getJsxElementByName } from '../../utils/get-jsx-element-by-name';
+import { isSupportedForLint } from '../supported';
+import { getStyledComponentCall } from './get-styled-component-call';
+export const StyledComponent = {
+  lint(node, {
+    context
+  }) {
+    var _getJsxElementByName;
+    if (!isNodeOfType(node, 'CallExpression') || !isNodeOfType(node.callee, 'MemberExpression') || !isNodeOfType(node.callee.object, 'Identifier') || !isNodeOfType(node.callee.property, 'Identifier')) {
+      return;
+    }
+    const styles = getStyledComponentCall(node);
+    const elementName = node.callee.property.name;
+    if (!styles || !isNodeOfType(styles.id, 'Identifier')) {
+      return;
+    }
+    const jsxElement = (_getJsxElementByName = getJsxElementByName(styles.id.name, context.getScope())) === null || _getJsxElementByName === void 0 ? void 0 : _getJsxElementByName.parent;
+    if (jsxElement && !isSupportedForLint(jsxElement, elementName)) {
+      return;
+    }
+    context.report({
+      node: styles,
+      messageId: 'noHtmlButton',
+      data: {
+        name: node.callee.property.name
+      }
+    });
+  }
+};

package/dist/es2019/rules/no-html-button/node-types/supported.js

@@ -0,0 +1,69 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../ast-nodes';
+const supportedElements = [{
+  name: 'button'
+}, {
+  name: 'input',
+  attributes: [{
+    name: 'type',
+    // Values from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#best_practices
+    values: ['submit', 'reset', 'button', 'image']
+  }]
+}, {
+  name: '*',
+  attributes: [{
+    name: 'role',
+    values: ['button']
+  }]
+}];
+
+/**
+ * Determines if the given JSX element is a supported element to lint with this rule.
+ */
+export function isSupportedForLint(jsxNode, elementName) {
+  if (!isNodeOfType(jsxNode, 'JSXElement')) {
+    return false;
+  }
+
+  // Allow passing in the element name because the jsxNode doesn't
+  // represent the element name with styled components
+  const elName = elementName || ast.JSXElement.getName(jsxNode);
+  if (!elName) {
+    return false;
+  }
+
+  // Only check native HTML elements, not components
+  if (elName[0] !== elName[0].toLowerCase()) {
+    return false;
+  }
+  let supportedElement = supportedElements.find(({
+    name
+  }) => name === elName);
+  if (!supportedElement) {
+    supportedElement = supportedElements.find(({
+      name
+    }) => name === '*');
+  }
+  if (!supportedElement) {
+    return false;
+  }
+
+  // Check if the element has any attributes that are not supported
+  const attributes = ast.JSXElement.getAttributes(jsxNode);
+  if (supportedElement.attributes && !supportedElement.attributes.every(({
+    name,
+    values
+  }) => {
+    return attributes.some(attribute => {
+      if (attribute.type === 'JSXSpreadAttribute') {
+        return false;
+      }
+      const isMatchingName = attribute.name.name === name;
+      const isMatchingValues = values && attribute.value && attribute.value.type === 'Literal' && typeof attribute.value.value === 'string' && (values === null || values === void 0 ? void 0 : values.includes(attribute.value.value));
+      return isMatchingName && isMatchingValues;
+    });
+  })) {
+    return false;
+  }
+  return true;
+}

package/dist/es2019/rules/no-html-button/utils/get-jsx-element-by-name.js

@@ -0,0 +1,39 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+
+/**
+ * Given a component name finds its JSX usage
+ */
+export const getJsxElementByName = (componentName, scope) => {
+  var _variableDeclaration$;
+  const variableDeclaration = scope.variables.find(v => v.name === componentName);
+  if (!variableDeclaration) {
+    return;
+  }
+
+  // length here should be exactly 2 to indicate only two references:
+  // one being the variable declaration itself
+  // second being the JSX call site
+  // we might consider handling multiple local JSX call sites in the future
+  // but "this is good enough for now"™️
+  if (variableDeclaration.references.length !== 2) {
+    return;
+  }
+  let jsxUsage = (_variableDeclaration$ = variableDeclaration.references[1]) === null || _variableDeclaration$ === void 0 ? void 0 : _variableDeclaration$.identifier;
+  const [firstIdentifier, secondIdentifier] = variableDeclaration.references.map(ref => ref === null || ref === void 0 ? void 0 : ref.identifier);
+  // Check if the first reference is a JSXOpeningElement and the second is not or vice versa
+  if (isNodeOfType(firstIdentifier, 'JSXIdentifier') && !isNodeOfType(secondIdentifier, 'JSXIdentifier')) {
+    jsxUsage = firstIdentifier;
+  } else if (isNodeOfType(secondIdentifier, 'JSXIdentifier') && !isNodeOfType(firstIdentifier, 'JSXIdentifier')) {
+    jsxUsage = secondIdentifier;
+  } else {
+    return;
+  }
+  if (!isNodeOfType(jsxUsage, 'JSXIdentifier')) {
+    return;
+  }
+  const jsxOpeningElement = jsxUsage.parent;
+  if (!isNodeOfType(jsxOpeningElement, 'JSXOpeningElement')) {
+    return;
+  }
+  return jsxOpeningElement;
+};

package/dist/es2019/rules/use-popup-label/index.js

@@ -0,0 +1,80 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+const elementsAccessibleNameProps = ['label', 'titleId'];
+const rule = createLintRule({
+  meta: {
+    name: 'use-popup-label',
+    type: 'suggestion',
+    docs: {
+      description: 'Encourages to provide accessible name for Atlassian Design System Popup component.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      missingLabelProp: 'Missing accessible name. If there is no visible content to associate use `label` prop, otherwise pass id of element to `titleId` prop to be associated as label.',
+      labelPropShouldHaveContents: 'Define string that labels the interactive element.',
+      titleIdShouldHaveValue: '`titleId` should reference the id of element that define accessible name.',
+      noBothPropsUsage: 'Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.'
+    },
+    hasSuggestions: true
+  },
+  create(context) {
+    const contextLocalIdentifier = [];
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value === '@atlaskit/popup') {
+          if (node.specifiers.length) {
+            const defaultImport = node.specifiers.filter(spec => spec.type === 'ImportDefaultSpecifier');
+            if (defaultImport.length) {
+              const {
+                local
+              } = defaultImport[0];
+              contextLocalIdentifier.push(local.name);
+            }
+          }
+        }
+      },
+      JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        const name = node.openingElement.name.name;
+        if (contextLocalIdentifier.includes(name)) {
+          const componentRoleDialogProp = node.openingElement.attributes.find(attr => isNodeOfType(attr, 'JSXAttribute') && isNodeOfType(attr.name, 'JSXIdentifier') && attr.value && isNodeOfType(attr.value, 'Literal') && attr.name.name === 'role' && attr.value.value === 'dialog');
+          const componentLabelProps = node.openingElement.attributes.filter(attr => isNodeOfType(attr, 'JSXAttribute') && isNodeOfType(attr.name, 'JSXIdentifier') && elementsAccessibleNameProps.includes(attr.name.name));
+          if (componentLabelProps.length === 1) {
+            const prop = componentLabelProps[0];
+            if ('value' in prop && prop.value) {
+              if (isNodeOfType(prop.value, 'Literal') && !prop.value.value || isNodeOfType(prop.value, 'JSXExpressionContainer') && !prop.value.expression) {
+                context.report({
+                  node: prop,
+                  messageId: prop.name.name === 'label' ? 'labelPropShouldHaveContents' : 'titleIdShouldHaveValue'
+                });
+              }
+            }
+          } else if (componentLabelProps.length > 1) {
+            context.report({
+              node: node.openingElement,
+              messageId: 'noBothPropsUsage'
+            });
+          } else {
+            if (componentRoleDialogProp) {
+              context.report({
+                node: node.openingElement,
+                messageId: 'missingLabelProp'
+              });
+            } else {
+              return;
+            }
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/esm/common/token-maps.partial.js

@@ -0,0 +1,42 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::30c84f908843af1f250860b6f3deeea0>>
+ * @codegenId spacing
+ * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen-token-maps
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
+ */
+export var positiveSpaceMap = {
+  '0px': 'space.0',
+  '2px': 'space.025',
+  '4px': 'space.050',
+  '6px': 'space.075',
+  '8px': 'space.100',
+  '12px': 'space.150',
+  '16px': 'space.200',
+  '20px': 'space.250',
+  '24px': 'space.300',
+  '32px': 'space.400',
+  '40px': 'space.500',
+  '48px': 'space.600',
+  '64px': 'space.800',
+  '80px': 'space.1000'
+};
+export var negativeSpaceMap = {
+  '-2px': 'space.negative.025',
+  '-4px': 'space.negative.050',
+  '-6px': 'space.negative.075',
+  '-8px': 'space.negative.100',
+  '-12px': 'space.negative.150',
+  '-16px': 'space.negative.200',
+  '-20px': 'space.negative.250',
+  '-24px': 'space.negative.300',
+  '-32px': 'space.negative.400'
+};
+export var allSpaceMap = _objectSpread(_objectSpread({}, positiveSpaceMap), negativeSpaceMap);
+
+/**
+ * @codegenEnd
+ */

package/dist/esm/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::11fe367c1ab4107f7418a84fa435cc23>>
+ * @codegen <<SignedSource::a1bb0f17560603fa4895326b1d50744e>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import all from './presets/all.codegen';

package/dist/esm/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::1ab11547db880eba1206f334a9b2150f>>
+ * @codegen <<SignedSource::0be7639a95bf4c9bbfe00154d8193477>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -19,7 +19,8 @@ export default {
     '@atlaskit/design-system/no-empty-styled-expression': 'warn',
     '@atlaskit/design-system/no-exported-css': 'warn',
     '@atlaskit/design-system/no-exported-keyframes': 'warn',
-    '@atlaskit/design-system/no-html-button-element': 'warn',
+    '@atlaskit/design-system/no-html-anchor': 'warn',
+    '@atlaskit/design-system/no-html-button': 'warn',
     '@atlaskit/design-system/no-invalid-css-map': 'error',
     '@atlaskit/design-system/no-keyframes-tagged-template-expression': 'error',
     '@atlaskit/design-system/no-margin': 'warn',
@@ -35,6 +36,7 @@ export default {
     '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
+    '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-tokens-space': 'error',

package/dist/esm/presets/recommended.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::05b4fe8f97edc4f7e46ded52b4917037>>
+ * @codegen <<SignedSource::73a3666b244b58cc221eebcda071161d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -26,6 +26,7 @@ export default {
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
+    '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }
 };

package/dist/esm/rules/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::293575f7bd0150862f792e3fffc286c4>>
+ * @codegen <<SignedSource::9b934590b0ff7880e962fa4dd73bdb0b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -16,7 +16,8 @@ import noDirectUseOfWebPlatformDragAndDrop from './no-direct-use-of-web-platform
 import noEmptyStyledExpression from './no-empty-styled-expression';
 import noExportedCss from './no-exported-css';
 import noExportedKeyframes from './no-exported-keyframes';
-import noHtmlButtonElement from './no-html-button-element';
+import noHtmlAnchor from './no-html-anchor';
+import noHtmlButton from './no-html-button';
 import noInvalidCssMap from './no-invalid-css-map';
 import noKeyframesTaggedTemplateExpression from './no-keyframes-tagged-template-expression';
 import noMargin from './no-margin';
@@ -32,6 +33,7 @@ import useDrawerLabel from './use-drawer-label';
 import useHeading from './use-heading';
 import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-card';
 import useHrefInLinkItem from './use-href-in-link-item';
+import usePopupLabel from './use-popup-label';
 import usePrimitives from './use-primitives';
 import usePrimitivesText from './use-primitives-text';
 import useTokensSpace from './use-tokens-space';
@@ -51,7 +53,8 @@ export default {
   'no-empty-styled-expression': noEmptyStyledExpression,
   'no-exported-css': noExportedCss,
   'no-exported-keyframes': noExportedKeyframes,
-  'no-html-button-element': noHtmlButtonElement,
+  'no-html-anchor': noHtmlAnchor,
+  'no-html-button': noHtmlButton,
   'no-invalid-css-map': noInvalidCssMap,
   'no-keyframes-tagged-template-expression': noKeyframesTaggedTemplateExpression,
   'no-margin': noMargin,
@@ -67,6 +70,7 @@ export default {
   'use-heading': useHeading,
   'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
   'use-href-in-link-item': useHrefInLinkItem,
+  'use-popup-label': usePopupLabel,
   'use-primitives': usePrimitives,
   'use-primitives-text': usePrimitivesText,
   'use-tokens-space': useTokensSpace,

package/dist/esm/rules/no-html-anchor/index.js

@@ -0,0 +1,33 @@
+import { createLintRule } from '../utils/create-rule';
+import { JSXElement as _JSXElement, StyledComponent } from './node-types';
+var rule = createLintRule({
+  meta: {
+    name: 'no-html-anchor',
+    type: 'suggestion',
+    docs: {
+      description: 'Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components.',
+      recommended: false,
+      severity: 'warn'
+    },
+    messages: {
+      noHtmlAnchor: "This <{{ name }}> should be replaced with a link component from the Atlassian Design System, such as the \"Link\" or \"LinkButton\" component when suitable. For custom links use the \"Anchor\" primitive. ADS links include event tracking, automatic router configuration, ensure accessible implementations, and provide access to ADS styling features like design tokens."
+    }
+  },
+  create: function create(context) {
+    return {
+      // transforms styled.<anchor>(...) usages
+      CallExpression: function CallExpression(node) {
+        StyledComponent.lint(node, {
+          context: context
+        });
+      },
+      // transforms <anchor css={...}> usages
+      JSXElement: function JSXElement(node) {
+        _JSXElement.lint(node, {
+          context: context
+        });
+      }
+    };
+  }
+});
+export default rule;

package/dist/esm/rules/no-html-anchor/node-types/index.js

@@ -0,0 +1,2 @@
+export { StyledComponent } from './styled-component';
+export { JSXElement } from './jsx-element';

package/dist/esm/rules/no-html-anchor/node-types/jsx-element/index.js

@@ -0,0 +1,19 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import * as ast from '../../../../ast-nodes';
+import { isSupportedForLint } from '../supported';
+export var JSXElement = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context;
+    if (!isSupportedForLint(node)) {
+      return;
+    }
+    context.report({
+      node: node.openingElement,
+      messageId: 'noHtmlAnchor',
+      data: {
+        name: ast.JSXElement.getName(node)
+      }
+    });
+  }
+};

package/dist/esm/rules/no-html-anchor/node-types/styled-component/get-styled-component-call.js

@@ -0,0 +1,42 @@
+import { closestOfType, isNodeOfType } from 'eslint-codemod-utils';
+
+/**
+ * Returns a styled component
+ */
+
+export var getStyledComponentCall = function getStyledComponentCall(node) {
+  // halts unless we are dealing with a styled component
+  if (!isStyledCallExpression(node)) {
+    return;
+  }
+  // halts if the component is being exported directly
+  if (closestOfType(node, 'ExportNamedDeclaration')) {
+    return;
+  }
+  var styledComponentVariableRef = node.parent;
+  // halts if the styled component is not assigned to a variable immediately
+  if (!isNodeOfType(styledComponentVariableRef, 'VariableDeclarator')) {
+    return;
+  }
+  return styledComponentVariableRef;
+};
+
+/**
+ * Some verbose precondition checks but all it does is check
+ * a call expression is of form `styled.a` or `styled2.a`
+ */
+var isStyledCallExpression = function isStyledCallExpression(call) {
+  if (!isNodeOfType(call, 'CallExpression')) {
+    return false;
+  }
+  if (!isNodeOfType(call.callee, 'MemberExpression')) {
+    return false;
+  }
+  if (!isNodeOfType(call.callee.object, 'Identifier') || !isNodeOfType(call.callee.property, 'Identifier')) {
+    return false;
+  }
+  if (/^styled2?$/.test(call.callee.object.name)) {
+    return true;
+  }
+  return false;
+};

package/dist/esm/rules/no-html-anchor/node-types/styled-component/index.js

@@ -0,0 +1,31 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { getJsxElementByName } from '../../utils/get-jsx-element-by-name';
+import { isSupportedForLint } from '../supported';
+import { getStyledComponentCall } from './get-styled-component-call';
+export var StyledComponent = {
+  lint: function lint(node, _ref) {
+    var _getJsxElementByName;
+    var context = _ref.context;
+    if (!isNodeOfType(node, 'CallExpression') || !isNodeOfType(node.callee, 'MemberExpression') || !isNodeOfType(node.callee.object, 'Identifier') || !isNodeOfType(node.callee.property, 'Identifier')) {
+      return;
+    }
+    var styles = getStyledComponentCall(node);
+    var elementName = node.callee.property.name;
+    if (!styles || !isNodeOfType(styles.id, 'Identifier')) {
+      return;
+    }
+    var jsxElement = (_getJsxElementByName = getJsxElementByName(styles.id.name, context.getScope())) === null || _getJsxElementByName === void 0 ? void 0 : _getJsxElementByName.parent;
+    if (jsxElement && !isSupportedForLint(jsxElement, elementName)) {
+      return;
+    }
+    context.report({
+      node: styles,
+      messageId: 'noHtmlAnchor',
+      data: {
+        name: node.callee.property.name
+      }
+    });
+  }
+};

package/dist/esm/rules/no-html-anchor/node-types/supported.js

@@ -0,0 +1,57 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../ast-nodes';
+var supportedElements = [{
+  name: 'a'
+}];
+
+/**
+ * Determines if the given JSX element is a supported element to lint with this rule.
+ */
+export function isSupportedForLint(jsxNode, elementName) {
+  if (!isNodeOfType(jsxNode, 'JSXElement')) {
+    return false;
+  }
+
+  // Allow passing in the element name because the jsxNode doesn't
+  // represent the element name with styled components
+  var elName = elementName || ast.JSXElement.getName(jsxNode);
+  if (!elName) {
+    return false;
+  }
+
+  // Only check native HTML elements, not components
+  if (elName[0] !== elName[0].toLowerCase()) {
+    return false;
+  }
+  var supportedElement = supportedElements.find(function (_ref) {
+    var name = _ref.name;
+    return name === elName;
+  });
+  if (!supportedElement) {
+    supportedElement = supportedElements.find(function (_ref2) {
+      var name = _ref2.name;
+      return name === '*';
+    });
+  }
+  if (!supportedElement) {
+    return false;
+  }
+
+  // Check if the element has any attributes that are not supported
+  var attributes = ast.JSXElement.getAttributes(jsxNode);
+  if (supportedElement.attributes && !supportedElement.attributes.every(function (_ref3) {
+    var name = _ref3.name,
+      values = _ref3.values;
+    return attributes.some(function (attribute) {
+      if (attribute.type === 'JSXSpreadAttribute') {
+        return false;
+      }
+      var isMatchingName = attribute.name.name === name;
+      var isMatchingValues = values && attribute.value && attribute.value.type === 'Literal' && typeof attribute.value.value === 'string' && (values === null || values === void 0 ? void 0 : values.includes(attribute.value.value));
+      return isMatchingName && isMatchingValues;
+    });
+  })) {
+    return false;
+  }
+  return true;
+}

package/dist/esm/rules/no-html-anchor/utils/get-jsx-element-by-name.js

@@ -0,0 +1,47 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { isNodeOfType } from 'eslint-codemod-utils';
+
+/**
+ * Given a component name finds its JSX usage
+ */
+export var getJsxElementByName = function getJsxElementByName(componentName, scope) {
+  var _variableDeclaration$;
+  var variableDeclaration = scope.variables.find(function (v) {
+    return v.name === componentName;
+  });
+  if (!variableDeclaration) {
+    return;
+  }
+
+  // length here should be exactly 2 to indicate only two references:
+  // one being the variable declaration itself
+  // second being the JSX call site
+  // we might consider handling multiple local JSX call sites in the future
+  // but "this is good enough for now"™️
+  if (variableDeclaration.references.length !== 2) {
+    return;
+  }
+  var jsxUsage = (_variableDeclaration$ = variableDeclaration.references[1]) === null || _variableDeclaration$ === void 0 ? void 0 : _variableDeclaration$.identifier;
+  var _variableDeclaration$2 = variableDeclaration.references.map(function (ref) {
+      return ref === null || ref === void 0 ? void 0 : ref.identifier;
+    }),
+    _variableDeclaration$3 = _slicedToArray(_variableDeclaration$2, 2),
+    firstIdentifier = _variableDeclaration$3[0],
+    secondIdentifier = _variableDeclaration$3[1];
+  // Check if the first reference is a JSXOpeningElement and the second is not or vice versa
+  if (isNodeOfType(firstIdentifier, 'JSXIdentifier') && !isNodeOfType(secondIdentifier, 'JSXIdentifier')) {
+    jsxUsage = firstIdentifier;
+  } else if (isNodeOfType(secondIdentifier, 'JSXIdentifier') && !isNodeOfType(firstIdentifier, 'JSXIdentifier')) {
+    jsxUsage = secondIdentifier;
+  } else {
+    return;
+  }
+  if (!isNodeOfType(jsxUsage, 'JSXIdentifier')) {
+    return;
+  }
+  var jsxOpeningElement = jsxUsage.parent;
+  if (!isNodeOfType(jsxOpeningElement, 'JSXOpeningElement')) {
+    return;
+  }
+  return jsxOpeningElement;
+};