@atlaskit/eslint-plugin-design-system 13.8.0 → 13.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.md +2 -0
  3. package/dist/cjs/presets/all-flat.codegen.js +3 -1
  4. package/dist/cjs/presets/all.codegen.js +3 -1
  5. package/dist/cjs/presets/recommended-flat.codegen.js +3 -1
  6. package/dist/cjs/presets/recommended.codegen.js +3 -1
  7. package/dist/cjs/rules/index.codegen.js +5 -1
  8. package/dist/cjs/rules/no-html-heading/index.js +40 -0
  9. package/dist/cjs/rules/no-html-heading/node-types/index.js +19 -0
  10. package/dist/cjs/rules/no-html-heading/node-types/jsx-element/index.js +136 -0
  11. package/dist/cjs/rules/no-html-heading/node-types/styled-component/index.js +42 -0
  12. package/dist/cjs/rules/no-html-heading/node-types/supported.js +82 -0
  13. package/dist/cjs/rules/no-html-select/index.js +40 -0
  14. package/dist/cjs/rules/no-html-select/node-types/index.js +19 -0
  15. package/dist/cjs/rules/no-html-select/node-types/jsx-element/index.js +27 -0
  16. package/dist/cjs/rules/no-html-select/node-types/styled-component/index.js +42 -0
  17. package/dist/cjs/rules/no-html-select/node-types/supported.js +66 -0
  18. package/dist/es2019/presets/all-flat.codegen.js +3 -1
  19. package/dist/es2019/presets/all.codegen.js +3 -1
  20. package/dist/es2019/presets/recommended-flat.codegen.js +3 -1
  21. package/dist/es2019/presets/recommended.codegen.js +3 -1
  22. package/dist/es2019/rules/index.codegen.js +5 -1
  23. package/dist/es2019/rules/no-html-heading/index.js +34 -0
  24. package/dist/es2019/rules/no-html-heading/node-types/index.js +2 -0
  25. package/dist/es2019/rules/no-html-heading/node-types/jsx-element/index.js +99 -0
  26. package/dist/es2019/rules/no-html-heading/node-types/styled-component/index.js +37 -0
  27. package/dist/es2019/rules/no-html-heading/node-types/supported.js +72 -0
  28. package/dist/es2019/rules/no-html-select/index.js +34 -0
  29. package/dist/es2019/rules/no-html-select/node-types/index.js +2 -0
  30. package/dist/es2019/rules/no-html-select/node-types/jsx-element/index.js +19 -0
  31. package/dist/es2019/rules/no-html-select/node-types/styled-component/index.js +37 -0
  32. package/dist/es2019/rules/no-html-select/node-types/supported.js +56 -0
  33. package/dist/esm/presets/all-flat.codegen.js +3 -1
  34. package/dist/esm/presets/all.codegen.js +3 -1
  35. package/dist/esm/presets/recommended-flat.codegen.js +3 -1
  36. package/dist/esm/presets/recommended.codegen.js +3 -1
  37. package/dist/esm/rules/index.codegen.js +5 -1
  38. package/dist/esm/rules/no-html-heading/index.js +34 -0
  39. package/dist/esm/rules/no-html-heading/node-types/index.js +2 -0
  40. package/dist/esm/rules/no-html-heading/node-types/jsx-element/index.js +127 -0
  41. package/dist/esm/rules/no-html-heading/node-types/styled-component/index.js +36 -0
  42. package/dist/esm/rules/no-html-heading/node-types/supported.js +73 -0
  43. package/dist/esm/rules/no-html-select/index.js +34 -0
  44. package/dist/esm/rules/no-html-select/node-types/index.js +2 -0
  45. package/dist/esm/rules/no-html-select/node-types/jsx-element/index.js +18 -0
  46. package/dist/esm/rules/no-html-select/node-types/styled-component/index.js +36 -0
  47. package/dist/esm/rules/no-html-select/node-types/supported.js +57 -0
  48. package/dist/types/index.codegen.d.ts +18 -0
  49. package/dist/types/presets/all-flat.codegen.d.ts +2 -0
  50. package/dist/types/presets/all.codegen.d.ts +2 -0
  51. package/dist/types/presets/recommended-flat.codegen.d.ts +2 -0
  52. package/dist/types/presets/recommended.codegen.d.ts +2 -0
  53. package/dist/types/rules/index.codegen.d.ts +2 -0
  54. package/dist/types/rules/no-html-heading/index.d.ts +3 -0
  55. package/dist/types/rules/no-html-heading/node-types/index.d.ts +2 -0
  56. package/dist/types/rules/no-html-heading/node-types/jsx-element/index.d.ts +8 -0
  57. package/dist/types/rules/no-html-heading/node-types/styled-component/index.d.ts +8 -0
  58. package/dist/types/rules/no-html-heading/node-types/supported.d.ts +7 -0
  59. package/dist/types/rules/no-html-select/index.d.ts +3 -0
  60. package/dist/types/rules/no-html-select/node-types/index.d.ts +2 -0
  61. package/dist/types/rules/no-html-select/node-types/jsx-element/index.d.ts +8 -0
  62. package/dist/types/rules/no-html-select/node-types/styled-component/index.d.ts +8 -0
  63. package/dist/types/rules/no-html-select/node-types/supported.d.ts +7 -0
  64. package/dist/types-ts4.5/index.codegen.d.ts +18 -0
  65. package/dist/types-ts4.5/presets/all-flat.codegen.d.ts +2 -0
  66. package/dist/types-ts4.5/presets/all.codegen.d.ts +2 -0
  67. package/dist/types-ts4.5/presets/recommended-flat.codegen.d.ts +2 -0
  68. package/dist/types-ts4.5/presets/recommended.codegen.d.ts +2 -0
  69. package/dist/types-ts4.5/rules/index.codegen.d.ts +2 -0
  70. package/dist/types-ts4.5/rules/no-html-heading/index.d.ts +3 -0
  71. package/dist/types-ts4.5/rules/no-html-heading/node-types/index.d.ts +2 -0
  72. package/dist/types-ts4.5/rules/no-html-heading/node-types/jsx-element/index.d.ts +8 -0
  73. package/dist/types-ts4.5/rules/no-html-heading/node-types/styled-component/index.d.ts +8 -0
  74. package/dist/types-ts4.5/rules/no-html-heading/node-types/supported.d.ts +7 -0
  75. package/dist/types-ts4.5/rules/no-html-select/index.d.ts +3 -0
  76. package/dist/types-ts4.5/rules/no-html-select/node-types/index.d.ts +2 -0
  77. package/dist/types-ts4.5/rules/no-html-select/node-types/jsx-element/index.d.ts +8 -0
  78. package/dist/types-ts4.5/rules/no-html-select/node-types/styled-component/index.d.ts +8 -0
  79. package/dist/types-ts4.5/rules/no-html-select/node-types/supported.d.ts +7 -0
  80. package/package.json +1 -1
