@atlaskit/eslint-plugin-design-system 9.7.0 → 10.0.1

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 (154) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/README.md +6 -5
  3. package/constellation/consistent-css-prop-usage/usage.mdx +44 -30
  4. package/constellation/ensure-design-token-usage/usage.mdx +12 -7
  5. package/constellation/ensure-design-token-usage-preview/usage.mdx +2 -1
  6. package/constellation/icon-label/usage.mdx +5 -3
  7. package/constellation/index/usage.mdx +4 -2
  8. package/constellation/no-banned-imports/usage.mdx +3 -1
  9. package/constellation/no-css-tagged-template-expression/usage.mdx +22 -17
  10. package/constellation/no-deprecated-apis/usage.mdx +33 -27
  11. package/constellation/no-deprecated-design-token-usage/usage.mdx +7 -4
  12. package/constellation/no-deprecated-imports/usage.mdx +31 -27
  13. package/constellation/no-direct-use-of-web-platform-drag-and-drop/usage.mdx +19 -10
  14. package/constellation/no-empty-styled-expression/usage.mdx +19 -14
  15. package/constellation/no-exported-css/usage.mdx +15 -10
  16. package/constellation/no-exported-keyframes/usage.mdx +15 -10
  17. package/constellation/no-html-anchor/usage.mdx +40 -0
  18. package/constellation/no-html-button/usage.mdx +52 -0
  19. package/constellation/no-invalid-css-map/usage.mdx +69 -58
  20. package/constellation/no-keyframes-tagged-template-expression/usage.mdx +24 -18
  21. package/constellation/no-margin/usage.mdx +3 -2
  22. package/constellation/no-nested-styles/usage.mdx +16 -16
  23. package/constellation/no-physical-properties/usage.mdx +13 -13
  24. package/constellation/no-styled-tagged-template-expression/usage.mdx +39 -34
  25. package/constellation/no-unsafe-design-token-usage/usage.mdx +8 -7
  26. package/constellation/no-unsafe-style-overrides/usage.mdx +10 -7
  27. package/constellation/no-unsupported-drag-and-drop-libraries/usage.mdx +8 -2
  28. package/constellation/prefer-primitives/usage.mdx +3 -2
  29. package/constellation/use-button-group-label/usage.mdx +4 -2
  30. package/constellation/use-drawer-label/usage.mdx +4 -2
  31. package/constellation/use-heading/usage.mdx +7 -4
  32. package/constellation/use-heading-level-in-spotlight-card/usage.mdx +3 -2
  33. package/constellation/use-href-in-link-item/usage.mdx +2 -1
  34. package/constellation/use-popup-label/usage.mdx +5 -2
  35. package/constellation/use-primitives/usage.mdx +40 -39
  36. package/constellation/use-primitives-text/usage.mdx +7 -3
  37. package/constellation/use-tokens-space/usage.mdx +7 -3
  38. package/constellation/use-tokens-typography/usage.mdx +15 -6
  39. package/constellation/use-visually-hidden/usage.mdx +2 -1
  40. package/dist/cjs/common/token-maps.partial.js +49 -0
  41. package/dist/cjs/index.codegen.js +1 -1
  42. package/dist/cjs/presets/all.codegen.js +3 -2
  43. package/dist/cjs/presets/recommended.codegen.js +1 -1
  44. package/dist/cjs/rules/ensure-design-token-usage/index.js +10 -1
  45. package/dist/cjs/rules/index.codegen.js +5 -3
  46. package/dist/cjs/rules/no-html-anchor/index.js +39 -0
  47. package/dist/cjs/rules/no-html-anchor/node-types/index.js +19 -0
  48. package/dist/cjs/rules/no-html-anchor/node-types/jsx-element/index.js +28 -0
  49. package/dist/cjs/rules/no-html-anchor/node-types/styled-component/get-styled-component-call.js +47 -0
  50. package/dist/cjs/rules/no-html-anchor/node-types/styled-component/index.js +37 -0
  51. package/dist/cjs/rules/no-html-anchor/node-types/supported.js +66 -0
  52. package/dist/cjs/rules/no-html-anchor/utils/get-jsx-element-by-name.js +53 -0
  53. package/dist/cjs/rules/no-html-button/index.js +39 -0
  54. package/dist/cjs/rules/no-html-button/node-types/index.js +19 -0
  55. package/dist/cjs/rules/no-html-button/node-types/jsx-element/index.js +28 -0
  56. package/dist/cjs/rules/no-html-button/node-types/styled-component/get-styled-component-call.js +47 -0
  57. package/dist/cjs/rules/no-html-button/node-types/styled-component/index.js +37 -0
  58. package/dist/cjs/rules/no-html-button/node-types/supported.js +79 -0
  59. package/dist/cjs/rules/no-html-button/utils/get-jsx-element-by-name.js +53 -0
  60. package/dist/cjs/rules/utils/is-node.js +4 -6
  61. package/dist/es2019/common/token-maps.partial.js +42 -0
  62. package/dist/es2019/index.codegen.js +1 -1
  63. package/dist/es2019/presets/all.codegen.js +3 -2
  64. package/dist/es2019/presets/recommended.codegen.js +1 -1
  65. package/dist/es2019/rules/ensure-design-token-usage/index.js +11 -1
  66. package/dist/es2019/rules/index.codegen.js +5 -3
  67. package/dist/es2019/rules/no-html-anchor/index.js +33 -0
  68. package/dist/es2019/rules/no-html-anchor/node-types/index.js +2 -0
  69. package/dist/es2019/rules/no-html-anchor/node-types/jsx-element/index.js +20 -0
  70. package/dist/es2019/rules/no-html-anchor/node-types/styled-component/get-styled-component-call.js +42 -0
  71. package/dist/es2019/rules/no-html-anchor/node-types/styled-component/index.js +32 -0
  72. package/dist/es2019/rules/no-html-anchor/node-types/supported.js +56 -0
  73. package/dist/es2019/rules/no-html-anchor/utils/get-jsx-element-by-name.js +39 -0
  74. package/dist/es2019/rules/no-html-button/index.js +33 -0
  75. package/dist/es2019/rules/no-html-button/node-types/index.js +2 -0
  76. package/dist/es2019/rules/no-html-button/node-types/jsx-element/index.js +20 -0
  77. package/dist/es2019/rules/no-html-button/node-types/styled-component/get-styled-component-call.js +42 -0
  78. package/dist/es2019/rules/no-html-button/node-types/styled-component/index.js +32 -0
  79. package/dist/es2019/rules/no-html-button/node-types/supported.js +69 -0
  80. package/dist/es2019/rules/no-html-button/utils/get-jsx-element-by-name.js +39 -0
  81. package/dist/es2019/rules/utils/is-node.js +4 -4
  82. package/dist/esm/common/token-maps.partial.js +42 -0
  83. package/dist/esm/index.codegen.js +1 -1
  84. package/dist/esm/presets/all.codegen.js +3 -2
  85. package/dist/esm/presets/recommended.codegen.js +1 -1
  86. package/dist/esm/rules/ensure-design-token-usage/index.js +10 -1
  87. package/dist/esm/rules/index.codegen.js +5 -3
  88. package/dist/esm/rules/no-html-anchor/index.js +33 -0
  89. package/dist/esm/rules/no-html-anchor/node-types/index.js +2 -0
  90. package/dist/esm/rules/no-html-anchor/node-types/jsx-element/index.js +19 -0
  91. package/dist/esm/rules/no-html-anchor/node-types/styled-component/get-styled-component-call.js +42 -0
  92. package/dist/esm/rules/no-html-anchor/node-types/styled-component/index.js +31 -0
  93. package/dist/esm/rules/no-html-anchor/node-types/supported.js +57 -0
  94. package/dist/esm/rules/no-html-anchor/utils/get-jsx-element-by-name.js +47 -0
  95. package/dist/esm/rules/no-html-button/index.js +33 -0
  96. package/dist/esm/rules/no-html-button/node-types/index.js +2 -0
  97. package/dist/esm/rules/no-html-button/node-types/jsx-element/index.js +19 -0
  98. package/dist/esm/rules/no-html-button/node-types/styled-component/get-styled-component-call.js +42 -0
  99. package/dist/esm/rules/no-html-button/node-types/styled-component/index.js +31 -0
  100. package/dist/esm/rules/no-html-button/node-types/supported.js +70 -0
  101. package/dist/esm/rules/no-html-button/utils/get-jsx-element-by-name.js +47 -0
  102. package/dist/esm/rules/utils/is-node.js +4 -6
  103. package/dist/types/common/token-maps.partial.d.ts +65 -0
  104. package/dist/types/index.codegen.d.ts +2 -1
  105. package/dist/types/presets/all.codegen.d.ts +3 -2
  106. package/dist/types/presets/recommended.codegen.d.ts +1 -1
  107. package/dist/types/rules/ensure-design-token-usage/index.d.ts +1 -1
  108. package/dist/types/rules/index.codegen.d.ts +2 -1
  109. package/dist/types/rules/no-html-anchor/index.d.ts +3 -0
  110. package/dist/types/rules/no-html-anchor/node-types/index.d.ts +2 -0
  111. package/dist/types/rules/no-html-anchor/node-types/jsx-element/index.d.ts +8 -0
  112. package/dist/types/rules/no-html-anchor/node-types/styled-component/get-styled-component-call.d.ts +6 -0
  113. package/dist/types/rules/no-html-anchor/node-types/styled-component/index.d.ts +8 -0
  114. package/dist/types/rules/no-html-anchor/node-types/supported.d.ts +7 -0
  115. package/dist/types/rules/no-html-anchor/utils/get-jsx-element-by-name.d.ts +6 -0
  116. package/dist/types/rules/no-html-button/index.d.ts +3 -0
  117. package/dist/types/rules/no-html-button/node-types/index.d.ts +2 -0
  118. package/dist/types/rules/no-html-button/node-types/jsx-element/index.d.ts +8 -0
  119. package/dist/types/rules/no-html-button/node-types/styled-component/get-styled-component-call.d.ts +6 -0
  120. package/dist/types/rules/no-html-button/node-types/styled-component/index.d.ts +8 -0
  121. package/dist/types/rules/no-html-button/node-types/supported.d.ts +7 -0
  122. package/dist/types/rules/no-html-button/utils/get-jsx-element-by-name.d.ts +6 -0
  123. package/dist/types/rules/utils/is-node.d.ts +3 -3
  124. package/dist/types-ts4.5/common/token-maps.partial.d.ts +65 -0
  125. package/dist/types-ts4.5/index.codegen.d.ts +2 -1
  126. package/dist/types-ts4.5/presets/all.codegen.d.ts +3 -2
  127. package/dist/types-ts4.5/presets/recommended.codegen.d.ts +1 -1
  128. package/dist/types-ts4.5/rules/ensure-design-token-usage/index.d.ts +1 -1
  129. package/dist/types-ts4.5/rules/index.codegen.d.ts +2 -1
  130. package/dist/types-ts4.5/rules/no-html-anchor/node-types/index.d.ts +2 -0
  131. package/dist/types-ts4.5/rules/no-html-anchor/node-types/jsx-element/index.d.ts +8 -0
  132. package/dist/types-ts4.5/rules/no-html-anchor/node-types/styled-component/get-styled-component-call.d.ts +6 -0
  133. package/dist/types-ts4.5/rules/no-html-anchor/node-types/styled-component/index.d.ts +8 -0
  134. package/dist/types-ts4.5/rules/no-html-anchor/node-types/supported.d.ts +7 -0
  135. package/dist/types-ts4.5/rules/no-html-anchor/utils/get-jsx-element-by-name.d.ts +6 -0
  136. package/dist/types-ts4.5/rules/no-html-button/node-types/index.d.ts +2 -0
  137. package/dist/types-ts4.5/rules/no-html-button/node-types/jsx-element/index.d.ts +8 -0
  138. package/dist/types-ts4.5/rules/no-html-button/node-types/styled-component/get-styled-component-call.d.ts +6 -0
  139. package/dist/types-ts4.5/rules/no-html-button/node-types/styled-component/index.d.ts +8 -0
  140. package/dist/types-ts4.5/rules/no-html-button/node-types/supported.d.ts +7 -0
  141. package/dist/types-ts4.5/rules/no-html-button/utils/get-jsx-element-by-name.d.ts +6 -0
  142. package/dist/types-ts4.5/rules/utils/is-node.d.ts +3 -3
  143. package/package.json +3 -2
  144. package/constellation/no-html-button-element/usage.mdx +0 -26
  145. package/dist/cjs/rules/no-html-button-element/index.js +0 -107
  146. package/dist/cjs/rules/no-html-button-element/utils.js +0 -18
  147. package/dist/es2019/rules/no-html-button-element/index.js +0 -101
  148. package/dist/es2019/rules/no-html-button-element/utils.js +0 -12
  149. package/dist/esm/rules/no-html-button-element/index.js +0 -101
  150. package/dist/esm/rules/no-html-button-element/utils.js +0 -12
  151. package/dist/types/rules/no-html-button-element/utils.d.ts +0 -2
  152. package/dist/types-ts4.5/rules/no-html-button-element/utils.d.ts +0 -2
  153. /package/dist/types-ts4.5/rules/{no-html-button-element → no-html-anchor}/index.d.ts +0 -0
  154. /package/dist/{types/rules/no-html-button-element → types-ts4.5/rules/no-html-button}/index.d.ts +0 -0
