@atlaskit/eslint-plugin-design-system 8.29.0 → 8.30.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 (73) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/README.md +1 -0
  3. package/constellation/index/usage.mdx +1 -0
  4. package/constellation/use-primitives-text/usage.mdx +21 -0
  5. package/dist/cjs/ast-nodes/jsx-element.js +33 -2
  6. package/dist/cjs/presets/all.codegen.js +2 -1
  7. package/dist/cjs/rules/index.codegen.js +3 -1
  8. package/dist/cjs/rules/no-unsupported-drag-and-drop-libraries/paths.js +3 -0
  9. package/dist/cjs/rules/use-primitives/transformers/emotion-css/index.js +1 -2
  10. package/dist/cjs/rules/use-primitives-text/config/index.js +15 -0
  11. package/dist/cjs/rules/use-primitives-text/index.js +57 -0
  12. package/dist/cjs/rules/use-primitives-text/transformers/common.js +43 -0
  13. package/dist/cjs/rules/use-primitives-text/transformers/emphasis-elements.js +82 -0
  14. package/dist/cjs/rules/use-primitives-text/transformers/index.js +33 -0
  15. package/dist/cjs/rules/use-primitives-text/transformers/paragraph-elements.js +196 -0
  16. package/dist/cjs/rules/use-primitives-text/transformers/span-elements.js +87 -0
  17. package/dist/cjs/rules/use-primitives-text/transformers/strong-elements.js +82 -0
  18. package/dist/es2019/ast-nodes/jsx-element.js +33 -2
  19. package/dist/es2019/presets/all.codegen.js +2 -1
  20. package/dist/es2019/rules/index.codegen.js +3 -1
  21. package/dist/es2019/rules/no-unsupported-drag-and-drop-libraries/paths.js +3 -0
  22. package/dist/es2019/rules/use-primitives/transformers/emotion-css/index.js +1 -2
  23. package/dist/es2019/rules/use-primitives-text/config/index.js +9 -0
  24. package/dist/es2019/rules/use-primitives-text/index.js +51 -0
  25. package/dist/es2019/rules/use-primitives-text/transformers/common.js +33 -0
  26. package/dist/es2019/rules/use-primitives-text/transformers/emphasis-elements.js +72 -0
  27. package/dist/es2019/rules/use-primitives-text/transformers/index.js +4 -0
  28. package/dist/es2019/rules/use-primitives-text/transformers/paragraph-elements.js +187 -0
  29. package/dist/es2019/rules/use-primitives-text/transformers/span-elements.js +77 -0
  30. package/dist/es2019/rules/use-primitives-text/transformers/strong-elements.js +72 -0
  31. package/dist/esm/ast-nodes/jsx-element.js +33 -2
  32. package/dist/esm/presets/all.codegen.js +2 -1
  33. package/dist/esm/rules/index.codegen.js +3 -1
  34. package/dist/esm/rules/no-unsupported-drag-and-drop-libraries/paths.js +3 -0
  35. package/dist/esm/rules/use-primitives/transformers/emotion-css/index.js +1 -2
  36. package/dist/esm/rules/use-primitives-text/config/index.js +9 -0
  37. package/dist/esm/rules/use-primitives-text/index.js +51 -0
  38. package/dist/esm/rules/use-primitives-text/transformers/common.js +33 -0
  39. package/dist/esm/rules/use-primitives-text/transformers/emphasis-elements.js +72 -0
  40. package/dist/esm/rules/use-primitives-text/transformers/index.js +4 -0
  41. package/dist/esm/rules/use-primitives-text/transformers/paragraph-elements.js +186 -0
  42. package/dist/esm/rules/use-primitives-text/transformers/span-elements.js +77 -0
  43. package/dist/esm/rules/use-primitives-text/transformers/strong-elements.js +72 -0
  44. package/dist/types/ast-nodes/jsx-element.d.ts +5 -2
  45. package/dist/types/index.codegen.d.ts +1 -0
  46. package/dist/types/presets/all.codegen.d.ts +2 -1
  47. package/dist/types/rules/index.codegen.d.ts +1 -0
  48. package/dist/types/rules/use-primitives-text/config/index.d.ts +6 -0
  49. package/dist/types/rules/use-primitives-text/index.d.ts +3 -0
  50. package/dist/types/rules/use-primitives-text/transformers/common.d.ts +5 -0
  51. package/dist/types/rules/use-primitives-text/transformers/emphasis-elements.d.ts +16 -0
  52. package/dist/types/rules/use-primitives-text/transformers/index.d.ts +4 -0
  53. package/dist/types/rules/use-primitives-text/transformers/paragraph-elements.d.ts +32 -0
  54. package/dist/types/rules/use-primitives-text/transformers/span-elements.d.ts +16 -0
  55. package/dist/types/rules/use-primitives-text/transformers/strong-elements.d.ts +16 -0
  56. package/dist/types-ts4.5/ast-nodes/jsx-element.d.ts +5 -2
  57. package/dist/types-ts4.5/index.codegen.d.ts +1 -0
  58. package/dist/types-ts4.5/presets/all.codegen.d.ts +2 -1
  59. package/dist/types-ts4.5/rules/index.codegen.d.ts +1 -0
  60. package/dist/types-ts4.5/rules/use-primitives-text/config/index.d.ts +6 -0
  61. package/dist/types-ts4.5/rules/use-primitives-text/index.d.ts +3 -0
  62. package/dist/types-ts4.5/rules/use-primitives-text/transformers/common.d.ts +5 -0
  63. package/dist/types-ts4.5/rules/use-primitives-text/transformers/emphasis-elements.d.ts +16 -0
  64. package/dist/types-ts4.5/rules/use-primitives-text/transformers/index.d.ts +4 -0
  65. package/dist/types-ts4.5/rules/use-primitives-text/transformers/paragraph-elements.d.ts +32 -0
  66. package/dist/types-ts4.5/rules/use-primitives-text/transformers/span-elements.d.ts +16 -0
  67. package/dist/types-ts4.5/rules/use-primitives-text/transformers/strong-elements.d.ts +16 -0
  68. package/package.json +1 -1
  69. package/dist/cjs/rules/use-primitives/transformers/emotion-css/contains-only-supported-attrs.js +0 -27
  70. package/dist/es2019/rules/use-primitives/transformers/emotion-css/contains-only-supported-attrs.js +0 -19
  71. package/dist/esm/rules/use-primitives/transformers/emotion-css/contains-only-supported-attrs.js +0 -19
  72. package/dist/types/rules/use-primitives/transformers/emotion-css/contains-only-supported-attrs.d.ts +0 -7
  73. package/dist/types-ts4.5/rules/use-primitives/transformers/emotion-css/contains-only-supported-attrs.d.ts +0 -7
