@atlaskit/eslint-plugin-design-system/dist/cjs/rules/use-field-message-wrapper/index.js

The essential plugin for use with the Atlassian Design System.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _eslintCodemodUtils = require("eslint-codemod-utils");
var _createLintRule = require("../utils/create-lint-rule");
var _getFormImportLocalNames = require("../utils/get-form-import-local-names");
var rule = (0, _createLintRule.createLintRule)({
  meta: {
    name: 'use-field-message-wrapper',
    type: 'suggestion',
    hasSuggestions: true,
    docs: {
      description: 'Encourage use of message wrapper component when using form message components.',
      recommended: true,
      severity: 'warn'
    },
    messages: {
      useMessageWrapper: "All ADS form messaging components within a field should be wrapped by the `MessageWrapper` component from the form package. Consider also using the [simplified field implementation](https://atlassian.design/components/form/examples#simple-implementation-1) to handle styling and accessible messaging directly."
    }
  },
  create: function create(context) {
    var fieldImport;
    var messageWrapperImport;
    var messageImports = [];
    return {
      ImportDeclaration: function ImportDeclaration(node) {
        var _formImports$Field$, _formImports$Field, _formImports$MessageW, _formImports$MessageW2, _formImports$ErrorMes, _formImports$HelperMe, _formImports$ValidMes;
        var formImports = (0, _getFormImportLocalNames.getFormImportLocalNames)(node);
        fieldImport = (_formImports$Field$ = (_formImports$Field = formImports.Field) === null || _formImports$Field === void 0 ? void 0 : _formImports$Field[0]) !== null && _formImports$Field$ !== void 0 ? _formImports$Field$ : fieldImport;
        messageWrapperImport = (_formImports$MessageW = (_formImports$MessageW2 = formImports.MessageWrapper) === null || _formImports$MessageW2 === void 0 ? void 0 : _formImports$MessageW2[0]) !== null && _formImports$MessageW !== void 0 ? _formImports$MessageW : messageWrapperImport;
        messageImports.push.apply(messageImports, (0, _toConsumableArray2.default)((_formImports$ErrorMes = formImports.ErrorMessage) !== null && _formImports$ErrorMes !== void 0 ? _formImports$ErrorMes : []).concat((0, _toConsumableArray2.default)((_formImports$HelperMe = formImports.HelperMessage) !== null && _formImports$HelperMe !== void 0 ? _formImports$HelperMe : []), (0, _toConsumableArray2.default)((_formImports$ValidMes = formImports.ValidMessage) !== null && _formImports$ValidMes !== void 0 ? _formImports$ValidMes : [])));
      },
      JSXElement: function JSXElement(node) {
        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
          return;
        }
        if (!(0, _eslintCodemodUtils.isNodeOfType)(node.openingElement.name, 'JSXIdentifier')) {
          return;
        }
        var name = node.openingElement.name.name;

        // if it's not a message component, skip
        if (messageImports.length === 0 || !messageImports.includes(name)) {
          return;
        }

        // if no field import exists, skip. It needs to be within our field
        if (!fieldImport) {
          return;
        }

        // If no message wrapper import exists, then it's definitely an error
        if (!messageWrapperImport) {
          return context.report({
            node: node,
            messageId: 'useMessageWrapper'
          });
        }

        // check for if field and message wrapper are parents
        var _node = node;
        var hasParentField = false;
        var hasParentMessageWrapper = false;
        while ((0, _eslintCodemodUtils.isNodeOfType)(_node, 'JSXElement') && (0, _eslintCodemodUtils.isNodeOfType)(_node.openingElement.name, 'JSXIdentifier') && !hasParentField) {
          var _name = _node.openingElement.name.name;
          hasParentField = hasParentField || _name === fieldImport;
          hasParentMessageWrapper = hasParentMessageWrapper || _name === messageWrapperImport;
          _node = _node.parent;
          // Skip up until a JSXElement is reached
          if ((0, _eslintCodemodUtils.isNodeOfType)(_node, 'JSXFragment') || (0, _eslintCodemodUtils.isNodeOfType)(_node, 'ArrowFunctionExpression') || (0, _eslintCodemodUtils.isNodeOfType)(_node, 'JSXExpressionContainer')) {
            while (_node && !(0, _eslintCodemodUtils.isNodeOfType)(_node, 'JSXElement') && !(0, _eslintCodemodUtils.isNodeOfType)(_node, 'Program')) {
              _node = _node.parent;
            }
          }
        }

        // if not field, skip because this doesn't matter
        if (!hasParentField) {
          return;
        }

        // if it has a message wrapper, skip
        if (hasParentMessageWrapper) {
          return;
        }
        context.report({
          node: node,
          messageId: 'useMessageWrapper'
        });
      }
    };
  }
});
var _default = exports.default = rule;