@atlaskit/eslint-plugin-design-system 8.29.1 → 8.31.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.31.0
+
+### Minor Changes
+
+- [#75600](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75600) [`6259d0d74690`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6259d0d74690) - Migrates the ESLint rule from `@atlaskit/design-system/local-cx-xcss` to `@atlaskit/ui-styling-standard/local-cx-xcss`—disruption is unexpected as this rule is not in use.
+
+## 8.30.0
+
+### Minor Changes
+
+- [#75603](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75603) [`51cf4796aa02`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/51cf4796aa02) - Use primitives text component rule
+
 ## 8.29.1
 
 ### Patch Changes

package/README.md

@@ -53,7 +53,6 @@ module.exports = {
 | <a href="./src/rules/ensure-design-token-usage/README.md">ensure-design-token-usage</a>                             | Enforces usage of design tokens rather than hard-coded values.                                                                                                                                                                                                                                                      | Yes         | Yes     | Yes         |
 | <a href="./src/rules/ensure-design-token-usage-preview/README.md">ensure-design-token-usage/preview</a>             | Enforces usage of pre-release design tokens rather than hard-coded values.                                                                                                                                                                                                                                          |             | Yes     | Yes         |
 | <a href="./src/rules/icon-label/README.md">icon-label</a>                                                           | Enforces accessible usage of icon labels when composed with Atlassian Design System components.                                                                                                                                                                                                                     | Yes         | Yes     |             |
-| <a href="./src/rules/local-cx-xcss/README.md">local-cx-xcss</a>                                                     | Ensures the cx() function, which is part of the XCSS API, is only used within the xcss prop. This aids tracking what styles are applied to a jsx element.                                                                                                                                                           | Yes         |         |             |
 | <a href="./src/rules/no-banned-imports/README.md">no-banned-imports</a>                                             | Disallow importing banned modules.                                                                                                                                                                                                                                                                                  | Yes         |         |             |
 | <a href="./src/rules/no-css-tagged-template-expression/README.md">no-css-tagged-template-expression</a>             | Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                          |             | Yes     |             |
 | <a href="./src/rules/no-deprecated-apis/README.md">no-deprecated-apis</a>                                           | Disallow using deprecated APIs.                                                                                                                                                                                                                                                                                     | Yes         |         |             |
@@ -77,6 +76,7 @@ module.exports = {
 | <a href="./src/rules/use-heading-level-in-spotlight-card/README.md">use-heading-level-in-spotlight-card</a>         | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context.                                                                                                                              | Yes         | Yes     |             |
 | <a href="./src/rules/use-href-in-link-item/README.md">use-href-in-link-item</a>                                     | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes         | Yes     | Yes         |
 | <a href="./src/rules/use-primitives/README.md">use-primitives</a>                                                   | Encourage the usage of primitives components.                                                                                                                                                                                                                                                                       |             | Yes     | Yes         |
+| <a href="./src/rules/use-primitives-text/README.md">use-primitives-text</a>                                         | Encourage the usage of text components.                                                                                                                                                                                                                                                                             |             | Yes     | Yes         |
 | <a href="./src/rules/use-visually-hidden/README.md">use-visually-hidden</a>                                         | Enforce usage of the visually hidden component.                                                                                                                                                                                                                                                                     | Yes         | Yes     |             |
 
 <!-- END_RULE_TABLE_CODEGEN -->

package/configs/deprecated.json

@@ -43,11 +43,6 @@
             {
                 "moduleSpecifier": "@atlaskit/logo"
             }
-        ],
-        "enableRemoteAdminLinks": [
-            {
-                "moduleSpecifier": "@atlassian/switcher"
-            }
         ]
     },
     "imports": {

package/constellation/index/usage.mdx

@@ -15,7 +15,6 @@ This plugin contains rules that should be used when working with the [Atlassian
 | <a href="ensure-design-token-usage/usage">ensure-design-token-usage</a>                             | Enforces usage of design tokens rather than hard-coded values.                                                                                                                                                                                                                                                      | Yes         | Yes     | Yes         |
 | <a href="ensure-design-token-usage-preview/usage">ensure-design-token-usage/preview</a>             | Enforces usage of pre-release design tokens rather than hard-coded values.                                                                                                                                                                                                                                          |             | Yes     | Yes         |
 | <a href="icon-label/usage">icon-label</a>                                                           | Enforces accessible usage of icon labels when composed with Atlassian Design System components.                                                                                                                                                                                                                     | Yes         | Yes     |             |
-| <a href="local-cx-xcss/usage">local-cx-xcss</a>                                                     | Ensures the cx() function, which is part of the XCSS API, is only used within the xcss prop. This aids tracking what styles are applied to a jsx element.                                                                                                                                                           | Yes         |         |             |
 | <a href="no-banned-imports/usage">no-banned-imports</a>                                             | Disallow importing banned modules.                                                                                                                                                                                                                                                                                  | Yes         |         |             |
 | <a href="no-css-tagged-template-expression/usage">no-css-tagged-template-expression</a>             | Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                          |             | Yes     |             |
 | <a href="no-deprecated-apis/usage">no-deprecated-apis</a>                                           | Disallow using deprecated APIs.                                                                                                                                                                                                                                                                                     | Yes         |         |             |
@@ -39,6 +38,7 @@ This plugin contains rules that should be used when working with the [Atlassian
 | <a href="use-heading-level-in-spotlight-card/usage">use-heading-level-in-spotlight-card</a>         | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context.                                                                                                                              | Yes         | Yes     |             |
 | <a href="use-href-in-link-item/usage">use-href-in-link-item</a>                                     | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes         | Yes     | Yes         |
 | <a href="use-primitives/usage">use-primitives</a>                                                   | Encourage the usage of primitives components.                                                                                                                                                                                                                                                                       |             | Yes     | Yes         |
+| <a href="use-primitives-text/usage">use-primitives-text</a>                                         | Encourage the usage of text components.                                                                                                                                                                                                                                                                             |             | Yes     | Yes         |
 | <a href="use-visually-hidden/usage">use-visually-hidden</a>                                         | Enforce usage of the visually hidden component.                                                                                                                                                                                                                                                                     | Yes         | Yes     |             |
 
 <!-- END_RULE_TABLE_CODEGEN -->

package/constellation/use-primitives-text/usage.mdx

@@ -0,0 +1,21 @@
+# use-primitives-text
+
+Using primitives allows you to delete bespoke component code and replace it with ready made solutions made by the Atlassian Design System Team.
+
+## Examples
+
+This rule marks code as violations when it can be replaced 1:1 with one or multiple primitive components.
+
+### Incorrect
+
+```jsx
+<span>^^^^^^^^^^^^^^^^^^^^^^ // ...</span>
+```
+
+### Correct
+
+```jsx
+<Text variant="ui">// ...</Text>
+```
+
+Currently, the rule is extremely defensive, only reporting on certain p, span, strong and em elements that don't have any props outside of `key`, `id` and `data-testid`.

package/dist/cjs/ast-nodes/jsx-element.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.JSXElementHelper = exports.JSXElement = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _jsxAttribute = require("./jsx-attribute");
 var JSXElementHelper = exports.JSXElement = exports.JSXElementHelper = {
   /**
    * Names of JSXElements can be any of:
@@ -12,8 +13,8 @@ var JSXElementHelper = exports.JSXElement = exports.JSXElementHelper = {
    * `<MyComponents.Component></MyComponents.Component>` - `MyComponents` is a namespace (JSXNamespacedName)
    * `<MyComponents.Component></MyComponents.Component>` - `MyComponents` is an object (JSXMemberExpression)
    *
-   * Getting the name of a JSXMemberExpression is difficult, because object can contain objects, which is recursively defined in the AST.
-   * e.g. getting the name of `<MyComponents.PresentationLayer.LeftSideBar.Header />` would require `getName` to recursively resolve all parts of the name.
+   * getting the name of a JSXMemberExpression is difficult, because object can contain objects, which is recursively defined in the AST.
+   * e.g. Getting the name of `<MyComponents.PresentationLayer.LeftSideBar.Header />` would require `getName` to recursively resolve all parts of the name.
    * `getName` does not currently have this functionality. Add it if you need it.
    */
   getName: function getName(node) {
@@ -51,5 +52,35 @@ var JSXElementHelper = exports.JSXElement = exports.JSXElementHelper = {
     return node.openingElement.attributes.some(function (attr) {
       return (0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXSpreadAttribute');
     });
+  },
+  addAttribute: function addAttribute(node, name, value, fixer) {
+    var attributeString = " ".concat(name, "='").concat(value, "'");
+    var isSelfClosing = JSXElementHelper.isSelfClosing(node);
+    var start = node.openingElement.range ? node.openingElement.range[0] : 0;
+    var end = node.openingElement.range ? node.openingElement.range[1] - (isSelfClosing ? 3 : 1) : 0;
+    var range = [start, end];
+    var fix = fixer.insertTextAfterRange(range, attributeString);
+    return fix;
+  },
+  getChildren: function getChildren(node) {
+    // Filter out text children with whitespace characters only as JSX removes whitespace used for intendation
+    var filteredChildren = node.children.filter(function (child) {
+      if ((0, _eslintCodemodUtils.isNodeOfType)(child, 'JSXText')) {
+        var whiteSpaceChars = new RegExp('\\s', 'g');
+        return !whiteSpaceChars.test(child.value);
+      }
+      return true;
+    });
+    return filteredChildren;
+  },
+  hasAllowedAttrsOnly: function hasAllowedAttrsOnly(node, allowedProps) {
+    var attrs = JSXElementHelper.getAttributes(node);
+    return attrs.every(function (attr) {
+      if (!(0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute')) {
+        return false;
+      }
+      var name = _jsxAttribute.JSXAttribute.getName(attr);
+      return allowedProps.includes(name);
+    });
   }
 };

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5647ce9c10ba880cffece66b5924fd6e>>
+ * @codegen <<SignedSource::aa64b4343b8763cfa5aa66230faea408>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -16,7 +16,6 @@ var _default = exports.default = {
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
     '@atlaskit/design-system/icon-label': 'warn',
-    '@atlaskit/design-system/local-cx-xcss': 'error',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-css-tagged-template-expression': 'error',
     '@atlaskit/design-system/no-deprecated-apis': 'error',
@@ -40,6 +39,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',
+    '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }
 };

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::577269c832952ce359cde6a50f26f4e0>>
+ * @codegen <<SignedSource::aebc778f0b10032cbb2941b55189d766>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -15,7 +15,6 @@ var _default = exports.default = {
     '@atlaskit/design-system/consistent-css-prop-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
-    '@atlaskit/design-system/local-cx-xcss': 'error',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-deprecated-apis': 'error',
     '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',

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

@@ -9,7 +9,6 @@ var _consistentCssPropUsage = _interopRequireDefault(require("./consistent-css-p
 var _ensureDesignTokenUsage = _interopRequireDefault(require("./ensure-design-token-usage"));
 var _ensureDesignTokenUsagePreview = _interopRequireDefault(require("./ensure-design-token-usage-preview"));
 var _iconLabel = _interopRequireDefault(require("./icon-label"));
-var _localCxXcss = _interopRequireDefault(require("./local-cx-xcss"));
 var _noBannedImports = _interopRequireDefault(require("./no-banned-imports"));
 var _noCssTaggedTemplateExpression = _interopRequireDefault(require("./no-css-tagged-template-expression"));
 var _noDeprecatedApis = _interopRequireDefault(require("./no-deprecated-apis"));
@@ -33,10 +32,11 @@ var _useDrawerLabel = _interopRequireDefault(require("./use-drawer-label"));
 var _useHeadingLevelInSpotlightCard = _interopRequireDefault(require("./use-heading-level-in-spotlight-card"));
 var _useHrefInLinkItem = _interopRequireDefault(require("./use-href-in-link-item"));
 var _usePrimitives = _interopRequireDefault(require("./use-primitives"));
+var _usePrimitivesText = _interopRequireDefault(require("./use-primitives-text"));
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0a2813f0b87e94d23e1f6fc388539c70>>
+ * @codegen <<SignedSource::7d840a5791dae4a9dfc4dda8ec00dcf9>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -44,7 +44,6 @@ var _default = exports.default = {
   'ensure-design-token-usage': _ensureDesignTokenUsage.default,
   'ensure-design-token-usage/preview': _ensureDesignTokenUsagePreview.default,
   'icon-label': _iconLabel.default,
-  'local-cx-xcss': _localCxXcss.default,
   'no-banned-imports': _noBannedImports.default,
   'no-css-tagged-template-expression': _noCssTaggedTemplateExpression.default,
   'no-deprecated-apis': _noDeprecatedApis.default,
@@ -68,5 +67,6 @@ var _default = exports.default = {
   'use-heading-level-in-spotlight-card': _useHeadingLevelInSpotlightCard.default,
   'use-href-in-link-item': _useHrefInLinkItem.default,
   'use-primitives': _usePrimitives.default,
+  'use-primitives-text': _usePrimitivesText.default,
   'use-visually-hidden': _useVisuallyHidden.default
 };

package/dist/cjs/rules/use-primitives/transformers/emotion-css/index.js

@@ -11,7 +11,6 @@ var _eslintCodemodUtils = require("eslint-codemod-utils");
 var ast = _interopRequireWildcard(require("../../../../ast-nodes"));
 var _utils = require("../../utils");
 var _cssToXcss = require("../css-to-xcss");
-var _containsOnlySupportedAttrs = require("./contains-only-supported-attrs");
 var supported = _interopRequireWildcard(require("./supported"));
 var _upsertImportDeclaration = require("./upsert-import-declaration");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -65,7 +64,7 @@ var EmotionCSS = exports.EmotionCSS = {
     }
 
     // Ignore elements that contain dangerous attributes like `id`.
-    if (!(0, _containsOnlySupportedAttrs.containsOnlySupportedAttrs)(node)) {
+    if (!ast.JSXElement.hasAllowedAttrsOnly(node, supported.attributes)) {
       return false;
     }
 

package/dist/cjs/rules/use-primitives-text/config/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getConfig = void 0;
+var defaults = {
+  patterns: ['paragraph-elements', 'span-elements', 'strong-elements', 'emphasis-elements']
+};
+var getConfig = exports.getConfig = function getConfig(overrides) {
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
+  // start with an empty object, then merge in the defaults, then merge in overrides.
+  // The empty object is returned, as well as modified in place
+  return Object.assign({}, defaults, overrides);
+};

package/dist/cjs/rules/use-primitives-text/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createRule = require("../utils/create-rule");
+var _config = require("./config");
+var _transformers = require("./transformers");
+var textDocsUrl = 'https://atlassian.design/components/primitives/text';
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'use-primitives-text',
+    type: 'suggestion',
+    fixable: 'code',
+    hasSuggestions: true,
+    docs: {
+      description: 'Encourage the usage of text components.',
+      recommended: false,
+      severity: 'warn'
+    },
+    messages: {
+      preferPrimitivesText: "This element can be replaced with a \"Text\" primitive. See ".concat(textDocsUrl, " for additional guidance."),
+      preferPrimitivesStackedText: "These paragraphs can be replaced with a \"Text\" and \"Stack\" primitives. See ".concat(textDocsUrl, " for additional guidance.")
+    }
+  },
+  create: function create(context) {
+    var config = (0, _config.getConfig)(context.options[0]);
+    return {
+      'JSXElement[openingElement.name.name=span]': function JSXElementOpeningElementNameNameSpan(node) {
+        return _transformers.SpanElements.lint(node, {
+          context: context,
+          config: config
+        });
+      },
+      'JSXElement[openingElement.name.name=p]': function JSXElementOpeningElementNameNameP(node) {
+        return _transformers.ParagraphElements.lint(node, {
+          context: context,
+          config: config
+        });
+      },
+      'JSXElement[openingElement.name.name=strong]': function JSXElementOpeningElementNameNameStrong(node) {
+        return _transformers.StrongElements.lint(node, {
+          context: context,
+          config: config
+        });
+      },
+      'JSXElement[openingElement.name.name=em]': function JSXElementOpeningElementNameNameEm(node) {
+        return _transformers.EmphasisElements.lint(node, {
+          context: context,
+          config: config
+        });
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

package/dist/cjs/rules/use-primitives-text/transformers/common.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedAttrs = void 0;
+exports.hasTextChildrenOnly = hasTextChildrenOnly;
+exports.updateTestIdAttributeFix = updateTestIdAttributeFix;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var ast = _interopRequireWildcard(require("../../../ast-nodes"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// Rename data-testid prop to testId if present
+function updateTestIdAttributeFix(node, fixer) {
+  var testIdAttr = ast.JSXElement.getAttributeByName(node, 'data-testid');
+  if (testIdAttr) {
+    return ast.JSXAttribute.updateName(testIdAttr, 'testId', fixer);
+  }
+}
+var allowedAttrs = exports.allowedAttrs = ['id', 'data-testid', 'key'];
+
+// Only allow elements with strings as children
+// The use of `FormattedMessage` component and `formatMessage` are allowed as these are used for i18n
+function hasTextChildrenOnly(node) {
+  var _node$children;
+  return (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.every(function (child) {
+    if ((0, _eslintCodemodUtils.isNodeOfType)(child, 'JSXText')) {
+      return true;
+    }
+
+    // JSX child element <span><FormattedMessage /></span>
+    if ((0, _eslintCodemodUtils.isNodeOfType)(child, 'JSXElement') && ast.JSXElement.getName(child) === 'FormattedMessage') {
+      return true;
+    }
+
+    // JSX expression <span>{formatMessage(...)}</span>
+    if ((0, _eslintCodemodUtils.isNodeOfType)(child, 'JSXExpressionContainer') && (0, _eslintCodemodUtils.isNodeOfType)(child.expression, 'CallExpression')) {
+      return ast.FunctionCall.getName(child.expression) === 'formatMessage';
+    }
+    return false;
+  });
+}

package/dist/cjs/rules/use-primitives-text/transformers/emphasis-elements.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmphasisElements = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var ast = _interopRequireWildcard(require("../../../ast-nodes"));
+var _upsertImportDeclaration = require("../../use-primitives/transformers/emotion-css/upsert-import-declaration");
+var _common = require("./common");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+var EmphasisElements = exports.EmphasisElements = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context,
+      config = _ref.config;
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
+      return;
+    }
+
+    // Check whether all criteria needed to make a transformation are met
+    if (!EmphasisElements._check(node, {
+      context: context,
+      config: config
+    })) {
+      return;
+    }
+    context.report({
+      node: node.openingElement,
+      messageId: 'preferPrimitivesText',
+      suggest: [{
+        desc: "Convert to Text",
+        fix: EmphasisElements._fix(node, {
+          context: context
+        })
+      }]
+    });
+  },
+  _check: function _check(node, _ref2) {
+    var context = _ref2.context,
+      config = _ref2.config;
+    if (!config.patterns.includes('emphasis-elements')) {
+      return false;
+    }
+    var elementName = ast.JSXElement.getName(node);
+    if (elementName !== 'em') {
+      return false;
+    }
+
+    // Element has no unallowed props
+    if (!ast.JSXElement.hasAllowedAttrsOnly(node, _common.allowedAttrs)) {
+      return false;
+    }
+
+    // If there is more than one `@atlaskit/primitives` import, then it becomes difficult to determine which import to transform
+    var importDeclaration = ast.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/primitives');
+    if (importDeclaration.length > 1) {
+      return false;
+    }
+    return true;
+  },
+  _fix: function _fix(node, _ref3) {
+    var context = _ref3.context;
+    return function (fixer) {
+      var importFix = (0, _upsertImportDeclaration.upsertImportDeclaration)({
+        module: '@atlaskit/primitives',
+        specifiers: ['Text']
+      }, context, fixer);
+      var elementNameFixes = ast.JSXElement.updateName(node, 'Text', fixer);
+      var asAttributeFix = ast.JSXElement.addAttribute(node, 'as', 'em', fixer);
+      var testAttributeFix = (0, _common.updateTestIdAttributeFix)(node, fixer);
+      return [importFix].concat((0, _toConsumableArray2.default)(elementNameFixes), [asAttributeFix, testAttributeFix]).filter(function (fix) {
+        return Boolean(fix);
+      }); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  }
+};

package/dist/cjs/rules/use-primitives-text/transformers/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EmphasisElements", {
+  enumerable: true,
+  get: function get() {
+    return _emphasisElements.EmphasisElements;
+  }
+});
+Object.defineProperty(exports, "ParagraphElements", {
+  enumerable: true,
+  get: function get() {
+    return _paragraphElements.ParagraphElements;
+  }
+});
+Object.defineProperty(exports, "SpanElements", {
+  enumerable: true,
+  get: function get() {
+    return _spanElements.SpanElements;
+  }
+});
+Object.defineProperty(exports, "StrongElements", {
+  enumerable: true,
+  get: function get() {
+    return _strongElements.StrongElements;
+  }
+});
+var _emphasisElements = require("./emphasis-elements");
+var _spanElements = require("./span-elements");
+var _strongElements = require("./strong-elements");
+var _paragraphElements = require("./paragraph-elements");