@@ -0,0 +1,66 @@
1
+ "use strict";
2
+
3
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.isSupportedForLint = isSupportedForLint;
8
+ var _eslintCodemodUtils = require("eslint-codemod-utils");
9
+ var ast = _interopRequireWildcard(require("../../../ast-nodes"));
10
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
11
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
12
+ var supportedElements = [{
13
+ name: 'select'
14
+ }];
15
+
16
+ /**
17
+ * Determines if the given JSX element is a supported element to lint with this rule.
18
+ */
19
+ function isSupportedForLint(jsxNode, elementName) {
20
+ if (!(0, _eslintCodemodUtils.isNodeOfType)(jsxNode, 'JSXElement')) {
21
+ return false;
22
+ }
23
+
24
+ // Allow passing in the element name because the jsxNode doesn't
25
+ // represent the element name with styled components
26
+ var elName = elementName || ast.JSXElement.getName(jsxNode);
27
+ if (!elName) {
28
+ return false;
29
+ }
30
+
31
+ // Only check native HTML elements, not components
32
+ if (elName[0] !== elName[0].toLowerCase()) {
33
+ return false;
34
+ }
35
+ var supportedElement = supportedElements.find(function (_ref) {
36
+ var name = _ref.name;
37
+ return name === elName;
38
+ });
39
+ if (!supportedElement) {
40
+ supportedElement = supportedElements.find(function (_ref2) {
41
+ var name = _ref2.name;
42
+ return name === '*';
43
+ });
44
+ }
45
+ if (!supportedElement) {
46
+ return false;
47
+ }
48
+
49
+ // Check if the element has any attributes that are not supported
50
+ var attributes = ast.JSXElement.getAttributes(jsxNode);
51
+ if (supportedElement.attributes && !supportedElement.attributes.every(function (_ref3) {
52
+ var name = _ref3.name,
53
+ values = _ref3.values;
54
+ return attributes.some(function (attribute) {
55
+ if (attribute.type === 'JSXSpreadAttribute') {
56
+ return false;
57
+ }
58
+ var isMatchingName = attribute.name.name === name;
59
+ var isMatchingValues = values && attribute.value && attribute.value.type === 'Literal' && typeof attribute.value.value === 'string' && (values === null || values === void 0 ? void 0 : values.includes(attribute.value.value));
60
+ return isMatchingName && isMatchingValues;
61
+ });
62
+ })) {
63
+ return false;
64
+ }
65
+ return true;
66
+ }
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::cadedc68c5a8a92d8134b8aa5239937f>>
3
+ * @codegen <<SignedSource::aa1526cdf8f7bbdd8e89e584da433397>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
 
