@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.
- package/CHANGELOG.md +13 -0
- package/README.md +1 -0
- package/constellation/index/usage.mdx +1 -0
- package/constellation/use-primitives-text/usage.mdx +21 -0
- package/dist/cjs/ast-nodes/jsx-element.js +33 -2
- package/dist/cjs/presets/all.codegen.js +2 -1
- package/dist/cjs/rules/index.codegen.js +3 -1
- package/dist/cjs/rules/no-unsupported-drag-and-drop-libraries/paths.js +3 -0
- package/dist/cjs/rules/use-primitives/transformers/emotion-css/index.js +1 -2
- package/dist/cjs/rules/use-primitives-text/config/index.js +15 -0
- package/dist/cjs/rules/use-primitives-text/index.js +57 -0
- package/dist/cjs/rules/use-primitives-text/transformers/common.js +43 -0
- package/dist/cjs/rules/use-primitives-text/transformers/emphasis-elements.js +82 -0
- package/dist/cjs/rules/use-primitives-text/transformers/index.js +33 -0
- package/dist/cjs/rules/use-primitives-text/transformers/paragraph-elements.js +196 -0
- package/dist/cjs/rules/use-primitives-text/transformers/span-elements.js +87 -0
- package/dist/cjs/rules/use-primitives-text/transformers/strong-elements.js +82 -0
- package/dist/es2019/ast-nodes/jsx-element.js +33 -2
- package/dist/es2019/presets/all.codegen.js +2 -1
- package/dist/es2019/rules/index.codegen.js +3 -1
- package/dist/es2019/rules/no-unsupported-drag-and-drop-libraries/paths.js +3 -0
- package/dist/es2019/rules/use-primitives/transformers/emotion-css/index.js +1 -2
- package/dist/es2019/rules/use-primitives-text/config/index.js +9 -0
- package/dist/es2019/rules/use-primitives-text/index.js +51 -0
- package/dist/es2019/rules/use-primitives-text/transformers/common.js +33 -0
- package/dist/es2019/rules/use-primitives-text/transformers/emphasis-elements.js +72 -0
- package/dist/es2019/rules/use-primitives-text/transformers/index.js +4 -0
- package/dist/es2019/rules/use-primitives-text/transformers/paragraph-elements.js +187 -0
- package/dist/es2019/rules/use-primitives-text/transformers/span-elements.js +77 -0
- package/dist/es2019/rules/use-primitives-text/transformers/strong-elements.js +72 -0
- package/dist/esm/ast-nodes/jsx-element.js +33 -2
- package/dist/esm/presets/all.codegen.js +2 -1
- package/dist/esm/rules/index.codegen.js +3 -1
- package/dist/esm/rules/no-unsupported-drag-and-drop-libraries/paths.js +3 -0
- package/dist/esm/rules/use-primitives/transformers/emotion-css/index.js +1 -2
- package/dist/esm/rules/use-primitives-text/config/index.js +9 -0
- package/dist/esm/rules/use-primitives-text/index.js +51 -0
- package/dist/esm/rules/use-primitives-text/transformers/common.js +33 -0
- package/dist/esm/rules/use-primitives-text/transformers/emphasis-elements.js +72 -0
- package/dist/esm/rules/use-primitives-text/transformers/index.js +4 -0
- package/dist/esm/rules/use-primitives-text/transformers/paragraph-elements.js +186 -0
- package/dist/esm/rules/use-primitives-text/transformers/span-elements.js +77 -0
- package/dist/esm/rules/use-primitives-text/transformers/strong-elements.js +72 -0
- package/dist/types/ast-nodes/jsx-element.d.ts +5 -2
- package/dist/types/index.codegen.d.ts +1 -0
- package/dist/types/presets/all.codegen.d.ts +2 -1
- package/dist/types/rules/index.codegen.d.ts +1 -0
- package/dist/types/rules/use-primitives-text/config/index.d.ts +6 -0
- package/dist/types/rules/use-primitives-text/index.d.ts +3 -0
- package/dist/types/rules/use-primitives-text/transformers/common.d.ts +5 -0
- package/dist/types/rules/use-primitives-text/transformers/emphasis-elements.d.ts +16 -0
- package/dist/types/rules/use-primitives-text/transformers/index.d.ts +4 -0
- package/dist/types/rules/use-primitives-text/transformers/paragraph-elements.d.ts +32 -0
- package/dist/types/rules/use-primitives-text/transformers/span-elements.d.ts +16 -0
- package/dist/types/rules/use-primitives-text/transformers/strong-elements.d.ts +16 -0
- package/dist/types-ts4.5/ast-nodes/jsx-element.d.ts +5 -2
- package/dist/types-ts4.5/index.codegen.d.ts +1 -0
- package/dist/types-ts4.5/presets/all.codegen.d.ts +2 -1
- package/dist/types-ts4.5/rules/index.codegen.d.ts +1 -0
- package/dist/types-ts4.5/rules/use-primitives-text/config/index.d.ts +6 -0
- package/dist/types-ts4.5/rules/use-primitives-text/index.d.ts +3 -0
- package/dist/types-ts4.5/rules/use-primitives-text/transformers/common.d.ts +5 -0
- package/dist/types-ts4.5/rules/use-primitives-text/transformers/emphasis-elements.d.ts +16 -0
- package/dist/types-ts4.5/rules/use-primitives-text/transformers/index.d.ts +4 -0
- package/dist/types-ts4.5/rules/use-primitives-text/transformers/paragraph-elements.d.ts +32 -0
- package/dist/types-ts4.5/rules/use-primitives-text/transformers/span-elements.d.ts +16 -0
- package/dist/types-ts4.5/rules/use-primitives-text/transformers/strong-elements.d.ts +16 -0
- package/package.json +1 -1
- package/dist/cjs/rules/use-primitives/transformers/emotion-css/contains-only-supported-attrs.js +0 -27
- package/dist/es2019/rules/use-primitives/transformers/emotion-css/contains-only-supported-attrs.js +0 -19
- package/dist/esm/rules/use-primitives/transformers/emotion-css/contains-only-supported-attrs.js +0 -19
- package/dist/types/rules/use-primitives/transformers/emotion-css/contains-only-supported-attrs.d.ts +0 -7
- package/dist/types-ts4.5/rules/use-primitives/transformers/emotion-css/contains-only-supported-attrs.d.ts +0 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/eslint-plugin-design-system
|
|
2
2
|
|
|
3
|
+
## 8.30.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#75603](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75603) [`51cf4796aa02`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/51cf4796aa02) - Use primitives text component rule
|
|
8
|
+
|
|
9
|
+
## 8.29.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#70616](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70616) [`e80736fccc77`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e80736fccc77) - Moving "no-unsupported-drag-and-drop-libraries" check to pdnd 1.0 API
|
|
14
|
+
- [#75662](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75662) [`70585b558ebd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/70585b558ebd) - Adding "@formkit/drag-and-drop" to exclusion list for drag and drop library usage
|
|
15
|
+
|
|
3
16
|
## 8.29.0
|
|
4
17
|
|
|
5
18
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -77,6 +77,7 @@ module.exports = {
|
|
|
77
77
|
| <a href="./src/rules/use-heading-level-in-spotlight-card/README.md">use-heading-level-in-spotlight-card</a> | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context. | Yes | Yes | |
|
|
78
78
|
| <a href="./src/rules/use-href-in-link-item/README.md">use-href-in-link-item</a> | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes | Yes | Yes |
|
|
79
79
|
| <a href="./src/rules/use-primitives/README.md">use-primitives</a> | Encourage the usage of primitives components. | | Yes | Yes |
|
|
80
|
+
| <a href="./src/rules/use-primitives-text/README.md">use-primitives-text</a> | Encourage the usage of text components. | | Yes | Yes |
|
|
80
81
|
| <a href="./src/rules/use-visually-hidden/README.md">use-visually-hidden</a> | Enforce usage of the visually hidden component. | Yes | Yes | |
|
|
81
82
|
|
|
82
83
|
<!-- END_RULE_TABLE_CODEGEN -->
|
|
@@ -39,6 +39,7 @@ This plugin contains rules that should be used when working with the [Atlassian
|
|
|
39
39
|
| <a href="use-heading-level-in-spotlight-card/usage">use-heading-level-in-spotlight-card</a> | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context. | Yes | Yes | |
|
|
40
40
|
| <a href="use-href-in-link-item/usage">use-href-in-link-item</a> | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes | Yes | Yes |
|
|
41
41
|
| <a href="use-primitives/usage">use-primitives</a> | Encourage the usage of primitives components. | | Yes | Yes |
|
|
42
|
+
| <a href="use-primitives-text/usage">use-primitives-text</a> | Encourage the usage of text components. | | Yes | Yes |
|
|
42
43
|
| <a href="use-visually-hidden/usage">use-visually-hidden</a> | Enforce usage of the visually hidden component. | Yes | Yes | |
|
|
43
44
|
|
|
44
45
|
<!-- END_RULE_TABLE_CODEGEN -->
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# use-primitives-text
|
|
2
|
+
|
|
3
|
+
Using primitives allows you to delete bespoke component code and replace it with ready made solutions made by the Atlassian Design System Team.
|
|
4
|
+
|
|
5
|
+
## Examples
|
|
6
|
+
|
|
7
|
+
This rule marks code as violations when it can be replaced 1:1 with one or multiple primitive components.
|
|
8
|
+
|
|
9
|
+
### Incorrect
|
|
10
|
+
|
|
11
|
+
```jsx
|
|
12
|
+
<span>^^^^^^^^^^^^^^^^^^^^^^ // ...</span>
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Correct
|
|
16
|
+
|
|
17
|
+
```jsx
|
|
18
|
+
<Text variant="ui">// ...</Text>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Currently, the rule is extremely defensive, only reporting on certain p, span, strong and em elements that don't have any props outside of `key`, `id` and `data-testid`.
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.JSXElementHelper = exports.JSXElement = void 0;
|
|
7
7
|
var _eslintCodemodUtils = require("eslint-codemod-utils");
|
|
8
|
+
var _jsxAttribute = require("./jsx-attribute");
|
|
8
9
|
var JSXElementHelper = exports.JSXElement = exports.JSXElementHelper = {
|
|
9
10
|
/**
|
|
10
11
|
* Names of JSXElements can be any of:
|
|
@@ -12,8 +13,8 @@ var JSXElementHelper = exports.JSXElement = exports.JSXElementHelper = {
|
|
|
12
13
|
* `<MyComponents.Component></MyComponents.Component>` - `MyComponents` is a namespace (JSXNamespacedName)
|
|
13
14
|
* `<MyComponents.Component></MyComponents.Component>` - `MyComponents` is an object (JSXMemberExpression)
|
|
14
15
|
*
|
|
15
|
-
*
|
|
16
|
-
* e.g.
|
|
16
|
+
* getting the name of a JSXMemberExpression is difficult, because object can contain objects, which is recursively defined in the AST.
|
|
17
|
+
* e.g. Getting the name of `<MyComponents.PresentationLayer.LeftSideBar.Header />` would require `getName` to recursively resolve all parts of the name.
|
|
17
18
|
* `getName` does not currently have this functionality. Add it if you need it.
|
|
18
19
|
*/
|
|
19
20
|
getName: function getName(node) {
|
|
@@ -51,5 +52,35 @@ var JSXElementHelper = exports.JSXElement = exports.JSXElementHelper = {
|
|
|
51
52
|
return node.openingElement.attributes.some(function (attr) {
|
|
52
53
|
return (0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXSpreadAttribute');
|
|
53
54
|
});
|
|
55
|
+
},
|
|
56
|
+
addAttribute: function addAttribute(node, name, value, fixer) {
|
|
57
|
+
var attributeString = " ".concat(name, "='").concat(value, "'");
|
|
58
|
+
var isSelfClosing = JSXElementHelper.isSelfClosing(node);
|
|
59
|
+
var start = node.openingElement.range ? node.openingElement.range[0] : 0;
|
|
60
|
+
var end = node.openingElement.range ? node.openingElement.range[1] - (isSelfClosing ? 3 : 1) : 0;
|
|
61
|
+
var range = [start, end];
|
|
62
|
+
var fix = fixer.insertTextAfterRange(range, attributeString);
|
|
63
|
+
return fix;
|
|
64
|
+
},
|
|
65
|
+
getChildren: function getChildren(node) {
|
|
66
|
+
// Filter out text children with whitespace characters only as JSX removes whitespace used for intendation
|
|
67
|
+
var filteredChildren = node.children.filter(function (child) {
|
|
68
|
+
if ((0, _eslintCodemodUtils.isNodeOfType)(child, 'JSXText')) {
|
|
69
|
+
var whiteSpaceChars = new RegExp('\\s', 'g');
|
|
70
|
+
return !whiteSpaceChars.test(child.value);
|
|
71
|
+
}
|
|
72
|
+
return true;
|
|
73
|
+
});
|
|
74
|
+
return filteredChildren;
|
|
75
|
+
},
|
|
76
|
+
hasAllowedAttrsOnly: function hasAllowedAttrsOnly(node, allowedProps) {
|
|
77
|
+
var attrs = JSXElementHelper.getAttributes(node);
|
|
78
|
+
return attrs.every(function (attr) {
|
|
79
|
+
if (!(0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute')) {
|
|
80
|
+
return false;
|
|
81
|
+
}
|
|
82
|
+
var name = _jsxAttribute.JSXAttribute.getName(attr);
|
|
83
|
+
return allowedProps.includes(name);
|
|
84
|
+
});
|
|
54
85
|
}
|
|
55
86
|
};
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
/**
|
|
8
8
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
9
|
-
* @codegen <<SignedSource::
|
|
9
|
+
* @codegen <<SignedSource::98174f9eecc3be9d3a54506bcf2994ef>>
|
|
10
10
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
11
11
|
*/
|
|
12
12
|
var _default = exports.default = {
|
|
@@ -40,6 +40,7 @@ var _default = exports.default = {
|
|
|
40
40
|
'@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
|
|
41
41
|
'@atlaskit/design-system/use-href-in-link-item': 'warn',
|
|
42
42
|
'@atlaskit/design-system/use-primitives': 'warn',
|
|
43
|
+
'@atlaskit/design-system/use-primitives-text': 'warn',
|
|
43
44
|
'@atlaskit/design-system/use-visually-hidden': 'error'
|
|
44
45
|
}
|
|
45
46
|
};
|
|
@@ -33,10 +33,11 @@ var _useDrawerLabel = _interopRequireDefault(require("./use-drawer-label"));
|
|
|
33
33
|
var _useHeadingLevelInSpotlightCard = _interopRequireDefault(require("./use-heading-level-in-spotlight-card"));
|
|
34
34
|
var _useHrefInLinkItem = _interopRequireDefault(require("./use-href-in-link-item"));
|
|
35
35
|
var _usePrimitives = _interopRequireDefault(require("./use-primitives"));
|
|
36
|
+
var _usePrimitivesText = _interopRequireDefault(require("./use-primitives-text"));
|
|
36
37
|
var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
|
|
37
38
|
/**
|
|
38
39
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
39
|
-
* @codegen <<SignedSource::
|
|
40
|
+
* @codegen <<SignedSource::2687f4b835e076cef09f1fbbfdfc1b06>>
|
|
40
41
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
41
42
|
*/
|
|
42
43
|
var _default = exports.default = {
|
|
@@ -68,5 +69,6 @@ var _default = exports.default = {
|
|
|
68
69
|
'use-heading-level-in-spotlight-card': _useHeadingLevelInSpotlightCard.default,
|
|
69
70
|
'use-href-in-link-item': _useHrefInLinkItem.default,
|
|
70
71
|
'use-primitives': _usePrimitives.default,
|
|
72
|
+
'use-primitives-text': _usePrimitivesText.default,
|
|
71
73
|
'use-visually-hidden': _useVisuallyHidden.default
|
|
72
74
|
};
|
|
@@ -11,7 +11,6 @@ var _eslintCodemodUtils = require("eslint-codemod-utils");
|
|
|
11
11
|
var ast = _interopRequireWildcard(require("../../../../ast-nodes"));
|
|
12
12
|
var _utils = require("../../utils");
|
|
13
13
|
var _cssToXcss = require("../css-to-xcss");
|
|
14
|
-
var _containsOnlySupportedAttrs = require("./contains-only-supported-attrs");
|
|
15
14
|
var supported = _interopRequireWildcard(require("./supported"));
|
|
16
15
|
var _upsertImportDeclaration = require("./upsert-import-declaration");
|
|
17
16
|
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); }
|
|
@@ -65,7 +64,7 @@ var EmotionCSS = exports.EmotionCSS = {
|
|
|
65
64
|
}
|
|
66
65
|
|
|
67
66
|
// Ignore elements that contain dangerous attributes like `id`.
|
|
68
|
-
if (!(
|
|
67
|
+
if (!ast.JSXElement.hasAllowedAttrsOnly(node, supported.attributes)) {
|
|
69
68
|
return false;
|
|
70
69
|
}
|
|
71
70
|
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getConfig = void 0;
|
|
7
|
+
var defaults = {
|
|
8
|
+
patterns: ['paragraph-elements', 'span-elements', 'strong-elements', 'emphasis-elements']
|
|
9
|
+
};
|
|
10
|
+
var getConfig = exports.getConfig = function getConfig(overrides) {
|
|
11
|
+
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
|
|
12
|
+
// start with an empty object, then merge in the defaults, then merge in overrides.
|
|
13
|
+
// The empty object is returned, as well as modified in place
|
|
14
|
+
return Object.assign({}, defaults, overrides);
|
|
15
|
+
};
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _createRule = require("../utils/create-rule");
|
|
8
|
+
var _config = require("./config");
|
|
9
|
+
var _transformers = require("./transformers");
|
|
10
|
+
var textDocsUrl = 'https://atlassian.design/components/primitives/text';
|
|
11
|
+
var rule = (0, _createRule.createLintRule)({
|
|
12
|
+
meta: {
|
|
13
|
+
name: 'use-primitives-text',
|
|
14
|
+
type: 'suggestion',
|
|
15
|
+
fixable: 'code',
|
|
16
|
+
hasSuggestions: true,
|
|
17
|
+
docs: {
|
|
18
|
+
description: 'Encourage the usage of text components.',
|
|
19
|
+
recommended: false,
|
|
20
|
+
severity: 'warn'
|
|
21
|
+
},
|
|
22
|
+
messages: {
|
|
23
|
+
preferPrimitivesText: "This element can be replaced with a \"Text\" primitive. See ".concat(textDocsUrl, " for additional guidance."),
|
|
24
|
+
preferPrimitivesStackedText: "These paragraphs can be replaced with a \"Text\" and \"Stack\" primitives. See ".concat(textDocsUrl, " for additional guidance.")
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
create: function create(context) {
|
|
28
|
+
var config = (0, _config.getConfig)(context.options[0]);
|
|
29
|
+
return {
|
|
30
|
+
'JSXElement[openingElement.name.name=span]': function JSXElementOpeningElementNameNameSpan(node) {
|
|
31
|
+
return _transformers.SpanElements.lint(node, {
|
|
32
|
+
context: context,
|
|
33
|
+
config: config
|
|
34
|
+
});
|
|
35
|
+
},
|
|
36
|
+
'JSXElement[openingElement.name.name=p]': function JSXElementOpeningElementNameNameP(node) {
|
|
37
|
+
return _transformers.ParagraphElements.lint(node, {
|
|
38
|
+
context: context,
|
|
39
|
+
config: config
|
|
40
|
+
});
|
|
41
|
+
},
|
|
42
|
+
'JSXElement[openingElement.name.name=strong]': function JSXElementOpeningElementNameNameStrong(node) {
|
|
43
|
+
return _transformers.StrongElements.lint(node, {
|
|
44
|
+
context: context,
|
|
45
|
+
config: config
|
|
46
|
+
});
|
|
47
|
+
},
|
|
48
|
+
'JSXElement[openingElement.name.name=em]': function JSXElementOpeningElementNameNameEm(node) {
|
|
49
|
+
return _transformers.EmphasisElements.lint(node, {
|
|
50
|
+
context: context,
|
|
51
|
+
config: config
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
var _default = exports.default = rule;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.allowedAttrs = void 0;
|
|
8
|
+
exports.hasTextChildrenOnly = hasTextChildrenOnly;
|
|
9
|
+
exports.updateTestIdAttributeFix = updateTestIdAttributeFix;
|
|
10
|
+
var _eslintCodemodUtils = require("eslint-codemod-utils");
|
|
11
|
+
var ast = _interopRequireWildcard(require("../../../ast-nodes"));
|
|
12
|
+
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); }
|
|
13
|
+
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; }
|
|
14
|
+
// Rename data-testid prop to testId if present
|
|
15
|
+
function updateTestIdAttributeFix(node, fixer) {
|
|
16
|
+
var testIdAttr = ast.JSXElement.getAttributeByName(node, 'data-testid');
|
|
17
|
+
if (testIdAttr) {
|
|
18
|
+
return ast.JSXAttribute.updateName(testIdAttr, 'testId', fixer);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
var allowedAttrs = exports.allowedAttrs = ['id', 'data-testid', 'key'];
|
|
22
|
+
|
|
23
|
+
// Only allow elements with strings as children
|
|
24
|
+
// The use of `FormattedMessage` component and `formatMessage` are allowed as these are used for i18n
|
|
25
|
+
function hasTextChildrenOnly(node) {
|
|
26
|
+
var _node$children;
|
|
27
|
+
return (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.every(function (child) {
|
|
28
|
+
if ((0, _eslintCodemodUtils.isNodeOfType)(child, 'JSXText')) {
|
|
29
|
+
return true;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
// JSX child element <span><FormattedMessage /></span>
|
|
33
|
+
if ((0, _eslintCodemodUtils.isNodeOfType)(child, 'JSXElement') && ast.JSXElement.getName(child) === 'FormattedMessage') {
|
|
34
|
+
return true;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// JSX expression <span>{formatMessage(...)}</span>
|
|
38
|
+
if ((0, _eslintCodemodUtils.isNodeOfType)(child, 'JSXExpressionContainer') && (0, _eslintCodemodUtils.isNodeOfType)(child.expression, 'CallExpression')) {
|
|
39
|
+
return ast.FunctionCall.getName(child.expression) === 'formatMessage';
|
|
40
|
+
}
|
|
41
|
+
return false;
|
|
42
|
+
});
|
|
43
|
+
}
|
|
@@ -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.EmphasisElements = 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 EmphasisElements = exports.EmphasisElements = {
|
|
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 (!EmphasisElements._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: EmphasisElements._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('emphasis-elements')) {
|
|
48
|
+
return false;
|
|
49
|
+
}
|
|
50
|
+
var elementName = ast.JSXElement.getName(node);
|
|
51
|
+
if (elementName !== 'em') {
|
|
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', 'em', 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
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "EmphasisElements", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _emphasisElements.EmphasisElements;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "ParagraphElements", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function get() {
|
|
15
|
+
return _paragraphElements.ParagraphElements;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
Object.defineProperty(exports, "SpanElements", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function get() {
|
|
21
|
+
return _spanElements.SpanElements;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
Object.defineProperty(exports, "StrongElements", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function get() {
|
|
27
|
+
return _strongElements.StrongElements;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
var _emphasisElements = require("./emphasis-elements");
|
|
31
|
+
var _spanElements = require("./span-elements");
|
|
32
|
+
var _strongElements = require("./strong-elements");
|
|
33
|
+
var _paragraphElements = require("./paragraph-elements");
|
|
@@ -0,0 +1,196 @@
|
|
|
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.ParagraphElements = 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 ParagraphElements = exports.ParagraphElements = {
|
|
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
|
+
var _ParagraphElements$_c = ParagraphElements._check(node, {
|
|
28
|
+
context: context,
|
|
29
|
+
config: config
|
|
30
|
+
}),
|
|
31
|
+
success = _ParagraphElements$_c.success,
|
|
32
|
+
refs = _ParagraphElements$_c.refs;
|
|
33
|
+
if (!success) {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
if (refs.siblings.length > 1) {
|
|
37
|
+
var _refs$siblings$0$loc, _refs$siblings$loc;
|
|
38
|
+
/**
|
|
39
|
+
* Highlighting from first opening element to last closing element
|
|
40
|
+
* to indicate fix will change all p elements and wrap them in a Stack,
|
|
41
|
+
* falls back to first opening element.
|
|
42
|
+
*/
|
|
43
|
+
var startLoc = (_refs$siblings$0$loc = refs.siblings[0].loc) === null || _refs$siblings$0$loc === void 0 ? void 0 : _refs$siblings$0$loc.start;
|
|
44
|
+
var endLoc = (_refs$siblings$loc = refs.siblings[refs.siblings.length - 1].loc) === null || _refs$siblings$loc === void 0 ? void 0 : _refs$siblings$loc.end;
|
|
45
|
+
context.report({
|
|
46
|
+
loc: startLoc && endLoc && {
|
|
47
|
+
start: startLoc,
|
|
48
|
+
end: endLoc
|
|
49
|
+
},
|
|
50
|
+
node: node.openingElement,
|
|
51
|
+
messageId: 'preferPrimitivesStackedText',
|
|
52
|
+
suggest: [{
|
|
53
|
+
desc: 'Convert to Text and Stack',
|
|
54
|
+
fix: ParagraphElements._fixMultiple(node, {
|
|
55
|
+
context: context,
|
|
56
|
+
refs: refs
|
|
57
|
+
})
|
|
58
|
+
}]
|
|
59
|
+
});
|
|
60
|
+
} else {
|
|
61
|
+
context.report({
|
|
62
|
+
node: node,
|
|
63
|
+
messageId: 'preferPrimitivesText',
|
|
64
|
+
suggest: [{
|
|
65
|
+
desc: 'Convert to Text',
|
|
66
|
+
fix: ParagraphElements._fixSingle(node, {
|
|
67
|
+
context: context
|
|
68
|
+
})
|
|
69
|
+
}]
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
_check: function _check(node, _ref2) {
|
|
74
|
+
var context = _ref2.context,
|
|
75
|
+
config = _ref2.config;
|
|
76
|
+
if (!config.patterns.includes('paragraph-elements')) {
|
|
77
|
+
return {
|
|
78
|
+
success: false,
|
|
79
|
+
refs: {
|
|
80
|
+
siblings: []
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
}
|
|
84
|
+
var elementName = ast.JSXElement.getName(node);
|
|
85
|
+
if (elementName !== 'p') {
|
|
86
|
+
return {
|
|
87
|
+
success: false,
|
|
88
|
+
refs: {
|
|
89
|
+
siblings: []
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// All siblings have to be paragraph elements with no unallowed props
|
|
95
|
+
if (!(0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'JSXElement')) {
|
|
96
|
+
return {
|
|
97
|
+
success: false,
|
|
98
|
+
refs: {
|
|
99
|
+
siblings: []
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
}
|
|
103
|
+
var siblings = ast.JSXElement.getChildren(node.parent);
|
|
104
|
+
if (siblings.length > 1) {
|
|
105
|
+
var _siblings$0$range, _node$range, _siblings$0$range2, _node$range2;
|
|
106
|
+
// Only report for the first p element by comparing node location
|
|
107
|
+
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])) {
|
|
108
|
+
return {
|
|
109
|
+
success: false,
|
|
110
|
+
refs: {
|
|
111
|
+
siblings: siblings
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
}
|
|
115
|
+
// Only report when every sibling is a p element
|
|
116
|
+
var siblingsMatch = siblings.every(function (child) {
|
|
117
|
+
if (!(0, _eslintCodemodUtils.isNodeOfType)(child, 'JSXElement')) {
|
|
118
|
+
return false;
|
|
119
|
+
}
|
|
120
|
+
if (ast.JSXElement.getName(child) !== 'p') {
|
|
121
|
+
return false;
|
|
122
|
+
}
|
|
123
|
+
return ast.JSXElement.hasAllowedAttrsOnly(child, _common.allowedAttrs);
|
|
124
|
+
});
|
|
125
|
+
if (!siblingsMatch) {
|
|
126
|
+
return {
|
|
127
|
+
success: false,
|
|
128
|
+
refs: {
|
|
129
|
+
siblings: siblings
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
var importDeclaration = ast.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/primitives');
|
|
135
|
+
|
|
136
|
+
// If there is more than one `@atlaskit/primitives` import, then it becomes difficult to determine which import to transform
|
|
137
|
+
if (importDeclaration.length > 1) {
|
|
138
|
+
return {
|
|
139
|
+
success: false,
|
|
140
|
+
refs: {
|
|
141
|
+
siblings: siblings
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
}
|
|
145
|
+
return {
|
|
146
|
+
success: true,
|
|
147
|
+
refs: {
|
|
148
|
+
siblings: siblings
|
|
149
|
+
}
|
|
150
|
+
};
|
|
151
|
+
},
|
|
152
|
+
_fixSingle: function _fixSingle(node, _ref3) {
|
|
153
|
+
var context = _ref3.context;
|
|
154
|
+
return function (fixer) {
|
|
155
|
+
var importFix = (0, _upsertImportDeclaration.upsertImportDeclaration)({
|
|
156
|
+
module: '@atlaskit/primitives',
|
|
157
|
+
specifiers: ['Text']
|
|
158
|
+
}, context, fixer);
|
|
159
|
+
var elementNameFixes = ast.JSXElement.updateName(node, 'Text', fixer);
|
|
160
|
+
var testAttributeFix = (0, _common.updateTestIdAttributeFix)(node, fixer);
|
|
161
|
+
return [importFix].concat((0, _toConsumableArray2.default)(elementNameFixes), [testAttributeFix]).filter(function (fix) {
|
|
162
|
+
return Boolean(fix);
|
|
163
|
+
}); // Some of the transformers can return arrays with undefined, so filter them out
|
|
164
|
+
};
|
|
165
|
+
},
|
|
166
|
+
_fixMultiple: function _fixMultiple(node, _ref4) {
|
|
167
|
+
var context = _ref4.context,
|
|
168
|
+
refs = _ref4.refs;
|
|
169
|
+
return function (fixer) {
|
|
170
|
+
if (!(0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'JSXElement') || !node.parent.closingElement) {
|
|
171
|
+
return [];
|
|
172
|
+
}
|
|
173
|
+
var importFix = (0, _upsertImportDeclaration.upsertImportDeclaration)({
|
|
174
|
+
module: '@atlaskit/primitives',
|
|
175
|
+
specifiers: ['Text', 'Stack']
|
|
176
|
+
}, context, fixer);
|
|
177
|
+
|
|
178
|
+
// Update all siblings elements and their attributes
|
|
179
|
+
var siblingFixes = refs.siblings.map(function (sibling) {
|
|
180
|
+
if ((0, _eslintCodemodUtils.isNodeOfType)(sibling, 'JSXElement')) {
|
|
181
|
+
var elementNameFixes = ast.JSXElement.updateName(sibling, 'Text', fixer);
|
|
182
|
+
var testAttributeFix = (0, _common.updateTestIdAttributeFix)(sibling, fixer);
|
|
183
|
+
return [].concat((0, _toConsumableArray2.default)(elementNameFixes), [testAttributeFix]);
|
|
184
|
+
}
|
|
185
|
+
return undefined;
|
|
186
|
+
}).flat();
|
|
187
|
+
|
|
188
|
+
// Wrap in <Stack /> when more than 1 sibling
|
|
189
|
+
var wrapperOpenElementFix = fixer.insertTextAfter(node.parent.openingElement, "<Stack space='space.150'>");
|
|
190
|
+
var wrapperCloseElementFix = fixer.insertTextBefore(node.parent.closingElement, '</Stack>');
|
|
191
|
+
return [importFix].concat((0, _toConsumableArray2.default)(siblingFixes), [wrapperOpenElementFix, wrapperCloseElementFix]).filter(function (fix) {
|
|
192
|
+
return Boolean(fix);
|
|
193
|
+
}); // Some of the transformers can return arrays with undefined, so filter them out
|
|
194
|
+
};
|
|
195
|
+
}
|
|
196
|
+
};
|