@atlaskit/eslint-plugin-design-system 8.15.4 → 8.16.0

package/dist/cjs/rules/use-primitives/utils.js

@@ -1,364 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.validPrimitiveElements = exports.shouldSuggestText = exports.shouldSuggestStack = exports.shouldSuggestInline = exports.shouldSuggestBox = exports.primitiveFixer = exports.isWhiteSpace = exports.isValidPrimitiveElement = exports.getChildrenByType = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _eslintCodemodUtils = require("eslint-codemod-utils");
-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) { (0, _defineProperty2.default)(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; } // eslint-disable-next-line import/no-extraneous-dependencies
-var shouldSuggestBox = exports.shouldSuggestBox = function shouldSuggestBox(node
-// scope: Scope.Scope,
-) {
-  if (!node) {
-    return false;
-  }
-  if (!isValidPrimitiveElement(node)) {
-    return false;
-  }
-
-  /**
-   * Check for empty elements: `<div></div>` || `<span></span>`
-   */
-  if (node.children.length === 0) {
-    return true;
-  }
-
-  /**
-   * Check for elements containing only whitespace. e.g. `<div> </div>` || `<span> </span>`
-   */
-  if (containsOnlyWhitespace(node)) {
-    return true;
-  }
-
-  /**
-   * If an element contains more than one JSX child, then we don't want to convert it.
-   */
-  var JSXChildren = getChildrenByType(node, ['JSXElement']);
-  if (JSXChildren.length > 1) {
-    return false;
-  }
-
-  /**
-   * Check for things like:
-   * ```
-   * <div>
-   *   <h2>heading</h2>
-   *   subheading <= rejected because of standalone piece of text
-   * </div>
-   * ```
-   */
-  var nonWhiteSpaceTextChildren = getChildrenByType(node, ['JSXText']).filter(function (child) {
-    return !isWhiteSpace(child.value);
-  });
-  if (nonWhiteSpaceTextChildren.length > 0) {
-    return false;
-  }
-
-  // Possible since we now know the div only has one child
-  // const singleChild = node.children[0];
-
-  // // let's narrow down the type inside of the expression
-  // if (isNodeOfType(singleChild, 'JSXExpressionContainer')) {
-  //   const expression = singleChild.expression;
-
-  //   // If an Identifier that is just a string then should be a <Text>, not <Box>
-  //   const identifier =
-  //     isNodeOfType(expression, 'Identifier') &&
-  //     getIdentifierInParentScope(scope, expression.name);
-
-  //   if (
-  //     identifier &&
-  //     (isVariableAnnotatedWithType(identifier, 'StringTypeAnnotation') ||
-  //       isVariableAnnotatedWithType(identifier, 'TSStringKeyword'))
-  //   ) {
-  //     return false;
-  //   }
-  // }
-
-  return true;
-};
-var shouldSuggestInline = exports.shouldSuggestInline = function shouldSuggestInline(node, context) {
-  if (!node) {
-    return false;
-  }
-  if (!isValidPrimitiveElement(node)) {
-    return false;
-  }
-  var cssStyleObject = getCSSPropStyleObject(node, context);
-  if (!cssStyleObject) {
-    return false;
-  }
-  if (!hasInlineCompatibleStyles(cssStyleObject)) {
-    return false;
-  }
-  var JSXChildren = getChildrenByType(node, ['JSXElement']);
-  if (JSXChildren.length < 2) {
-    return false;
-  }
-  return true;
-};
-var shouldSuggestStack = exports.shouldSuggestStack = function shouldSuggestStack(node, context) {
-  if (!node) {
-    return false;
-  }
-  if (!isValidPrimitiveElement(node)) {
-    return false;
-  }
-  var cssStyleObject = getCSSPropStyleObject(node, context);
-  if (!cssStyleObject) {
-    return false;
-  }
-  if (!hasStackCompatibleStyles(cssStyleObject)) {
-    return false;
-  }
-  var JSXChildren = getChildrenByType(node, ['JSXElement']);
-  if (JSXChildren.length < 2) {
-    return false;
-  }
-  return true;
-};
-var shouldSuggestText = exports.shouldSuggestText = function shouldSuggestText(node, scope) {
-  if (!node) {
-    return true;
-  }
-
-  // node doesn't have children then it should be a <Box>
-  if (!node.children || node.children.length === 0) {
-    return false;
-  }
-  var containsOnlyText = node.children.filter(function (child) {
-    return (0, _eslintCodemodUtils.isNodeOfType)(child, 'Literal') || (0, _eslintCodemodUtils.isNodeOfType)(child, 'JSXText');
-  });
-  if (containsOnlyText) {
-    return true;
-  }
-
-  // if the element contains strictly a single child... let's see what we can discover
-  if (node.children.length === 1) {
-    var singleChild = node.children[0];
-
-    // let's narrow down the type inside of the expression
-    if ((0, _eslintCodemodUtils.isNodeOfType)(singleChild, 'JSXExpressionContainer')) {
-      var expression = singleChild.expression;
-
-      // A direct Literal is another case for only <Text>
-      if ((0, _eslintCodemodUtils.isNodeOfType)(expression, 'Literal')) {
-        return true;
-      }
-
-      // If an Identifier then we want to confirm it's just string to suggest only <Text>
-      var identifier = (0, _eslintCodemodUtils.isNodeOfType)(expression, 'Identifier') && (0, _eslintCodemodUtils.getIdentifierInParentScope)(scope, expression.name);
-      if (identifier && (isVariableAnnotatedWithType(identifier, 'StringTypeAnnotation') || isVariableAnnotatedWithType(identifier, 'TSStringKeyword'))) {
-        return true;
-      }
-    }
-  }
-  return true;
-};
-var primitiveFixer = exports.primitiveFixer = function primitiveFixer(node, nodeName, context) {
-  return function (fixer) {
-    if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXOpeningElement')) {
-      return [];
-    }
-    var parent = node.parent;
-    if (!(0, _eslintCodemodUtils.isNodeOfType)(parent, 'JSXElement')) {
-      return [];
-    }
-    var fixes = [];
-    var body = context.getSourceCode().ast.body;
-    var imports = body.filter(function (node) {
-      return (0, _eslintCodemodUtils.isNodeOfType)(node, 'ImportDeclaration');
-    });
-    var primitivesNode = imports.find(function (node) {
-      return (0, _eslintCodemodUtils.hasImportDeclaration)(node, '@atlaskit/primitives');
-    });
-    if (!primitivesNode) {
-      fixes.push(fixer.insertTextBefore(body[0], "".concat((0, _eslintCodemodUtils.insertImportDeclaration)('@atlaskit/primitives', [nodeName]), ";\n")));
-    } else {
-      fixes.push(fixer.replaceText(primitivesNode, "".concat((0, _eslintCodemodUtils.insertImportSpecifier)(primitivesNode, nodeName), ";\n")));
-    }
-    var closingElement = parent.closingElement;
-    var jsxId = (0, _eslintCodemodUtils.jsxIdentifier)(nodeName);
-    var attributes = [];
-
-    // Box defaults to div. We only need to add an as prop if it's not a div
-    if (node.name.name !== 'div' && nodeName === 'Box') {
-      var asProp = (0, _eslintCodemodUtils.jsxAttribute)({
-        name: (0, _eslintCodemodUtils.jsxIdentifier)('as'),
-        value: (0, _eslintCodemodUtils.literal)({
-          value: "".concat(node.name.name),
-          raw: "\"".concat(node.name.name, "\"")
-        })
-      });
-      attributes.push(asProp);
-    }
-    var hasStylingProps = getJSXAttributeByName(node, 'style') || getJSXAttributeByName(node, 'css') || getJSXAttributeByName(node, 'class') || getJSXAttributeByName(node, 'className');
-    if (hasStylingProps) {
-      fixes.push(fixer.insertTextBefore(node, '// TODO: Manually convert styling into props\n'));
-    }
-    var candidateAttributes = node.attributes.map(function (attr) {
-      // pull out any named attributes we can re-map
-      if ((0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute')) {
-        if (attr.name.name === 'data-testid') {
-          return (0, _eslintCodemodUtils.jsxAttribute)(_objectSpread(_objectSpread({}, attr), {}, {
-            name: (0, _eslintCodemodUtils.jsxIdentifier)('testId')
-          }));
-        }
-      }
-      return attr;
-    }).filter(Boolean);
-    fixes.push(fixer.replaceText(node, (0, _eslintCodemodUtils.jsxOpeningElement)(_objectSpread(_objectSpread({}, node), {}, {
-      name: jsxId,
-      attributes: candidateAttributes.concat(attributes)
-    })).toString()));
-    if (closingElement && closingElement.name) {
-      fixes.push(fixer.replaceText(closingElement.name, "".concat(jsxId)));
-    }
-    return fixes;
-  };
-};
-var isVariableAnnotatedWithType = function isVariableAnnotatedWithType(identifier, typeAnnotation) {
-  var _identifiers$;
-  if (!identifier || identifier.identifiers.length === 0) {
-    return false;
-  }
-  var typeAnnotationObject = (_identifiers$ = identifier.identifiers[0]) === null || _identifiers$ === void 0 || (_identifiers$ = _identifiers$.typeAnnotation) === null || _identifiers$ === void 0 ? void 0 : _identifiers$.typeAnnotation;
-
-  // variable declaration lacks type definitions
-  if (!typeAnnotationObject) {
-    return false;
-  }
-
-  // single type annotation
-  if (typeAnnotationObject.type === typeAnnotation) {
-    return true;
-  }
-  return false;
-};
-var getJSXAttributeByName = function getJSXAttributeByName(node, attrName) {
-  return node.attributes.find(function (attr) {
-    // Ignore JSXSpreadAttributes
-    if (!(0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute')) {
-      return false;
-    }
-    return attr.name.name === attrName;
-  });
-};
-var isWhiteSpace = exports.isWhiteSpace = function isWhiteSpace(value) {
-  return value.trim() === '';
-};
-function containsOnlyWhitespace(node) {
-  return node.children.every(function (child) {
-    if (!(0, _eslintCodemodUtils.isNodeOfType)(child, 'JSXText')) {
-      return false;
-    }
-    return isWhiteSpace(child.value);
-  });
-}
-var getChildrenByType = exports.getChildrenByType = function getChildrenByType(node, types) {
-  return node.children.filter(function (child) {
-    return types.find(function (type) {
-      return (0, _eslintCodemodUtils.isNodeOfType)(child, type);
-    });
-  });
-};
-
-// FIXME: This not correctly typed
-
-var getCSSPropStyleObject = function getCSSPropStyleObject(node, context) {
-  var cssAttr = getJSXAttributeByName(node.openingElement, 'css');
-  var styleObj = {};
-  if (cssAttr && cssAttr.value) {
-    var scope = context.getScope();
-    var _ref = cssAttr.value,
-      expression = _ref.expression;
-    var variableDeclarator = (0, _eslintCodemodUtils.getIdentifierInParentScope)(scope, expression.name);
-    var defNode = variableDeclarator === null || variableDeclarator === void 0 ? void 0 : variableDeclarator.defs[0];
-    if (!defNode) {
-      return undefined;
-    }
-
-    // check if the variable declaration has a call expression init
-    // eg we're looking for css() type inits
-    if (!(0, _eslintCodemodUtils.isNodeOfType)(defNode.node, 'VariableDeclarator') && !(0, _eslintCodemodUtils.isNodeOfType)(defNode.node.init, 'CallExpression')) {
-      return undefined;
-    }
-    var init = defNode.node.init;
-
-    // make the sure the init is called 'css'
-    if (!((0, _eslintCodemodUtils.isNodeOfType)(init.callee, 'Identifier') && init.callee.name === 'css')) {
-      return undefined;
-    }
-    var styles = init.arguments[0];
-    if (!styles) {
-      return undefined;
-    }
-
-    // make sure the styles are object styles (they should be but let's just double check)
-    if (!(0, _eslintCodemodUtils.isNodeOfType)(styles, 'ObjectExpression')) {
-      return undefined;
-    }
-    styles.properties.forEach(function (prop) {
-      if (!(0, _eslintCodemodUtils.isNodeOfType)(prop, 'Property')) {
-        return;
-      }
-      if (!(0, _eslintCodemodUtils.isNodeOfType)(prop.key, 'Identifier')) {
-        return;
-      }
-      if (!(0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'Literal')) {
-        return;
-      }
-      styleObj[prop.key.name] = prop.value.value;
-    });
-  }
-  return styleObj;
-};
-var validPrimitiveElements = exports.validPrimitiveElements = new Set(['div', 'span', 'article', 'aside', 'dialog', 'footer', 'header', 'li', 'main', 'nav', 'ol', 'section', 'ul']);
-var isValidPrimitiveElement = exports.isValidPrimitiveElement = function isValidPrimitiveElement(node) {
-  return validPrimitiveElements.has(node.openingElement.name.name);
-};
-var hasInlineCompatibleStyles = function hasInlineCompatibleStyles(cssStyleObject) {
-  if (!['flex', 'inline-flex'].includes(cssStyleObject['display'])) {
-    return false;
-  }
-
-  /**
-   * Default `flexDirection` is `'row'`, so we can recommend an Inline if
-   * it's `undefined`, or if it's explicitly `'row'` or `'row-reverse'`.
-   *
-   * Note: Currently we are including `'row-reverse'` even though Inline doesn't support it
-   * as an attempt to educate makers about accessibility concerns.   *
-   */
-  var flexDirection = cssStyleObject['flex-direction'] || cssStyleObject['flexDirection'];
-  var validFlexDirectionValue = ['row', 'row-reverse', undefined].includes(flexDirection);
-
-  /**
-   * Note: Currently we are including `'wrap-reverse'` even though Inline doesn't support it
-   * as an attempt to educate makers about accessibility concerns.
-   */
-  var flexWrap = cssStyleObject['flex-wrap'] || cssStyleObject['flexWrap'];
-  var validFlexWrapValue = ['wrap', 'wrap-reverse'].includes(flexWrap);
-  if (validFlexDirectionValue || validFlexWrapValue) {
-    return true;
-  }
-  return false;
-};
-var hasStackCompatibleStyles = function hasStackCompatibleStyles(cssStyleObject) {
-  if (!['flex', 'inline-flex'].includes(cssStyleObject['display'])) {
-    return false;
-  }
-
-  /**
-   * Note: Currently we are including `'column-reverse'` even though Stack doesn't support it
-   * as an attempt to educate makers about accessibility concerns.
-   */
-  var flexDirection = cssStyleObject['flex-direction'] || cssStyleObject['flexDirection'];
-  var validFlexDirectionValue = ['column', 'column-reverse'].includes(flexDirection);
-  if (!validFlexDirectionValue) {
-    return false;
-  }
-  return true;
-};