@@ -25,8 +25,10 @@ export default {
25
25
  '@atlaskit/design-system/no-html-anchor': 'warn',
26
26
  '@atlaskit/design-system/no-html-button': 'warn',
27
27
  '@atlaskit/design-system/no-html-checkbox': 'warn',
28
+ '@atlaskit/design-system/no-html-heading': 'warn',
28
29
  '@atlaskit/design-system/no-html-image': 'warn',
29
30
  '@atlaskit/design-system/no-html-range': 'warn',
31
+ '@atlaskit/design-system/no-html-select': 'warn',
30
32
  '@atlaskit/design-system/no-invalid-css-map': ['error', {
31
33
  allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
32
34
  }],
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::340bf9f79ec1de1340a89df9d626b929>>
3
+ * @codegen <<SignedSource::ec47b97e20d77ba1f43c2211aeeed2f6>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
 
@@ -24,8 +24,10 @@ export default {
24
24
  '@atlaskit/design-system/no-html-anchor': 'warn',
25
25
  '@atlaskit/design-system/no-html-button': 'warn',
26
26
  '@atlaskit/design-system/no-html-checkbox': 'warn',
27
+ '@atlaskit/design-system/no-html-heading': 'warn',
27
28
  '@atlaskit/design-system/no-html-image': 'warn',
28
29
  '@atlaskit/design-system/no-html-range': 'warn',
30
+ '@atlaskit/design-system/no-html-select': 'warn',
29
31
  '@atlaskit/design-system/no-invalid-css-map': ['error', {
30
32
  allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
31
33
  }],
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::c264ea60cc6348c4292744c1260543d8>>
3
+ * @codegen <<SignedSource::4ad986601bfd6f0081e3bc6909694979>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
 
@@ -20,8 +20,10 @@ export default {
20
20
  '@atlaskit/design-system/no-html-anchor': 'warn',
21
21
  '@atlaskit/design-system/no-html-button': 'warn',
22
22
  '@atlaskit/design-system/no-html-checkbox': 'warn',
23
+ '@atlaskit/design-system/no-html-heading': 'warn',
23
24
  '@atlaskit/design-system/no-html-image': 'warn',
24
25
  '@atlaskit/design-system/no-html-range': 'warn',
26
+ '@atlaskit/design-system/no-html-select': 'warn',
25
27
  '@atlaskit/design-system/no-invalid-css-map': ['error', {
26
28
  allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
27
29
  }],
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::0158deb3db6cafbdeae2aeb18673ebc2>>
3
+ * @codegen <<SignedSource::18dcf6fce30892e43fb5fb76339c261e>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
 
@@ -19,8 +19,10 @@ export default {
19
19
  '@atlaskit/design-system/no-html-anchor': 'warn',
20
20
  '@atlaskit/design-system/no-html-button': 'warn',
21
21
  '@atlaskit/design-system/no-html-checkbox': 'warn',
22
+ '@atlaskit/design-system/no-html-heading': 'warn',
22
23
  '@atlaskit/design-system/no-html-image': 'warn',
23
24
  '@atlaskit/design-system/no-html-range': 'warn',
25
+ '@atlaskit/design-system/no-html-select': 'warn',
24
26
  '@atlaskit/design-system/no-invalid-css-map': ['error', {
25
27
  allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
26
28
  }],
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::5945e51ebc0b2c3553b51162f07dbd63>>
3
+ * @codegen <<SignedSource::19fc297469c40b1fa9fd64c9f9313ba7>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
  import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -23,8 +23,10 @@ import noExportedKeyframes from './no-exported-keyframes';
23
23
  import noHtmlAnchor from './no-html-anchor';
24
24
  import noHtmlButton from './no-html-button';
25
25
  import noHtmlCheckbox from './no-html-checkbox';
26
+ import noHtmlHeading from './no-html-heading';
26
27
  import noHtmlImage from './no-html-image';
27
28
  import noHtmlRange from './no-html-range';
29
+ import noHtmlSelect from './no-html-select';
28
30
  import noInvalidCssMap from './no-invalid-css-map';
29
31
  import noKeyframesTaggedTemplateExpression from './no-keyframes-tagged-template-expression';
30
32
  import noLegacyIcons from './no-legacy-icons';
@@ -78,8 +80,10 @@ export const rules = {
78
80
  'no-html-anchor': noHtmlAnchor,
79
81
  'no-html-button': noHtmlButton,
80
82
  'no-html-checkbox': noHtmlCheckbox,
83
+ 'no-html-heading': noHtmlHeading,
81
84
  'no-html-image': noHtmlImage,
82
85
  'no-html-range': noHtmlRange,
86
+ 'no-html-select': noHtmlSelect,
83
87
  'no-invalid-css-map': noInvalidCssMap,
84
88
  'no-keyframes-tagged-template-expression': noKeyframesTaggedTemplateExpression,
85
89
  'no-legacy-icons': noLegacyIcons,
@@ -0,0 +1,34 @@
1
+ import { createLintRule } from '../utils/create-rule';
2
+ import { JSXElement, StyledComponent } from './node-types';
3
+ const rule = createLintRule({
4
+ meta: {
5
+ name: 'no-html-heading',
6
+ type: 'suggestion',
7
+ hasSuggestions: true,
8
+ docs: {
9
+ description: 'Discourage direct usage of HTML heading elements in favor of Atlassian Design System heading components.',
10
+ recommended: true,
11
+ severity: 'warn'
12
+ },
13
+ messages: {
14
+ noHtmlHeading: `This <{{ name }}> should be replaced with a heading component from the Atlassian Design System. ADS headings include ensure accessible implementations and provide access to ADS styling features like design tokens.`
15
+ }
16
+ },
17
+ create(context) {
18
+ return {
19
+ // transforms styled.<heading>(...) usages
20
+ CallExpression(node) {
21
+ StyledComponent.lint(node, {
22
+ context
23
+ });
24
+ },
25
+ // transforms <heading css={...}> usages
26
+ JSXElement(node) {
27
+ JSXElement.lint(node, {
28
+ context
29
+ });
30
+ }
31
+ };
32
+ }
33
+ });
34
+ export default rule;
@@ -0,0 +1,2 @@
1
+ export { StyledComponent } from './styled-component';
2
+ export { JSXElement } from './jsx-element';
@@ -0,0 +1,99 @@
1
+ import { isNodeOfType } from 'eslint-codemod-utils';
2
+ import { getSourceCode } from '@atlaskit/eslint-utils/context-compat';
3
+ import * as ast from '../../../../ast-nodes';
4
+ import { isSupportedForLint } from '../supported';
5
+ function isImportDeclaration(node) {
6
+ return node.type === 'ImportDeclaration';
7
+ }
8
+ export const JSXElement = {
9
+ lint(node, {
10
+ context
11
+ }) {
12
+ if (!isSupportedForLint(node)) {
13
+ return;
14
+ }
15
+ const nodeName = ast.JSXElement.getName(node);
16
+ const sourceCode = getSourceCode(context);
17
+ const importDeclarations = sourceCode.ast.body.filter(isImportDeclaration);
18
+ let existingHeadingName = null;
19
+ const usedNames = new Set();
20
+
21
+ // Check for existing imports
22
+ for (const declaration of importDeclarations) {
23
+ for (const specifier of declaration.specifiers) {
24
+ usedNames.add(specifier.local.name);
25
+ }
26
+ if (declaration.source.value === '@atlaskit/heading') {
27
+ const defaultSpecifier = declaration.specifiers.find(specifier => specifier.type === 'ImportDefaultSpecifier');
28
+ if (defaultSpecifier) {
29
+ existingHeadingName = defaultSpecifier.local.name;
30
+ }
31
+ }
32
+ }
33
+ const generateUniqueName = baseName => {
34
+ let index = 1;
35
+ let newName = baseName;
36
+ while (usedNames.has(newName)) {
37
+ newName = `${baseName}${index}`;
38
+ index++;
39
+ }
40
+ return newName;
41
+ };
42
+ const headingName = existingHeadingName || generateUniqueName('Heading');
43
+ context.report({
44
+ node: node.openingElement,
45
+ messageId: 'noHtmlHeading',
46
+ data: {
47
+ name: nodeName
48
+ },
49
+ suggest: [{
50
+ desc: 'Replace with Heading component from @atlaskit/heading',
51
+ fix(fixer) {
52
+ var _node$closingElement;
53
+ const openingTagRange = node.openingElement.range;
54
+ const closingTagRange = (_node$closingElement = node.closingElement) === null || _node$closingElement === void 0 ? void 0 : _node$closingElement.range;
55
+ const elementName = isNodeOfType(node.openingElement.name, 'JSXIdentifier') ? node.openingElement.name.name : '';
56
+ const attributesText = node.openingElement.attributes
57
+ // Don't bring in the "role" or the "aria-level" because it's not needed
58
+ .filter(attr => !isNodeOfType(attr, 'JSXAttribute') || typeof attr.name.name === 'string' && !['role', 'aria-level'].includes(attr.name.name)).map(attr => sourceCode.getText(attr)).join(' ');
59
+
60
+ // Get the heading level
61
+ let headingLevel = '';
62
+ const ariaLevel = node.openingElement.attributes.find(attr => isNodeOfType(attr, 'JSXAttribute') && attr.name.name === 'aria-level');
63
+ if (ariaLevel && isNodeOfType(ariaLevel, 'JSXAttribute')) {
64
+ var _ariaLevel$value, _ariaLevel$value2;
65
+ // If it's a string
66
+ if (((_ariaLevel$value = ariaLevel.value) === null || _ariaLevel$value === void 0 ? void 0 : _ariaLevel$value.type) === 'Literal' && ariaLevel.value.value) {
67
+ headingLevel = `h${ariaLevel.value.value}`;
68
+ // If it's a number or some other literal in an expression container
69
+ } else if (((_ariaLevel$value2 = ariaLevel.value) === null || _ariaLevel$value2 === void 0 ? void 0 : _ariaLevel$value2.type) === 'JSXExpressionContainer' && ariaLevel.value.expression.type === 'Literal' && ariaLevel.value.expression.value) {
70
+ headingLevel = `h${ariaLevel.value.expression.value}`;
71
+ }
72
+ } else if (elementName.match(/h[1-6]/)) {
73
+ headingLevel = elementName;
74
+ }
75
+ const fixers = [];
76
+
77
+ // Replace <a> with <Heading> and retain attributes
78
+ if (openingTagRange) {
79
+ if (node.openingElement.selfClosing) {
80
+ fixers.push(fixer.replaceTextRange([openingTagRange[0] + 1, openingTagRange[1] - 1], `${headingName}${headingLevel ? ` as="${headingLevel}"` : ''}${attributesText ? ` ${attributesText}` : ''} /`));
81
+ } else {
82
+ fixers.push(fixer.replaceTextRange([openingTagRange[0] + 1, openingTagRange[1] - 1], `${headingName}${headingLevel ? ` as="${headingLevel}"` : ''}${attributesText ? ` ${attributesText}` : ''}`));
83
+ }
84
+ }
85
+ if (closingTagRange && !node.openingElement.selfClosing) {
86
+ fixers.push(fixer.replaceTextRange([closingTagRange[0] + 2, closingTagRange[1] - 1], headingName));
87
+ }
88
+
89
+ // Add import if not present
90
+ if (!existingHeadingName) {
91
+ const importStatement = `import ${headingName} from '@atlaskit/heading';\n`;
92
+ fixers.push(fixer.insertTextBefore(sourceCode.ast, importStatement));
93
+ }
94
+ return fixers;
95
+ }
96
+ }]
97
+ });
98
+ }
99
+ };
@@ -0,0 +1,37 @@
1
+ /* eslint-disable @repo/internal/react/require-jsdoc */
2
+
3
+ import { isNodeOfType } from 'eslint-codemod-utils';
4
+ import { getScope } from '@atlaskit/eslint-utils/context-compat';
5
+ import { getJsxElementByName } from '../../../utils/get-jsx-element-by-name';
6
+ import { getStyledComponentCall } from '../../../utils/get-styled-component-call';
7
+ import { isSupportedForLint } from '../supported';
8
+ export const StyledComponent = {
9
+ lint(node, {
10
+ context
11
+ }) {
12
+ var _getJsxElementByName;
13
+ if (!isNodeOfType(node, 'CallExpression') || !isNodeOfType(node.callee, 'MemberExpression') || !isNodeOfType(node.callee.object, 'Identifier') || !isNodeOfType(node.callee.property, 'Identifier')) {
14
+ return;
15
+ }
16
+ const styles = getStyledComponentCall(node);
17
+ const elementName = node.callee.property.name;
18
+ if (!styles || !isNodeOfType(styles.id, 'Identifier')) {
19
+ return;
20
+ }
21
+ const jsxElement = (_getJsxElementByName = getJsxElementByName(styles.id.name, getScope(context, node))) === null || _getJsxElementByName === void 0 ? void 0 : _getJsxElementByName.parent;
22
+ if (!jsxElement) {
23
+ // If there's no JSX element, we can't determine if it's being used as an heading or not
24
+ return;
25
+ }
26
+ if (jsxElement && !isSupportedForLint(jsxElement, elementName)) {
27
+ return;
28
+ }
29
+ context.report({
30
+ node: styles,
31
+ messageId: 'noHtmlHeading',
32
+ data: {
33
+ name: node.callee.property.name
34
+ }
35
+ });
36
+ }
37
+ };
@@ -0,0 +1,72 @@
1
+ import { isNodeOfType } from 'eslint-codemod-utils';
2
+ import * as ast from '../../../ast-nodes';
3
+ const supportedElements = [{
4
+ name: 'h1'
5
+ }, {
6
+ name: 'h2'
7
+ }, {
8
+ name: 'h3'
9
+ }, {
10
+ name: 'h4'
11
+ }, {
12
+ name: 'h5'
13
+ }, {
14
+ name: 'h6'
15
+ }, {
16
+ name: '*',
17
+ attributes: [{
18
+ name: 'role',
19
+ values: ['heading']
20
+ }]
21
+ }];
22
+
23
+ /**
24
+ * Determines if the given JSX element is a supported element to lint with this rule.
25
+ */
26
+ export function isSupportedForLint(jsxNode, elementName) {
27
+ if (!isNodeOfType(jsxNode, 'JSXElement')) {
28
+ return false;
29
+ }
30
+
31
+ // Allow passing in the element name because the jsxNode doesn't
32
+ // represent the element name with styled components
33
+ const elName = elementName || ast.JSXElement.getName(jsxNode);
34
+ if (!elName) {
35
+ return false;
36
+ }
37
+
38
+ // Only check native HTML elements, not components
39
+ if (elName[0] !== elName[0].toLowerCase()) {
40
+ return false;
41
+ }
42
+ let supportedElement = supportedElements.find(({
43
+ name
44
+ }) => name === elName);
45
+ if (!supportedElement) {
46
+ supportedElement = supportedElements.find(({
47
+ name
48
+ }) => name === '*');
49
+ }
50
+ if (!supportedElement) {
51
+ return false;
52
+ }
53
+
54
+ // Check if the element has any attributes that are not supported
55
+ const attributes = ast.JSXElement.getAttributes(jsxNode);
56
+ if (supportedElement.attributes && !supportedElement.attributes.every(({
57
+ name,
58
+ values
59
+ }) => {
60
+ return attributes.some(attribute => {
61
+ if (attribute.type === 'JSXSpreadAttribute') {
62
+ return false;
63
+ }
64
+ const isMatchingName = attribute.name.name === name;
65
+ const isMatchingValues = values && attribute.value && attribute.value.type === 'Literal' && typeof attribute.value.value === 'string' && (values === null || values === void 0 ? void 0 : values.includes(attribute.value.value));
66
+ return isMatchingName && isMatchingValues;
67
+ });
68
+ })) {
69
+ return false;
70
+ }
71
+ return true;
72
+ }
@@ -0,0 +1,34 @@
1
+ import { createLintRule } from '../utils/create-rule';
2
+ import { JSXElement, StyledComponent } from './node-types';
3
+ const rule = createLintRule({
4
+ meta: {
5
+ name: 'no-html-select',
6
+ type: 'suggestion',
7
+ hasSuggestions: true,
8
+ docs: {
9
+ description: 'Discourage direct usage of HTML select elements in favor of the Atlassian Design System select component.',
10
+ recommended: true,
11
+ severity: 'warn'
12
+ },
13
+ messages: {
14
+ noHtmlSelect: `This <{{ name }}> should be replaced with the select component from the Atlassian Design System. ADS select components have event tracking, ensure accessible implementations, and provide access to ADS styling features like design tokens.`
15
+ }
16
+ },
17
+ create(context) {
18
+ return {
19
+ // transforms styled.<anchor>(...) usages
20
+ CallExpression(node) {
21
+ StyledComponent.lint(node, {
22
+ context
23
+ });
24
+ },
25
+ // transforms <anchor css={...}> usages
26
+ JSXElement(node) {
27
+ JSXElement.lint(node, {
28
+ context
29
+ });
30
+ }
31
+ };
32
+ }
33
+ });
34
+ export default rule;
@@ -0,0 +1,2 @@
1
+ export { StyledComponent } from './styled-component';
2
+ export { JSXElement } from './jsx-element';
@@ -0,0 +1,19 @@
1
+ import * as ast from '../../../../ast-nodes';
2
+ import { isSupportedForLint } from '../supported';
3
+ export const JSXElement = {
4
+ lint(node, {
5
+ context
6
+ }) {
7
+ if (!isSupportedForLint(node)) {
8
+ return;
9
+ }
10
+ const nodeName = ast.JSXElement.getName(node);
11
+ context.report({
12
+ node: node.openingElement,
13
+ messageId: 'noHtmlSelect',
14
+ data: {
15
+ name: nodeName
16
+ }
17
+ });
18
+ }
19
+ };
@@ -0,0 +1,37 @@
1
+ /* eslint-disable @repo/internal/react/require-jsdoc */
2
+
3
+ import { isNodeOfType } from 'eslint-codemod-utils';
4
+ import { getScope } from '@atlaskit/eslint-utils/context-compat';
5
+ import { getJsxElementByName } from '../../../utils/get-jsx-element-by-name';
6
+ import { getStyledComponentCall } from '../../../utils/get-styled-component-call';
7
+ import { isSupportedForLint } from '../supported';
8
+ export const StyledComponent = {
9
+ lint(node, {
10
+ context
11
+ }) {
12
+ var _getJsxElementByName;
13
+ if (!isNodeOfType(node, 'CallExpression') || !isNodeOfType(node.callee, 'MemberExpression') || !isNodeOfType(node.callee.object, 'Identifier') || !isNodeOfType(node.callee.property, 'Identifier')) {
14
+ return;
15
+ }
16
+ const styles = getStyledComponentCall(node);
17
+ const elementName = node.callee.property.name;
18
+ if (!styles || !isNodeOfType(styles.id, 'Identifier')) {
19
+ return;
20
+ }
21
+ const jsxElement = (_getJsxElementByName = getJsxElementByName(styles.id.name, getScope(context, node))) === null || _getJsxElementByName === void 0 ? void 0 : _getJsxElementByName.parent;
22
+ if (!jsxElement) {
23
+ // If there's no JSX element, we can't determine if it's being used as an select or not
24
+ return;
25
+ }
26
+ if (jsxElement && !isSupportedForLint(jsxElement, elementName)) {
27
+ return;
28
+ }
29
+ context.report({
30
+ node: styles,
31
+ messageId: 'noHtmlSelect',
32
+ data: {
33
+ name: node.callee.property.name
34
+ }
35
+ });
36
+ }
37
+ };
@@ -0,0 +1,56 @@
1
+ import { isNodeOfType } from 'eslint-codemod-utils';
2
+ import * as ast from '../../../ast-nodes';
3
+ const supportedElements = [{
4
+ name: 'select'
5
+ }];
6
+
7
+ /**
8
+ * Determines if the given JSX element is a supported element to lint with this rule.
9
+ */
10
+ export function isSupportedForLint(jsxNode, elementName) {
11
+ if (!isNodeOfType(jsxNode, 'JSXElement')) {
12
+ return false;
13
+ }
14
+
15
+ // Allow passing in the element name because the jsxNode doesn't
16
+ // represent the element name with styled components
17
+ const elName = elementName || ast.JSXElement.getName(jsxNode);
18
+ if (!elName) {
19
+ return false;
20
+ }
21
+
22
+ // Only check native HTML elements, not components
23
+ if (elName[0] !== elName[0].toLowerCase()) {
24
+ return false;
25
+ }
26
+ let supportedElement = supportedElements.find(({
27
+ name
28
+ }) => name === elName);
29
+ if (!supportedElement) {
30
+ supportedElement = supportedElements.find(({
31
+ name
32
+ }) => name === '*');
33
+ }
34
+ if (!supportedElement) {
35
+ return false;
36
+ }
37
+
38
+ // Check if the element has any attributes that are not supported
39
+ const attributes = ast.JSXElement.getAttributes(jsxNode);
40
+ if (supportedElement.attributes && !supportedElement.attributes.every(({
41
+ name,
42
+ values
43
+ }) => {
44
+ return attributes.some(attribute => {
45
+ if (attribute.type === 'JSXSpreadAttribute') {
46
+ return false;
47
+ }
48
+ const isMatchingName = attribute.name.name === name;
49
+ const isMatchingValues = values && attribute.value && attribute.value.type === 'Literal' && typeof attribute.value.value === 'string' && (values === null || values === void 0 ? void 0 : values.includes(attribute.value.value));
50
+ return isMatchingName && isMatchingValues;
51
+ });
52
+ })) {
53
+ return false;
54
+ }
55
+ return true;
56
+ }
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::cadedc68c5a8a92d8134b8aa5239937f>>
3
+ * @codegen <<SignedSource::aa1526cdf8f7bbdd8e89e584da433397>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
 
@@ -25,8 +25,10 @@ export default {
25
25
  '@atlaskit/design-system/no-html-anchor': 'warn',
26
26
  '@atlaskit/design-system/no-html-button': 'warn',
27
27
  '@atlaskit/design-system/no-html-checkbox': 'warn',
28
+ '@atlaskit/design-system/no-html-heading': 'warn',
28
29
  '@atlaskit/design-system/no-html-image': 'warn',
29
30
  '@atlaskit/design-system/no-html-range': 'warn',
31
+ '@atlaskit/design-system/no-html-select': 'warn',
30
32
  '@atlaskit/design-system/no-invalid-css-map': ['error', {
31
33
  allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
32
34
  }],
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::340bf9f79ec1de1340a89df9d626b929>>
3
+ * @codegen <<SignedSource::ec47b97e20d77ba1f43c2211aeeed2f6>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
 
@@ -24,8 +24,10 @@ export default {
24
24
  '@atlaskit/design-system/no-html-anchor': 'warn',
25
25
  '@atlaskit/design-system/no-html-button': 'warn',
26
26
  '@atlaskit/design-system/no-html-checkbox': 'warn',
27
+ '@atlaskit/design-system/no-html-heading': 'warn',
27
28
  '@atlaskit/design-system/no-html-image': 'warn',
28
29
  '@atlaskit/design-system/no-html-range': 'warn',
30
+ '@atlaskit/design-system/no-html-select': 'warn',
29
31
  '@atlaskit/design-system/no-invalid-css-map': ['error', {
30
32
  allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
31
33
  }],
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::c264ea60cc6348c4292744c1260543d8>>
3
+ * @codegen <<SignedSource::4ad986601bfd6f0081e3bc6909694979>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
 
@@ -20,8 +20,10 @@ export default {
20
20
  '@atlaskit/design-system/no-html-anchor': 'warn',
21
21
  '@atlaskit/design-system/no-html-button': 'warn',
22
22
  '@atlaskit/design-system/no-html-checkbox': 'warn',
23
+ '@atlaskit/design-system/no-html-heading': 'warn',
23
24
  '@atlaskit/design-system/no-html-image': 'warn',
24
25
  '@atlaskit/design-system/no-html-range': 'warn',
26
+ '@atlaskit/design-system/no-html-select': 'warn',
25
27
  '@atlaskit/design-system/no-invalid-css-map': ['error', {
26
28
  allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
27
29
  }],
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::0158deb3db6cafbdeae2aeb18673ebc2>>
3
+ * @codegen <<SignedSource::18dcf6fce30892e43fb5fb76339c261e>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
 
@@ -19,8 +19,10 @@ export default {
19
19
  '@atlaskit/design-system/no-html-anchor': 'warn',
20
20
  '@atlaskit/design-system/no-html-button': 'warn',
21
21
  '@atlaskit/design-system/no-html-checkbox': 'warn',
22
+ '@atlaskit/design-system/no-html-heading': 'warn',
22
23
  '@atlaskit/design-system/no-html-image': 'warn',
23
24
  '@atlaskit/design-system/no-html-range': 'warn',
25
+ '@atlaskit/design-system/no-html-select': 'warn',
24
26
  '@atlaskit/design-system/no-invalid-css-map': ['error', {
25
27
  allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
26
28
  }],