@atlaskit/eslint-plugin-design-system
Version:
The essential plugin for use with the Atlassian Design System.
161 lines (155 loc) • 6.97 kB
JavaScript
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
import { isNodeOfType } from 'eslint-codemod-utils';
import { createLintRule } from '../utils/create-lint-rule';
import { isImportFromPackage } from '../utils/is-import-from-package';
var CONTROLLED_PROPS = ['size', 'borderColor', 'appearance'];
var AVATAR_TAG_PACKAGE = '@atlaskit/tag';
var rule = createLintRule({
meta: {
name: 'ensure-avatar-tag-avatar-props',
type: 'problem',
docs: {
description: 'Ensures AvatarTag avatar prop does not include controlled props (size, borderColor, appearance) which are managed internally.',
recommended: true,
severity: 'error'
},
messages: {
noControlledPropsInAvatar: 'The `avatar` prop should not include `{{ propName }}` as it is controlled by AvatarTag based on the `type` prop. Remove `{{ propName }}` from the avatar component.'
}
},
create: function create(context) {
var avatarTagImports = [];
return {
ImportDeclaration: function ImportDeclaration(node) {
if (!isImportFromPackage(node.source.value, AVATAR_TAG_PACKAGE)) {
return;
}
var _iterator = _createForOfIteratorHelper(node.specifiers),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var specifier = _step.value;
if (specifier.type === 'ImportDefaultSpecifier') {
avatarTagImports.push(specifier.local.name);
}
if (specifier.type === 'ImportSpecifier' && specifier.imported.type === 'Identifier' && specifier.imported.name === 'AvatarTag') {
avatarTagImports.push(specifier.local.name);
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
},
JSXElement: function JSXElement(node) {
if (!isNodeOfType(node, 'JSXElement')) {
return;
}
if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
return;
}
var elementName = node.openingElement.name.name;
// Check if this is an AvatarTag component
if (!avatarTagImports.includes(elementName)) {
return;
}
// Find the avatar prop
var avatarProp = node.openingElement.attributes.find(function (attr) {
return isNodeOfType(attr, 'JSXAttribute') && isNodeOfType(attr.name, 'JSXIdentifier') && attr.name.name === 'avatar';
});
if (!avatarProp || !isNodeOfType(avatarProp, 'JSXAttribute') || !avatarProp.value) {
return;
}
// Check if avatar value is a JSX expression container (arrow function)
if (isNodeOfType(avatarProp.value, 'JSXExpressionContainer')) {
var expression = avatarProp.value.expression;
// Handle arrow function: avatar={(props) => <Avatar {...props} size="small" />}
if (expression && expression.type === 'ArrowFunctionExpression' && expression.body) {
checkForControlledProps(context, expression.body);
}
}
}
};
function checkForControlledProps(context, node) {
// Direct JSX return: (props) => <Avatar {...props} />
if (isNodeOfType(node, 'JSXElement')) {
checkJSXElementForControlledProps(context, node);
return;
}
// Parenthesized JSX: (props) => (<Avatar {...props} />)
if (node.type === 'JSXFragment') {
// Check children of fragment
var _iterator2 = _createForOfIteratorHelper(node.children || []),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var child = _step2.value;
if (isNodeOfType(child, 'JSXElement')) {
checkJSXElementForControlledProps(context, child);
}
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
return;
}
// Block body: (props) => { return <Avatar {...props} />; }
if (node.type === 'BlockStatement') {
var blockNode = node;
var _iterator3 = _createForOfIteratorHelper(blockNode.body || []),
_step3;
try {
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
var statement = _step3.value;
if (statement.type === 'ReturnStatement' && statement.argument) {
checkForControlledProps(context, statement.argument);
}
}
} catch (err) {
_iterator3.e(err);
} finally {
_iterator3.f();
}
}
}
function checkJSXElementForControlledProps(context, node) {
if (!isNodeOfType(node, 'JSXElement')) {
return;
}
var openingElement = node.openingElement;
var _iterator4 = _createForOfIteratorHelper(openingElement.attributes),
_step4;
try {
for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
var attr = _step4.value;
if (!isNodeOfType(attr, 'JSXAttribute')) {
continue;
}
if (!isNodeOfType(attr.name, 'JSXIdentifier')) {
continue;
}
var propName = attr.name.name;
if (CONTROLLED_PROPS.includes(propName)) {
context.report({
node: attr,
messageId: 'noControlledPropsInAvatar',
data: {
propName: propName
}
});
}
}
} catch (err) {
_iterator4.e(err);
} finally {
_iterator4.f();
}
}
}
});
export default rule;