@@ -0,0 +1,47 @@
1
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
+ import { isNodeOfType } from 'eslint-codemod-utils';
3
+
4
+ /**
5
+ * Given a component name finds its JSX usage
6
+ */
7
+ export var getJsxElementByName = function getJsxElementByName(componentName, scope) {
8
+ var _variableDeclaration$;
9
+ var variableDeclaration = scope.variables.find(function (v) {
10
+ return v.name === componentName;
11
+ });
12
+ if (!variableDeclaration) {
13
+ return;
14
+ }
15
+
16
+ // length here should be exactly 2 to indicate only two references:
17
+ // one being the variable declaration itself
18
+ // second being the JSX call site
19
+ // we might consider handling multiple local JSX call sites in the future
20
+ // but "this is good enough for now"™️
21
+ if (variableDeclaration.references.length !== 2) {
22
+ return;
23
+ }
24
+ var jsxUsage = (_variableDeclaration$ = variableDeclaration.references[1]) === null || _variableDeclaration$ === void 0 ? void 0 : _variableDeclaration$.identifier;
25
+ var _variableDeclaration$2 = variableDeclaration.references.map(function (ref) {
26
+ return ref === null || ref === void 0 ? void 0 : ref.identifier;
27
+ }),
28
+ _variableDeclaration$3 = _slicedToArray(_variableDeclaration$2, 2),
29
+ firstIdentifier = _variableDeclaration$3[0],
30
+ secondIdentifier = _variableDeclaration$3[1];
31
+ // Check if the first reference is a JSXOpeningElement and the second is not or vice versa
32
+ if (isNodeOfType(firstIdentifier, 'JSXIdentifier') && !isNodeOfType(secondIdentifier, 'JSXIdentifier')) {
33
+ jsxUsage = firstIdentifier;
34
+ } else if (isNodeOfType(secondIdentifier, 'JSXIdentifier') && !isNodeOfType(firstIdentifier, 'JSXIdentifier')) {
35
+ jsxUsage = secondIdentifier;
36
+ } else {
37
+ return;
38
+ }
39
+ if (!isNodeOfType(jsxUsage, 'JSXIdentifier')) {
40
+ return;
41
+ }
42
+ var jsxOpeningElement = jsxUsage.parent;
43
+ if (!isNodeOfType(jsxOpeningElement, 'JSXOpeningElement')) {
44
+ return;
45
+ }
46
+ return jsxOpeningElement;
47
+ };
@@ -1,6 +1,7 @@
1
1
  // eslint-disable-next-line import/no-extraneous-dependencies
