@atlaskit/eslint-plugin-design-system/dist/cjs/rules/use-simple-field/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 = exports.convertField = 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 convertField = exports.convertField = 'Convert field to simple field';
var rule = (0, _createLintRule.createLintRule)({
  meta: {
    name: 'use-simple-field',
    type: 'suggestion',
    hasSuggestions: true,
    docs: {
      description: 'Encourage use of simple field for better developer experience and accessibility.',
      recommended: true,
      severity: 'warn'
    },
    messages: {
      useSimpleField: 'The simplified field implementation can be used here.'
    }
  },
  create: function create(context) {
    var fieldImport;
    var messageImports = [];
    return {
      ImportDeclaration: function ImportDeclaration(node) {
        var _formImports$Field$, _formImports$Field, _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;
        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;
        }

        // if no field import exists, skip
        if (!fieldImport) {
          return;
        }

        // if component is not field, skip
        if (node.openingElement.name.name !== fieldImport) {
          return;
        }

        // if message imports exist, skip because we can't really dig around
        // inside the field to see if they exist because of memory constraints
        if (messageImports.length > 0) {
          return;
        }

        // if component exists as a prop, skip because it's already simple
        var attributes = node.openingElement.attributes;
        var componentAttr = attributes.find(function (attr) {
          return (0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute') && (0, _eslintCodemodUtils.isNodeOfType)(attr.name, 'JSXIdentifier') && attr.name.name === 'component';
        });
        if (componentAttr) {
          return;
        }

        // if children is not a render prop, skip
        var renderProps = node.children.find(function (child) {
          return (0, _eslintCodemodUtils.isNodeOfType)(child, 'JSXExpressionContainer');
        });
        if (!renderProps) {
          return;
        }
        var renderPropExpression = renderProps.expression;
        // If not an arrow func, ignore
        if (!(0, _eslintCodemodUtils.isNodeOfType)(renderPropExpression, 'ArrowFunctionExpression')) {
          return;
        }
        var renderPropParams = renderPropExpression.params;
        // if it is not an object pattern, skip
        if (!(0, _eslintCodemodUtils.isNodeOfType)(renderPropParams[0], 'ObjectPattern')) {
          return;
        }
        // if component uses more than just fieldProps in render props, skip
        var renderPropArgProperties = renderPropParams[0].properties;
        var fieldPropsProp = renderPropArgProperties.find(function (property) {
          return (0, _eslintCodemodUtils.isNodeOfType)(property, 'Property') && (0, _eslintCodemodUtils.isNodeOfType)(property.key, 'Identifier') && property.key.name === 'fieldProps';
        });
        if (renderPropArgProperties.length > 1 || !fieldPropsProp) {
          return;
        }
        var lastProp = attributes.slice(-1)[0] || node.openingElement.name;
        var sourceCode = context.sourceCode;
        var renderPropsText = sourceCode.getText(renderProps);
        context.report({
          node: node,
          messageId: 'useSimpleField',
          suggest: [{
            desc: convertField,
            fix: function fix(fixer) {
              var fixes = [];
              fixes.push(fixer.insertTextAfter(lastProp, " component=".concat(renderPropsText, " ")));
              fixes.push(fixer.remove(renderProps));
              return fixes;
            }
          }]
        });
      }
    };
  }
});
var _default = exports.default = rule;