@@ -0,0 +1,87 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.SpanElements = void 0;
9
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
10
+ var _eslintCodemodUtils = require("eslint-codemod-utils");
11
+ var ast = _interopRequireWildcard(require("../../../ast-nodes"));
12
+ var _upsertImportDeclaration = require("../../use-primitives/transformers/emotion-css/upsert-import-declaration");
13
+ var _common = require("./common");
14
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
16
+ /* eslint-disable @repo/internal/react/require-jsdoc */
17
+
18
+ var SpanElements = exports.SpanElements = {
19
+ lint: function lint(node, _ref) {
20
+ var context = _ref.context,
21
+ config = _ref.config;
22
+ if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
23
+ return;
24
+ }
25
+
26
+ // Check whether all criteria needed to make a transformation are met
27
+ if (!SpanElements._check(node, {
28
+ context: context,
29
+ config: config
30
+ })) {
31
+ return;
32
+ }
33
+ context.report({
34
+ node: node.openingElement,
35
+ messageId: 'preferPrimitivesText',
36
+ suggest: [{
37
+ desc: "Convert to Text",
38
+ fix: SpanElements._fix(node, {
39
+ context: context
40
+ })
41
+ }]
42
+ });
43
+ },
44
+ _check: function _check(node, _ref2) {
45
+ var context = _ref2.context,
46
+ config = _ref2.config;
47
+ if (!config.patterns.includes('span-elements')) {
48
+ return false;
49
+ }
50
+ var elementName = ast.JSXElement.getName(node);
51
+ if (elementName !== 'span') {
52
+ return false;
53
+ }
54
+
55
+ // Element has no unallowed props
56
+ if (!ast.JSXElement.hasAllowedAttrsOnly(node, _common.allowedAttrs)) {
57
+ return false;
58
+ }
59
+
60
+ // Only allow elements with strings as children
61
+ if (!(0, _common.hasTextChildrenOnly)(node)) {
62
+ return false;
63
+ }
64
+ var importDeclaration = ast.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/primitives');
65
+
66
+ // If there is more than one `@atlaskit/primitives` import, then it becomes difficult to determine which import to transform
67
+ if (importDeclaration.length > 1) {
68
+ return false;
69
+ }
70
+ return true;
71
+ },
72
+ _fix: function _fix(node, _ref3) {
73
+ var context = _ref3.context;
74
+ return function (fixer) {
75
+ var importFix = (0, _upsertImportDeclaration.upsertImportDeclaration)({
76
+ module: '@atlaskit/primitives',
77
+ specifiers: ['Text']
78
+ }, context, fixer);
79
+ var elementNameFixes = ast.JSXElement.updateName(node, 'Text', fixer);
80
+ var variantAttributeFix = ast.JSXElement.addAttribute(node, 'variant', 'ui', fixer);
81
+ var testAttributeFix = (0, _common.updateTestIdAttributeFix)(node, fixer);
82
+ return [importFix].concat((0, _toConsumableArray2.default)(elementNameFixes), [variantAttributeFix, testAttributeFix]).filter(function (fix) {
83
+ return Boolean(fix);
84
+ }); // Some of the transformers can return arrays with undefined, so filter them out
85
+ };
86
+ }
87
+ };
@@ -0,0 +1,82 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.StrongElements = void 0;
9
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
10
+ var _eslintCodemodUtils = require("eslint-codemod-utils");
11
+ var ast = _interopRequireWildcard(require("../../../ast-nodes"));
12
+ var _upsertImportDeclaration = require("../../use-primitives/transformers/emotion-css/upsert-import-declaration");
13
+ var _common = require("./common");
14
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
16
+ /* eslint-disable @repo/internal/react/require-jsdoc */
17
+
18
+ var StrongElements = exports.StrongElements = {
19
+ lint: function lint(node, _ref) {
20
+ var context = _ref.context,
21
+ config = _ref.config;
22
+ if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
23
+ return;
24
+ }
25
+
26
+ // Check whether all criteria needed to make a transformation are met
27
+ if (!StrongElements._check(node, {
28
+ context: context,
29
+ config: config
30
+ })) {
31
+ return;
32
+ }
33
+ context.report({
34
+ node: node.openingElement,
35
+ messageId: 'preferPrimitivesText',
36
+ suggest: [{
37
+ desc: "Convert to Text",
38
+ fix: StrongElements._fix(node, {
39
+ context: context
40
+ })
41
+ }]
42
+ });
43
+ },
44
+ _check: function _check(node, _ref2) {
45
+ var context = _ref2.context,
46
+ config = _ref2.config;
47
+ if (!config.patterns.includes('strong-elements')) {
48
+ return false;
49
+ }
50
+ var elementName = ast.JSXElement.getName(node);
51
+ if (elementName !== 'strong') {
52
+ return false;
53
+ }
54
+
55
+ // Element has no unallowed props
56
+ if (!ast.JSXElement.hasAllowedAttrsOnly(node, _common.allowedAttrs)) {
57
+ return false;
58
+ }
59
+
60
+ // If there is more than one `@atlaskit/primitives` import, then it becomes difficult to determine which import to transform
61
+ var importDeclaration = ast.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/primitives');
62
+ if (importDeclaration.length > 1) {
63
+ return false;
64
+ }
65
+ return true;
66
+ },
67
+ _fix: function _fix(node, _ref3) {
68
+ var context = _ref3.context;
69
+ return function (fixer) {
70
+ var importFix = (0, _upsertImportDeclaration.upsertImportDeclaration)({
71
+ module: '@atlaskit/primitives',
72
+ specifiers: ['Text']
73
+ }, context, fixer);
74
+ var elementNameFixes = ast.JSXElement.updateName(node, 'Text', fixer);
75
+ var asAttributeFix = ast.JSXElement.addAttribute(node, 'as', 'strong', fixer);
76
+ var testAttributeFix = (0, _common.updateTestIdAttributeFix)(node, fixer);
77
+ return [importFix].concat((0, _toConsumableArray2.default)(elementNameFixes), [asAttributeFix, testAttributeFix]).filter(function (fix) {
78
+ return Boolean(fix);
79
+ }); // Some of the transformers can return arrays with undefined, so filter them out
80
+ };
81
+ }
82
+ };
@@ -1,4 +1,5 @@
1
1
  import { isNodeOfType, jsxIdentifier } from 'eslint-codemod-utils';