2
2
 
3
3
  import { isNodeOfType } from 'eslint-codemod-utils';
4
+ import { isXcss } from '@atlaskit/eslint-utils/is-supported-import';
4
5
  import { Root } from '../../ast-nodes';
5
6
  export var isDecendantOfGlobalToken = function isDecendantOfGlobalToken(node) {
6
7
  if (isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'token' || node.callee.name === 'getTokenValue')) {
@@ -75,16 +76,13 @@ export var isCssInJsCallNode = function isCssInJsCallNode(node) {
75
76
  export var isCssInJsObjectNode = function isCssInJsObjectNode(node) {
76
77
  return (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' && node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && cssInJsCallees.includes(node.callee.object.name);
77
78
  };
78
- var isXcssCallNode = function isXcssCallNode(node) {
79
- return (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' && node.callee.type === 'Identifier' && node.callee.name === 'xcss';
80
- };
81
- export var isDecendantOfXcssBlock = function isDecendantOfXcssBlock(node) {
79
+ export var isDecendantOfXcssBlock = function isDecendantOfXcssBlock(node, referencesInScope, importSources) {
82
80
  // xcss contains types for all properties that accept tokens, so ignore xcss for linting as it will report false positives
83
- if (isXcssCallNode(node)) {
81
+ if (node.type === 'CallExpression' && isXcss(node.callee, referencesInScope, importSources)) {
84
82
  return true;
85
83
  }
86
84
  if (node.parent) {
87
- return isDecendantOfXcssBlock(node.parent);
85
+ return isDecendantOfXcssBlock(node.parent, referencesInScope, importSources);
88
86
  }
89
87
  return false;
90
88
  };
@@ -0,0 +1,65 @@
1
+ /**
2
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
+ * @codegen <<SignedSource::30c84f908843af1f250860b6f3deeea0>>
4
+ * @codegenId spacing
5
+ * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen-token-maps
6
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
7
+ */
8
+ export declare const positiveSpaceMap: {
9
+ '0px': string;
10
+ '2px': string;
11
+ '4px': string;
12
+ '6px': string;
13
+ '8px': string;
14
+ '12px': string;
15
+ '16px': string;
16
+ '20px': string;
17
+ '24px': string;
18
+ '32px': string;
19
+ '40px': string;
20
+ '48px': string;
21
+ '64px': string;
22
+ '80px': string;
23
+ };
24
+ export type Space = keyof typeof positiveSpaceMap;
25
+ export declare const negativeSpaceMap: {
26
+ '-2px': string;
27
+ '-4px': string;
28
+ '-6px': string;
29
+ '-8px': string;
30
+ '-12px': string;
31
+ '-16px': string;
32
+ '-20px': string;
33
+ '-24px': string;
34
+ '-32px': string;
35
+ };
36
+ export type NegativeSpace = keyof typeof negativeSpaceMap;
37
+ export declare const allSpaceMap: {
38
+ '-2px': string;
39
+ '-4px': string;
40
+ '-6px': string;
41
+ '-8px': string;
42
+ '-12px': string;
43
+ '-16px': string;
44
+ '-20px': string;
45
+ '-24px': string;
46
+ '-32px': string;
47
+ '0px': string;
48
+ '2px': string;
49
+ '4px': string;
50
+ '6px': string;
51
+ '8px': string;
52
+ '12px': string;
53
+ '16px': string;
54
+ '20px': string;
55
+ '24px': string;
56
+ '32px': string;
57
+ '40px': string;
58
+ '48px': string;
59
+ '64px': string;
60
+ '80px': string;
61
+ };
62
+ export type AllSpace = keyof typeof allSpaceMap;
63
+ /**
64
+ * @codegenEnd
65
+ */
@@ -16,7 +16,8 @@ export declare const configs: {
16
16
  '@atlaskit/design-system/no-empty-styled-expression': string;
17
17
  '@atlaskit/design-system/no-exported-css': string;
18
18
  '@atlaskit/design-system/no-exported-keyframes': string;
19
- '@atlaskit/design-system/no-html-button-element': string;
19
+ '@atlaskit/design-system/no-html-anchor': string;
20
+ '@atlaskit/design-system/no-html-button': string;
20
21
  '@atlaskit/design-system/no-invalid-css-map': string;
21
22
  '@atlaskit/design-system/no-keyframes-tagged-template-expression': string;
22
23
  '@atlaskit/design-system/no-margin': string;
@@ -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::5a5b0ed8cf86631274d7d30df4199e5d>>
3
+ * @codegen <<SignedSource::0be7639a95bf4c9bbfe00154d8193477>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
  declare const _default: {
@@ -19,7 +19,8 @@ declare const _default: {
19
19
  '@atlaskit/design-system/no-empty-styled-expression': string;
20
20
  '@atlaskit/design-system/no-exported-css': string;
21
21
  '@atlaskit/design-system/no-exported-keyframes': string;
22
- '@atlaskit/design-system/no-html-button-element': string;
22
+ '@atlaskit/design-system/no-html-anchor': string;
23
+ '@atlaskit/design-system/no-html-button': string;
23
24
  '@atlaskit/design-system/no-invalid-css-map': string;
24
25
  '@atlaskit/design-system/no-keyframes-tagged-template-expression': string;
25
26
  '@atlaskit/design-system/no-margin': string;
@@ -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::af55c21605e3b8ee7836cb8950a9f713>>
3
+ * @codegen <<SignedSource::73a3666b244b58cc221eebcda071161d>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
  declare const _default: {
@@ -1,5 +1,5 @@
1
1
  import type { Rule } from 'eslint';
2
- import { RuleConfig } from './types';
2
+ import { type RuleConfig } from './types';
3
3
  declare const createWithConfig: (initialConfig: RuleConfig) => Rule.RuleModule['create'];
4
4
  declare const rule: Rule.RuleModule;
5
5
  export default rule;
@@ -16,7 +16,8 @@ declare const _default: {
16
16
  'no-empty-styled-expression': import("eslint").Rule.RuleModule;
17
17
  'no-exported-css': import("eslint").Rule.RuleModule;
18
18
  'no-exported-keyframes': import("eslint").Rule.RuleModule;
19
- 'no-html-button-element': import("eslint").Rule.RuleModule;
19
+ 'no-html-anchor': import("eslint").Rule.RuleModule;
20
+ 'no-html-button': import("eslint").Rule.RuleModule;
20
21
  'no-invalid-css-map': import("eslint").Rule.RuleModule;
21
22
  'no-keyframes-tagged-template-expression': import("eslint").Rule.RuleModule;
22
23
  'no-margin': import("eslint").Rule.RuleModule;
@@ -0,0 +1,3 @@
1
+ import type { Rule } from 'eslint';
2
+ declare const rule: Rule.RuleModule;
3
+ export default rule;
@@ -0,0 +1,2 @@
1
+ export { StyledComponent } from './styled-component';
2
+ export { JSXElement } from './jsx-element';
@@ -0,0 +1,8 @@
1
+ import type { Rule } from 'eslint';
2
+ interface MetaData {
3
+ context: Rule.RuleContext;
4
+ }
5
+ export declare const JSXElement: {
6
+ lint(node: Rule.Node, { context }: MetaData): void;
7
+ };
8
+ export {};
@@ -0,0 +1,6 @@
1
+ import type { Rule } from 'eslint';
2
+ import { type VariableDeclarator } from 'eslint-codemod-utils';
3
+ /**
4
+ * Returns a styled component
5
+ */
6
+ export declare const getStyledComponentCall: (node: Rule.Node) => (VariableDeclarator & Rule.NodeParentExtension) | undefined;
@@ -0,0 +1,8 @@
1
+ import type { Rule } from 'eslint';
2
+ interface MetaData {
3
+ context: Rule.RuleContext;
4
+ }
5
+ export declare const StyledComponent: {
6
+ lint(node: Rule.Node, { context }: MetaData): void;
7
+ };
8
+ export {};
@@ -0,0 +1,7 @@
1
+ import { type EslintNode } from 'eslint-codemod-utils';
2
+ /**
3
+ * Determines if the given JSX element is a supported element to lint with this rule.
4
+ */
5
+ export declare function isSupportedForLint(jsxNode: EslintNode, elementName?: string): jsxNode is Extract<EslintNode, {
6
+ type: 'JSXElement';
7
+ }>;
@@ -0,0 +1,6 @@
1
+ import type { Rule, Scope } from 'eslint';
2
+ import { type JSXOpeningElement } from 'eslint-codemod-utils';
3
+ /**
4
+ * Given a component name finds its JSX usage
5
+ */
6
+ export declare const getJsxElementByName: (componentName: string, scope: Scope.Scope) => (JSXOpeningElement & Rule.NodeParentExtension) | undefined;
@@ -0,0 +1,3 @@
1
+ import type { Rule } from 'eslint';
2
+ declare const rule: Rule.RuleModule;
3
+ export default rule;
@@ -0,0 +1,2 @@
1
+ export { StyledComponent } from './styled-component';
2
+ export { JSXElement } from './jsx-element';
@@ -0,0 +1,8 @@
1
+ import type { Rule } from 'eslint';
2
+ interface MetaData {
3
+ context: Rule.RuleContext;
4
+ }
5
+ export declare const JSXElement: {
6
+ lint(node: Rule.Node, { context }: MetaData): void;
7
+ };
8
+ export {};
@@ -0,0 +1,6 @@
1
+ import type { Rule } from 'eslint';
2
+ import { type VariableDeclarator } from 'eslint-codemod-utils';
3
+ /**
4
+ * Returns a styled component
5
+ */
6
+ export declare const getStyledComponentCall: (node: Rule.Node) => (VariableDeclarator & Rule.NodeParentExtension) | undefined;
@@ -0,0 +1,8 @@
1
+ import type { Rule } from 'eslint';
2
+ interface MetaData {
3
+ context: Rule.RuleContext;
4
+ }
5
+ export declare const StyledComponent: {
6
+ lint(node: Rule.Node, { context }: MetaData): void;
7
+ };
8
+ export {};
@@ -0,0 +1,7 @@
1
+ import { type EslintNode } from 'eslint-codemod-utils';
2
+ /**
3
+ * Determines if the given JSX element is a supported element to lint with this rule.
4
+ */
5
+ export declare function isSupportedForLint(jsxNode: EslintNode, elementName?: string): jsxNode is Extract<EslintNode, {
6
+ type: 'JSXElement';
7
+ }>;
@@ -0,0 +1,6 @@
1
+ import type { Rule, Scope } from 'eslint';
2
+ import { type JSXOpeningElement } from 'eslint-codemod-utils';
3
+ /**
4
+ * Given a component name finds its JSX usage
5
+ */
6
+ export declare const getJsxElementByName: (componentName: string, scope: Scope.Scope) => (JSXOpeningElement & Rule.NodeParentExtension) | undefined;
@@ -1,5 +1,5 @@
1
- import type { Rule } from 'eslint';
2
- import { CallExpression, EslintNode, Expression, TaggedTemplateExpression } from 'eslint-codemod-utils';
1
+ import type { Rule, Scope } from 'eslint';
2
+ import { type CallExpression, type EslintNode, type Expression, type TaggedTemplateExpression } from 'eslint-codemod-utils';
3
3
  export declare const isDecendantOfGlobalToken: (node: EslintNode) => boolean;
4
4
  export declare const isDecendantOfType: (node: Rule.Node, type: Rule.Node['type'], skipNode?: boolean) => boolean;
5
5
  export declare const isPropertyKey: (node: Rule.Node) => boolean;
@@ -9,6 +9,6 @@ export declare const isDecendantOfPrimitive: (node: Rule.Node, context: Rule.Rul
9
9
  export declare const isCssInJsTemplateNode: (node?: Expression | null) => node is TaggedTemplateExpression;
10
10
  export declare const isCssInJsCallNode: (node?: Expression | null) => node is CallExpression;
11
11
  export declare const isCssInJsObjectNode: (node?: Expression | null) => node is CallExpression;
12
- export declare const isDecendantOfXcssBlock: (node: Rule.Node) => boolean;
12
+ export declare const isDecendantOfXcssBlock: (node: Rule.Node, referencesInScope: Scope.Reference[], importSources: string[]) => boolean;
13
13
  export declare const isDecendantOfStyleBlock: (node: Rule.Node) => boolean;
14
14
  export declare const isChildOfType: (node: Rule.Node, type: Rule.Node['type']) => boolean;
@@ -0,0 +1,65 @@
1
+ /**
2
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
+ * @codegen <<SignedSource::30c84f908843af1f250860b6f3deeea0>>
4
+ * @codegenId spacing
5
+ * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen-token-maps
6
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
7
+ */
8
+ export declare const positiveSpaceMap: {
9
+ '0px': string;
10
+ '2px': string;
11
+ '4px': string;
12
+ '6px': string;
13
+ '8px': string;
14
+ '12px': string;
15
+ '16px': string;
16
+ '20px': string;
17
+ '24px': string;
18
+ '32px': string;
19
+ '40px': string;
20
+ '48px': string;
21
+ '64px': string;
22
+ '80px': string;
23
+ };
24
+ export type Space = keyof typeof positiveSpaceMap;
25
+ export declare const negativeSpaceMap: {
26
+ '-2px': string;
27
+ '-4px': string;
28
+ '-6px': string;
29
+ '-8px': string;
30
+ '-12px': string;
31
+ '-16px': string;
32
+ '-20px': string;
33
+ '-24px': string;
34
+ '-32px': string;
35
+ };
36
+ export type NegativeSpace = keyof typeof negativeSpaceMap;
37
+ export declare const allSpaceMap: {
38
+ '-2px': string;
39
+ '-4px': string;
40
+ '-6px': string;
41
+ '-8px': string;
42
+ '-12px': string;
43
+ '-16px': string;
44
+ '-20px': string;
45
+ '-24px': string;
46
+ '-32px': string;
47
+ '0px': string;
48
+ '2px': string;
49
+ '4px': string;
50
+ '6px': string;
51
+ '8px': string;
52
+ '12px': string;
53
+ '16px': string;
54
+ '20px': string;
55
+ '24px': string;
56
+ '32px': string;
57
+ '40px': string;
58
+ '48px': string;
59
+ '64px': string;
60
+ '80px': string;
61
+ };
62
+ export type AllSpace = keyof typeof allSpaceMap;
63
+ /**
64
+ * @codegenEnd
65
+ */
@@ -16,7 +16,8 @@ export declare const configs: {
16
16
  '@atlaskit/design-system/no-empty-styled-expression': string;
17
17
  '@atlaskit/design-system/no-exported-css': string;
18
18
  '@atlaskit/design-system/no-exported-keyframes': string;
19
- '@atlaskit/design-system/no-html-button-element': string;
19
+ '@atlaskit/design-system/no-html-anchor': string;
20
+ '@atlaskit/design-system/no-html-button': string;
20
21
  '@atlaskit/design-system/no-invalid-css-map': string;
21
22
  '@atlaskit/design-system/no-keyframes-tagged-template-expression': string;
22
23
  '@atlaskit/design-system/no-margin': string;
@@ -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::5a5b0ed8cf86631274d7d30df4199e5d>>
3
+ * @codegen <<SignedSource::0be7639a95bf4c9bbfe00154d8193477>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
  declare const _default: {
@@ -19,7 +19,8 @@ declare const _default: {
19
19
  '@atlaskit/design-system/no-empty-styled-expression': string;
20
20
  '@atlaskit/design-system/no-exported-css': string;
21
21
  '@atlaskit/design-system/no-exported-keyframes': string;
22
- '@atlaskit/design-system/no-html-button-element': string;
22
+ '@atlaskit/design-system/no-html-anchor': string;
23
+ '@atlaskit/design-system/no-html-button': string;
23
24
  '@atlaskit/design-system/no-invalid-css-map': string;
24
25
  '@atlaskit/design-system/no-keyframes-tagged-template-expression': string;
25
26
  '@atlaskit/design-system/no-margin': string;
@@ -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::af55c21605e3b8ee7836cb8950a9f713>>
3
+ * @codegen <<SignedSource::73a3666b244b58cc221eebcda071161d>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
  declare const _default: {
@@ -1,5 +1,5 @@
1
1
  import type { Rule } from 'eslint';
2
- import { RuleConfig } from './types';
2
+ import { type RuleConfig } from './types';
3
3
  declare const createWithConfig: (initialConfig: RuleConfig) => Rule.RuleModule['create'];
4
4
  declare const rule: Rule.RuleModule;
5
5
  export default rule;
@@ -20,7 +20,8 @@ declare const _default: {
20
20
  'no-empty-styled-expression': import("eslint").Rule.RuleModule;
21
21
  'no-exported-css': import("eslint").Rule.RuleModule;
22
22
  'no-exported-keyframes': import("eslint").Rule.RuleModule;
23
- 'no-html-button-element': import("eslint").Rule.RuleModule;
23
+ 'no-html-anchor': import("eslint").Rule.RuleModule;
24
+ 'no-html-button': import("eslint").Rule.RuleModule;
24
25
  'no-invalid-css-map': import("eslint").Rule.RuleModule;
25
26
  'no-keyframes-tagged-template-expression': import("eslint").Rule.RuleModule;
26
27
  'no-margin': import("eslint").Rule.RuleModule;
@@ -0,0 +1,2 @@
1
+ export { StyledComponent } from './styled-component';
2
+ export { JSXElement } from './jsx-element';
@@ -0,0 +1,8 @@
1
+ import type { Rule } from 'eslint';
2
+ interface MetaData {
3
+ context: Rule.RuleContext;
4
+ }
5
+ export declare const JSXElement: {
6
+ lint(node: Rule.Node, { context }: MetaData): void;
7
+ };
8
+ export {};
@@ -0,0 +1,6 @@
1
+ import type { Rule } from 'eslint';
2
+ import { type VariableDeclarator } from 'eslint-codemod-utils';
3
+ /**
4
+ * Returns a styled component
5
+ */
6
+ export declare const getStyledComponentCall: (node: Rule.Node) => (VariableDeclarator & Rule.NodeParentExtension) | undefined;
@@ -0,0 +1,8 @@
1
+ import type { Rule } from 'eslint';
2
+ interface MetaData {
3
+ context: Rule.RuleContext;
4
+ }
5
+ export declare const StyledComponent: {
6
+ lint(node: Rule.Node, { context }: MetaData): void;
7
+ };
8
+ export {};
@@ -0,0 +1,7 @@
1
+ import { type EslintNode } from 'eslint-codemod-utils';
2
+ /**
3
+ * Determines if the given JSX element is a supported element to lint with this rule.
4
+ */
5
+ export declare function isSupportedForLint(jsxNode: EslintNode, elementName?: string): jsxNode is Extract<EslintNode, {
6
+ type: 'JSXElement';
7
+ }>;
@@ -0,0 +1,6 @@
1
+ import type { Rule, Scope } from 'eslint';
2
+ import { type JSXOpeningElement } from 'eslint-codemod-utils';
3
+ /**
4
+ * Given a component name finds its JSX usage
5
+ */
6
+ export declare const getJsxElementByName: (componentName: string, scope: Scope.Scope) => (JSXOpeningElement & Rule.NodeParentExtension) | undefined;
@@ -0,0 +1,2 @@
1
+ export { StyledComponent } from './styled-component';
2
+ export { JSXElement } from './jsx-element';
@@ -0,0 +1,8 @@
1
+ import type { Rule } from 'eslint';
2
+ interface MetaData {
3
+ context: Rule.RuleContext;
4
+ }
5
+ export declare const JSXElement: {
6
+ lint(node: Rule.Node, { context }: MetaData): void;
7
+ };
8
+ export {};
@@ -0,0 +1,6 @@
1
+ import type { Rule } from 'eslint';
2
+ import { type VariableDeclarator } from 'eslint-codemod-utils';
3
+ /**
4
+ * Returns a styled component
5
+ */
6
+ export declare const getStyledComponentCall: (node: Rule.Node) => (VariableDeclarator & Rule.NodeParentExtension) | undefined;
@@ -0,0 +1,8 @@
1
+ import type { Rule } from 'eslint';
2
+ interface MetaData {
3
+ context: Rule.RuleContext;
4
+ }
5
+ export declare const StyledComponent: {
6
+ lint(node: Rule.Node, { context }: MetaData): void;
7
+ };
8
+ export {};
@@ -0,0 +1,7 @@
1
+ import { type EslintNode } from 'eslint-codemod-utils';
2
+ /**
3
+ * Determines if the given JSX element is a supported element to lint with this rule.
4
+ */
5
+ export declare function isSupportedForLint(jsxNode: EslintNode, elementName?: string): jsxNode is Extract<EslintNode, {
6
+ type: 'JSXElement';
7
+ }>;
@@ -0,0 +1,6 @@
1
+ import type { Rule, Scope } from 'eslint';
2
+ import { type JSXOpeningElement } from 'eslint-codemod-utils';
3
+ /**
4
+ * Given a component name finds its JSX usage
5
+ */
6
+ export declare const getJsxElementByName: (componentName: string, scope: Scope.Scope) => (JSXOpeningElement & Rule.NodeParentExtension) | undefined;
@@ -1,5 +1,5 @@
1
- import type { Rule } from 'eslint';
2
- import { CallExpression, EslintNode, Expression, TaggedTemplateExpression } from 'eslint-codemod-utils';
1
+ import type { Rule, Scope } from 'eslint';
2
+ import { type CallExpression, type EslintNode, type Expression, type TaggedTemplateExpression } from 'eslint-codemod-utils';
3
3
  export declare const isDecendantOfGlobalToken: (node: EslintNode) => boolean;
4
4
  export declare const isDecendantOfType: (node: Rule.Node, type: Rule.Node['type'], skipNode?: boolean) => boolean;
5
5
  export declare const isPropertyKey: (node: Rule.Node) => boolean;
@@ -9,6 +9,6 @@ export declare const isDecendantOfPrimitive: (node: Rule.Node, context: Rule.Rul
9
9
  export declare const isCssInJsTemplateNode: (node?: Expression | null) => node is TaggedTemplateExpression;
10
10
  export declare const isCssInJsCallNode: (node?: Expression | null) => node is CallExpression;
11
11
  export declare const isCssInJsObjectNode: (node?: Expression | null) => node is CallExpression;
12
- export declare const isDecendantOfXcssBlock: (node: Rule.Node) => boolean;
12
+ export declare const isDecendantOfXcssBlock: (node: Rule.Node, referencesInScope: Scope.Reference[], importSources: string[]) => boolean;
13
13
  export declare const isDecendantOfStyleBlock: (node: Rule.Node) => boolean;
14
14
  export declare const isChildOfType: (node: Rule.Node, type: Rule.Node['type']) => boolean;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@atlaskit/eslint-plugin-design-system",
3
3
  "description": "The essential plugin for use with the Atlassian Design System.",
4
- "version": "9.7.0",
4
+ "version": "10.0.1",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
7
7
  "publishConfig": {
@@ -75,7 +75,8 @@
75
75
  },
76
76
  "scripts": {
77
77
  "ak-postbuild": "cp -r configs dist",
78
- "codegen": "ts-node -r tsconfig-paths/register ./scripts/codegen.tsx"
78
+ "codegen": "ts-node -r tsconfig-paths/register ./scripts/codegen.tsx",
79
+ "codegen-token-maps": "ts-node -r tsconfig-paths/register ./scripts/token-maps/codegen-token-maps.tsx"
79
80
  },
80
81
  "techstack": {
81
82
  "@atlassian/frontend": {
@@ -1,26 +0,0 @@
1
- # no-html-button-element
2
-
3
- HTML `<button>` elements should not be used. They can be replaced using the Button component or the Pressable primitive, which are ready made solutions made by the Atlassian Design System Team. This benefits analytics as they are fitted with tracking by default and provide safe access to design tokens for styling.
4
-
5
- ## Examples
6
-
7
- This rule marks code as violations when it can be replaced with either a Button component or a Pressable primitive.
8
-
9
- ### Incorrect
10
-
11
- ```js
12
- <button>Click me</button>
13
- ^^^^^^^^^^^^^^^^^^^^^^^^^
14
- ```
15
-
16
- ### Correct
17
-
18
- ```js
19
- <Button>Click me</Button>
20
- ^^^^^^^^^^^^^^^^^^^^^^^^^
21
- ```
22
-
23
- ```js
24
- <Pressable>Click me</Pressable>
25
- ^^^^^^^^^^^^^^^^^^^^^^^^^
26
- ```