@atlaskit/eslint-plugin-design-system
Version:
The essential plugin for use with the Atlassian Design System.
136 lines (131 loc) • 4.96 kB
JavaScript
// eslint-disable-next-line import/no-extraneous-dependencies
import { isNodeOfType } from 'eslint-codemod-utils';
import { createLintRule } from '../utils/create-lint-rule';
import { addProp } from './add-prop';
import { setPropToTrue } from './set-prop-to-true';
export var RULE_NAME = 'use-should-render-to-parent';
var PROP_NAME = 'shouldRenderToParent';
var message = "Setting the `".concat(PROP_NAME, "` prop to anything other than `true` causes accessibility issues. Only set to `false` as a last resort.");
var supportedImports = [{
source: '@atlaskit/popup',
allowsDefaultImport: true,
namedImport: 'Popup'
}, {
source: '@atlaskit/popup/popup',
namedImport: 'Popup'
}, {
source: '@atlaskit/dropdown-menu',
allowsDefaultImport: true
}, {
source: '@atlaskit/dropdown-menu/dropdown-menu',
allowsDefaultImport: true
}, {
source: '@atlassian/entry-points/dropdown-trigger',
namedImport: 'DropdownTrigger'
}, {
source: '@atlassian/entry-points/popup-trigger',
namedImport: 'PopupTrigger'
}];
var rule = createLintRule({
meta: {
name: RULE_NAME,
type: 'suggestion',
docs: {
description: "Encourages makers to use the `".concat(PROP_NAME, "` where possible in Atlassian Design System `Popup` and `DropdownMenu` components."),
recommended: true,
severity: 'warn'
},
messages: {
missingShouldRenderToParentProp: "The default value of `".concat(PROP_NAME, "` is `false`. ").concat(message),
falseShouldRenderToParentProp: message
},
hasSuggestions: true
},
create: function create(context) {
var componentLocalNames = new Set();
return {
ImportDeclaration: function ImportDeclaration(node) {
var source = node.source.value;
if (typeof source !== 'string') {
return;
}
var supportedImport = supportedImports.find(function (component) {
return component.source === source;
});
if (!supportedImport) {
return;
}
if (!node.specifiers.length) {
return;
}
var defaultImport = node.specifiers.filter(function (spec) {
return spec.type === 'ImportDefaultSpecifier';
});
var namedImports = node.specifiers.filter(function (spec) {
return spec.type === 'ImportSpecifier';
});
if (defaultImport.length && defaultImport[0].local && supportedImport.allowsDefaultImport) {
componentLocalNames.add(defaultImport[0].local.name);
}
if (!namedImports.length) {
return;
}
// Iterate through all of them, only one should ever be found
namedImports.forEach(function (namedImport) {
if (namedImport.type === 'ImportSpecifier' && 'name' in namedImport.imported && namedImport.imported.name === supportedImport.namedImport) {
componentLocalNames.add(namedImport.local.name);
}
});
},
JSXElement: function JSXElement(node) {
if (!isNodeOfType(node, 'JSXElement')) {
return;
}
if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
return;
}
var name = node.openingElement.name.name;
if (componentLocalNames.has(name)) {
var prop = node.openingElement.attributes.find(function (attr) {
return isNodeOfType(attr, 'JSXAttribute') && isNodeOfType(attr.name, 'JSXIdentifier') && attr.name.name === PROP_NAME;
});
// If the prop does not exist, throw
if (!prop) {
return context.report({
node: node.openingElement.name,
messageId: 'missingShouldRenderToParentProp',
suggest: [{
desc: addProp,
fix: function fix(fixer) {
return [fixer.insertTextAfter(node.openingElement.name, " ".concat(PROP_NAME))];
}
}]
});
}
// If the prop is a boolean attribute with no value (set to `true`),
// it's valid
if (!('value' in prop) || prop.value === null) {
return;
}
// If the prop has a falsy literal value or a falsy value in an
// expression container, throw
if (isNodeOfType(prop.value, 'Literal') && !prop.value.value || isNodeOfType(prop.value, 'JSXExpressionContainer') && prop.value.expression.type === 'Literal' && !prop.value.expression.value) {
return context.report({
node: prop,
messageId: 'falseShouldRenderToParentProp',
suggest: [{
desc: setPropToTrue,
fix: function fix(fixer) {
return [fixer.replaceText(prop, PROP_NAME)];
}
}]
});
}
}
}
};
}
});
export default rule;
export { addProp } from './add-prop';
export { setPropToTrue } from './set-prop-to-true';