2
+ import { JSXAttribute as HelperJSXAttribute } from './jsx-attribute';
2
3
  export const JSXElementHelper = {
3
4
  /**
4
5
  * Names of JSXElements can be any of:
@@ -6,8 +7,8 @@ export const JSXElementHelper = {
6
7
  * `<MyComponents.Component></MyComponents.Component>` - `MyComponents` is a namespace (JSXNamespacedName)
7
8
  * `<MyComponents.Component></MyComponents.Component>` - `MyComponents` is an object (JSXMemberExpression)
8
9
  *
9
- * Getting the name of a JSXMemberExpression is difficult, because object can contain objects, which is recursively defined in the AST.
10
- * e.g. getting the name of `<MyComponents.PresentationLayer.LeftSideBar.Header />` would require `getName` to recursively resolve all parts of the name.
10
+ * getting the name of a JSXMemberExpression is difficult, because object can contain objects, which is recursively defined in the AST.
11
+ * e.g. Getting the name of `<MyComponents.PresentationLayer.LeftSideBar.Header />` would require `getName` to recursively resolve all parts of the name.
11
12
  * `getName` does not currently have this functionality. Add it if you need it.
12
13
  */
13
14
  getName(node) {
@@ -45,6 +46,36 @@ export const JSXElementHelper = {
45
46
  return node.openingElement.attributes.some(attr => {
46
47
  return isNodeOfType(attr, 'JSXSpreadAttribute');
47
48
  });
49
+ },
50
+ addAttribute(node, name, value, fixer) {
51
+ const attributeString = ` ${name}='${value}'`;
52
+ const isSelfClosing = JSXElementHelper.isSelfClosing(node);
53
+ const start = node.openingElement.range ? node.openingElement.range[0] : 0;
54
+ const end = node.openingElement.range ? node.openingElement.range[1] - (isSelfClosing ? 3 : 1) : 0;
55
+ const range = [start, end];
56
+ const fix = fixer.insertTextAfterRange(range, attributeString);
57
+ return fix;
58
+ },
59
+ getChildren(node) {
60
+ // Filter out text children with whitespace characters only as JSX removes whitespace used for intendation
61
+ const filteredChildren = node.children.filter(child => {
62
+ if (isNodeOfType(child, 'JSXText')) {
63
+ const whiteSpaceChars = new RegExp('\\s', 'g');
64
+ return !whiteSpaceChars.test(child.value);
65
+ }
66
+ return true;
67
+ });
68
+ return filteredChildren;
69
+ },
70
+ hasAllowedAttrsOnly(node, allowedProps) {
71
+ const attrs = JSXElementHelper.getAttributes(node);
72
+ return attrs.every(attr => {
73
+ if (!isNodeOfType(attr, 'JSXAttribute')) {
74
+ return false;
75
+ }
76
+ const name = HelperJSXAttribute.getName(attr);
77
+ return allowedProps.includes(name);
78
+ });
48
79
  }
49
80
  };
50
81
  export { JSXElementHelper as JSXElement };
@@ -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::5647ce9c10ba880cffece66b5924fd6e>>
3
+ * @codegen <<SignedSource::98174f9eecc3be9d3a54506bcf2994ef>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
  export default {
@@ -34,6 +34,7 @@ export default {
34
34
  '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
35
35
  '@atlaskit/design-system/use-href-in-link-item': 'warn',
36
36
  '@atlaskit/design-system/use-primitives': 'warn',
37
+ '@atlaskit/design-system/use-primitives-text': 'warn',
37
38
  '@atlaskit/design-system/use-visually-hidden': 'error'
38
39
  }
39
40
  };
@@ -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::0a2813f0b87e94d23e1f6fc388539c70>>
3
+ * @codegen <<SignedSource::2687f4b835e076cef09f1fbbfdfc1b06>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
  import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -31,6 +31,7 @@ import useDrawerLabel from './use-drawer-label';
31
31
  import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-card';
32
32
  import useHrefInLinkItem from './use-href-in-link-item';
33
33
  import usePrimitives from './use-primitives';
34
+ import usePrimitivesText from './use-primitives-text';
34
35
  import useVisuallyHidden from './use-visually-hidden';
35
36
  export default {
36
37
  'consistent-css-prop-usage': consistentCssPropUsage,
@@ -61,5 +62,6 @@ export default {
61
62
  'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
62
63
  'use-href-in-link-item': useHrefInLinkItem,
63
64
  'use-primitives': usePrimitives,
65
+ 'use-primitives-text': usePrimitivesText,
64
66
  'use-visually-hidden': useVisuallyHidden
65
67
  };
@@ -22,4 +22,7 @@ export const restrictedPaths = [{
22
22
  }, {
23
23
  path: '@dnd-kit',
24
24
  message: ''
25
+ }, {
26
+ path: '@formkit/drag-and-drop',
27
+ message: ''
25
28
  }];
@@ -4,7 +4,6 @@ import { getIdentifierInParentScope, isNodeOfType } from 'eslint-codemod-utils';
4
4
  import * as ast from '../../../../ast-nodes';
5
5
  import { getVariableDefinitionValue, getVariableUsagesCount, isValidCssPropertiesToTransform } from '../../utils';
6
6
  import { cssToXcssTransformer } from '../css-to-xcss';
7
- import { containsOnlySupportedAttrs } from './contains-only-supported-attrs';
8
7
  import * as supported from './supported';
9
8
  import { upsertImportDeclaration } from './upsert-import-declaration';
10
9
  export const EmotionCSS = {
@@ -56,7 +55,7 @@ export const EmotionCSS = {
56
55
  }
57
56
 
58
57
  // Ignore elements that contain dangerous attributes like `id`.
59
- if (!containsOnlySupportedAttrs(node)) {
58
+ if (!ast.JSXElement.hasAllowedAttrsOnly(node, supported.attributes)) {
60
59
  return false;
61
60
  }
62
61
 
@@ -0,0 +1,9 @@
1
+ const defaults = {
2
+ patterns: ['paragraph-elements', 'span-elements', 'strong-elements', 'emphasis-elements']
3
+ };
4
+ export const getConfig = overrides => {
5
+ // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
6
+ // start with an empty object, then merge in the defaults, then merge in overrides.
7
+ // The empty object is returned, as well as modified in place
8
+ return Object.assign({}, defaults, overrides);
9
+ };
@@ -0,0 +1,51 @@
1
+ import { createLintRule } from '../utils/create-rule';
2
+ import { getConfig } from './config';
3
+ import { EmphasisElements, ParagraphElements, SpanElements, StrongElements } from './transformers';
4
+ const textDocsUrl = 'https://atlassian.design/components/primitives/text';
5
+ const rule = createLintRule({
6
+ meta: {
7
+ name: 'use-primitives-text',
8
+ type: 'suggestion',
9
+ fixable: 'code',
10
+ hasSuggestions: true,
11
+ docs: {
12
+ description: 'Encourage the usage of text components.',
13
+ recommended: false,
14
+ severity: 'warn'
15
+ },
16
+ messages: {
17
+ preferPrimitivesText: `This element can be replaced with a "Text" primitive. See ${textDocsUrl} for additional guidance.`,
18
+ preferPrimitivesStackedText: `These paragraphs can be replaced with a "Text" and "Stack" primitives. See ${textDocsUrl} for additional guidance.`
19
+ }
20
+ },
21
+ create(context) {
22
+ const config = getConfig(context.options[0]);
23
+ return {
24
+ 'JSXElement[openingElement.name.name=span]': node => {
25
+ return SpanElements.lint(node, {
26
+ context,
27
+ config
28
+ });
29
+ },
30
+ 'JSXElement[openingElement.name.name=p]': node => {
31
+ return ParagraphElements.lint(node, {
32
+ context,
33
+ config
34
+ });
35
+ },
36
+ 'JSXElement[openingElement.name.name=strong]': node => {
37
+ return StrongElements.lint(node, {
38
+ context,
39
+ config
40
+ });
41
+ },
42
+ 'JSXElement[openingElement.name.name=em]': node => {
43
+ return EmphasisElements.lint(node, {
44
+ context,
45
+ config
46
+ });
47
+ }
48
+ };
49
+ }
50
+ });
51
+ export default rule;
@@ -0,0 +1,33 @@
1
+ import { isNodeOfType } from 'eslint-codemod-utils';
2
+ import * as ast from '../../../ast-nodes';
3
+
4
+ // Rename data-testid prop to testId if present
5
+ export function updateTestIdAttributeFix(node, fixer) {
6
+ const testIdAttr = ast.JSXElement.getAttributeByName(node, 'data-testid');
7
+ if (testIdAttr) {
8
+ return ast.JSXAttribute.updateName(testIdAttr, 'testId', fixer);
9
+ }
10
+ }
11
+ export const allowedAttrs = ['id', 'data-testid', 'key'];
12
+
13
+ // Only allow elements with strings as children
14
+ // The use of `FormattedMessage` component and `formatMessage` are allowed as these are used for i18n
15
+ export function hasTextChildrenOnly(node) {
16
+ var _node$children;
17
+ return (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.every(child => {
18
+ if (isNodeOfType(child, 'JSXText')) {
19
+ return true;
20
+ }
21
+
22
+ // JSX child element <span><FormattedMessage /></span>
23
+ if (isNodeOfType(child, 'JSXElement') && ast.JSXElement.getName(child) === 'FormattedMessage') {
24
+ return true;
25
+ }
26
+
27
+ // JSX expression <span>{formatMessage(...)}</span>
28
+ if (isNodeOfType(child, 'JSXExpressionContainer') && isNodeOfType(child.expression, 'CallExpression')) {
29
+ return ast.FunctionCall.getName(child.expression) === 'formatMessage';
30
+ }
31
+ return false;
32
+ });
33
+ }
@@ -0,0 +1,72 @@
1
+ /* eslint-disable @repo/internal/react/require-jsdoc */
2
+
3
+ import { isNodeOfType } from 'eslint-codemod-utils';
4
+ import * as ast from '../../../ast-nodes';
5
+ import { upsertImportDeclaration } from '../../use-primitives/transformers/emotion-css/upsert-import-declaration';
6
+ import { allowedAttrs, updateTestIdAttributeFix } from './common';
7
+ export const EmphasisElements = {
8
+ lint(node, {
9
+ context,
10
+ config
11
+ }) {
12
+ if (!isNodeOfType(node, 'JSXElement')) {
13
+ return;
14
+ }
15
+
16
+ // Check whether all criteria needed to make a transformation are met
17
+ if (!EmphasisElements._check(node, {
18
+ context,
19
+ config
20
+ })) {
21
+ return;
22
+ }
23
+ context.report({
24
+ node: node.openingElement,
25
+ messageId: 'preferPrimitivesText',
26
+ suggest: [{
27
+ desc: `Convert to Text`,
28
+ fix: EmphasisElements._fix(node, {
29
+ context
30
+ })
31
+ }]
32
+ });
33
+ },
34
+ _check(node, {
35
+ context,
36
+ config
37
+ }) {
38
+ if (!config.patterns.includes('emphasis-elements')) {
39
+ return false;
40
+ }
41
+ const elementName = ast.JSXElement.getName(node);
42
+ if (elementName !== 'em') {
43
+ return false;
44
+ }
45
+
46
+ // Element has no unallowed props
47
+ if (!ast.JSXElement.hasAllowedAttrsOnly(node, allowedAttrs)) {
48
+ return false;
49
+ }
50
+
51
+ // If there is more than one `@atlaskit/primitives` import, then it becomes difficult to determine which import to transform
52
+ const importDeclaration = ast.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/primitives');
53
+ if (importDeclaration.length > 1) {
54
+ return false;
55
+ }
56
+ return true;
57
+ },
58
+ _fix(node, {
59
+ context
60
+ }) {
61
+ return fixer => {
62
+ const importFix = upsertImportDeclaration({
63
+ module: '@atlaskit/primitives',
64
+ specifiers: ['Text']
65
+ }, context, fixer);
66
+ const elementNameFixes = ast.JSXElement.updateName(node, 'Text', fixer);
67
+ const asAttributeFix = ast.JSXElement.addAttribute(node, 'as', 'em', fixer);
68
+ const testAttributeFix = updateTestIdAttributeFix(node, fixer);
69
+ return [importFix, ...elementNameFixes, asAttributeFix, testAttributeFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
70
+ };
71
+ }
72
+ };
@@ -0,0 +1,4 @@
1
+ export { EmphasisElements } from './emphasis-elements';
2
+ export { SpanElements } from './span-elements';
3
+ export { StrongElements } from './strong-elements';
4
+ export { ParagraphElements } from './paragraph-elements';
@@ -0,0 +1,187 @@
1
+ /* eslint-disable @repo/internal/react/require-jsdoc */
2
+
3
+ import { isNodeOfType } from 'eslint-codemod-utils';
4
+ import * as ast from '../../../ast-nodes';
5
+ import { upsertImportDeclaration } from '../../use-primitives/transformers/emotion-css/upsert-import-declaration';
6
+ import { allowedAttrs, updateTestIdAttributeFix } from './common';
7
+ export const ParagraphElements = {
8
+ lint(node, {
9
+ context,
10
+ config
11
+ }) {
12
+ if (!isNodeOfType(node, 'JSXElement')) {
13
+ return;
14
+ }
15
+
16
+ // Check whether all criteria needed to make a transformation are met
17
+ const {
18
+ success,
19
+ refs
20
+ } = ParagraphElements._check(node, {
21
+ context,
22
+ config
23
+ });
24
+ if (!success) {
25
+ return;
26
+ }
27
+ if (refs.siblings.length > 1) {
28
+ var _refs$siblings$0$loc, _refs$siblings$loc;
29
+ /**
30
+ * Highlighting from first opening element to last closing element
31
+ * to indicate fix will change all p elements and wrap them in a Stack,
32
+ * falls back to first opening element.
33
+ */
34
+ const startLoc = (_refs$siblings$0$loc = refs.siblings[0].loc) === null || _refs$siblings$0$loc === void 0 ? void 0 : _refs$siblings$0$loc.start;
35
+ const endLoc = (_refs$siblings$loc = refs.siblings[refs.siblings.length - 1].loc) === null || _refs$siblings$loc === void 0 ? void 0 : _refs$siblings$loc.end;
36
+ context.report({
37
+ loc: startLoc && endLoc && {
38
+ start: startLoc,
39
+ end: endLoc
40
+ },
41
+ node: node.openingElement,
42
+ messageId: 'preferPrimitivesStackedText',
43
+ suggest: [{
44
+ desc: 'Convert to Text and Stack',
45
+ fix: ParagraphElements._fixMultiple(node, {
46
+ context,
47
+ refs
48
+ })
49
+ }]
50
+ });
51
+ } else {
52
+ context.report({
53
+ node,
54
+ messageId: 'preferPrimitivesText',
55
+ suggest: [{
56
+ desc: 'Convert to Text',
57
+ fix: ParagraphElements._fixSingle(node, {
58
+ context
59
+ })
60
+ }]
61
+ });
62
+ }
63
+ },
64
+ _check(node, {
65
+ context,
66
+ config
67
+ }) {
68
+ if (!config.patterns.includes('paragraph-elements')) {
69
+ return {
70
+ success: false,
71
+ refs: {
72
+ siblings: []
73
+ }
74
+ };
75
+ }
76
+ const elementName = ast.JSXElement.getName(node);
77
+ if (elementName !== 'p') {
78
+ return {
79
+ success: false,
80
+ refs: {
81
+ siblings: []
82
+ }
83
+ };
84
+ }
85
+
86
+ // All siblings have to be paragraph elements with no unallowed props
87
+ if (!isNodeOfType(node.parent, 'JSXElement')) {
88
+ return {
89
+ success: false,
90
+ refs: {
91
+ siblings: []
92
+ }
93
+ };
94
+ }
95
+ const siblings = ast.JSXElement.getChildren(node.parent);
96
+ if (siblings.length > 1) {
97
+ var _siblings$0$range, _node$range, _siblings$0$range2, _node$range2;
98
+ // Only report for the first p element by comparing node location
99
+ if (((_siblings$0$range = siblings[0].range) === null || _siblings$0$range === void 0 ? void 0 : _siblings$0$range[0]) !== ((_node$range = node.range) === null || _node$range === void 0 ? void 0 : _node$range[0]) || ((_siblings$0$range2 = siblings[0].range) === null || _siblings$0$range2 === void 0 ? void 0 : _siblings$0$range2[1]) !== ((_node$range2 = node.range) === null || _node$range2 === void 0 ? void 0 : _node$range2[1])) {
100
+ return {
101
+ success: false,
102
+ refs: {
103
+ siblings
104
+ }
105
+ };
106
+ }
107
+ // Only report when every sibling is a p element
108
+ const siblingsMatch = siblings.every(child => {
109
+ if (!isNodeOfType(child, 'JSXElement')) {
110
+ return false;
111
+ }
112
+ if (ast.JSXElement.getName(child) !== 'p') {
113
+ return false;
114
+ }
115
+ return ast.JSXElement.hasAllowedAttrsOnly(child, allowedAttrs);
116
+ });
117
+ if (!siblingsMatch) {
118
+ return {
119
+ success: false,
120
+ refs: {
121
+ siblings
122
+ }
123
+ };
124
+ }
125
+ }
126
+ const importDeclaration = ast.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/primitives');
127
+
128
+ // If there is more than one `@atlaskit/primitives` import, then it becomes difficult to determine which import to transform
129
+ if (importDeclaration.length > 1) {
130
+ return {
131
+ success: false,
132
+ refs: {
133
+ siblings
134
+ }
135
+ };
136
+ }
137
+ return {
138
+ success: true,
139
+ refs: {
140
+ siblings
141
+ }
142
+ };
143
+ },
144
+ _fixSingle(node, {
145
+ context
146
+ }) {
147
+ return fixer => {
148
+ const importFix = upsertImportDeclaration({
149
+ module: '@atlaskit/primitives',
150
+ specifiers: ['Text']
151
+ }, context, fixer);
152
+ const elementNameFixes = ast.JSXElement.updateName(node, 'Text', fixer);
153
+ const testAttributeFix = updateTestIdAttributeFix(node, fixer);
154
+ return [importFix, ...elementNameFixes, testAttributeFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
155
+ };
156
+ },
157
+
158
+ _fixMultiple(node, {
159
+ context,
160
+ refs
161
+ }) {
162
+ return fixer => {
163
+ if (!isNodeOfType(node.parent, 'JSXElement') || !node.parent.closingElement) {
164
+ return [];
165
+ }
166
+ const importFix = upsertImportDeclaration({
167
+ module: '@atlaskit/primitives',
168
+ specifiers: ['Text', 'Stack']
169
+ }, context, fixer);
170
+
171
+ // Update all siblings elements and their attributes
172
+ const siblingFixes = refs.siblings.map(sibling => {
173
+ if (isNodeOfType(sibling, 'JSXElement')) {
174
+ const elementNameFixes = ast.JSXElement.updateName(sibling, 'Text', fixer);
175
+ const testAttributeFix = updateTestIdAttributeFix(sibling, fixer);
176
+ return [...elementNameFixes, testAttributeFix];
177
+ }
178
+ return undefined;
179
+ }).flat();
180
+
181
+ // Wrap in <Stack /> when more than 1 sibling
182
+ const wrapperOpenElementFix = fixer.insertTextAfter(node.parent.openingElement, `<Stack space='space.150'>`);
183
+ const wrapperCloseElementFix = fixer.insertTextBefore(node.parent.closingElement, '</Stack>');
184
+ return [importFix, ...siblingFixes, wrapperOpenElementFix, wrapperCloseElementFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
185
+ };
186
+ }
187
+ };