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

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

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getJsxElementByName = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+/**
+ * Given a component name finds its JSX usage
+ */
+var getJsxElementByName = exports.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 = (0, _slicedToArray2.default)(_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 ((0, _eslintCodemodUtils.isNodeOfType)(firstIdentifier, 'JSXIdentifier') && !(0, _eslintCodemodUtils.isNodeOfType)(secondIdentifier, 'JSXIdentifier')) {
+    jsxUsage = firstIdentifier;
+  } else if ((0, _eslintCodemodUtils.isNodeOfType)(secondIdentifier, 'JSXIdentifier') && !(0, _eslintCodemodUtils.isNodeOfType)(firstIdentifier, 'JSXIdentifier')) {
+    jsxUsage = secondIdentifier;
+  } else {
+    return;
+  }
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(jsxUsage, 'JSXIdentifier')) {
+    return;
+  }
+  var jsxOpeningElement = jsxUsage.parent;
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(jsxOpeningElement, 'JSXOpeningElement')) {
+    return;
+  }
+  return jsxOpeningElement;
+};

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

@@ -0,0 +1,42 @@
+/**
+ * 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 const 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 const 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 const allSpaceMap = {
+  ...positiveSpaceMap,
+  ...negativeSpaceMap
+};
+
+/**
+ * @codegenEnd
+ */

package/dist/es2019/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/es2019/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5a5b0ed8cf86631274d7d30df4199e5d>>
+ * @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',

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::af55c21605e3b8ee7836cb8950a9f713>>
+ * @codegen <<SignedSource::73a3666b244b58cc221eebcda071161d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5e5b4678175cdf8209b7e2443bc4abb4>>
+ * @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';
@@ -52,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,

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

@@ -0,0 +1,33 @@
+import { createLintRule } from '../utils/create-rule';
+import { JSXElement, StyledComponent } from './node-types';
+const 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(context) {
+    return {
+      // transforms styled.<anchor>(...) usages
+      CallExpression(node) {
+        StyledComponent.lint(node, {
+          context
+        });
+      },
+      // transforms <anchor css={...}> usages
+      JSXElement(node) {
+        JSXElement.lint(node, {
+          context
+        });
+      }
+    };
+  }
+});
+export default rule;

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

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

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

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

package/dist/es2019/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 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.a` or `styled2.a`
+ */
+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-anchor/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: 'noHtmlAnchor',
+      data: {
+        name: node.callee.property.name
+      }
+    });
+  }
+};

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

@@ -0,0 +1,56 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../ast-nodes';
+const 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
+  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-anchor/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/no-html-button/index.js

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

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

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

package/dist/es2019/rules/no-html-button/node-types/jsx-element/index.js

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

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;
+};