@atlaskit/eslint-plugin-design-system 13.24.2 → 13.26.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 +21 -0
- package/README.md +71 -71
- package/dist/cjs/presets/all-flat.codegen.js +2 -2
- package/dist/cjs/presets/all.codegen.js +2 -2
- package/dist/cjs/presets/recommended-flat.codegen.js +2 -2
- package/dist/cjs/presets/recommended.codegen.js +2 -2
- package/dist/cjs/rules/index.codegen.js +3 -3
- package/dist/cjs/rules/{lozenge-appearance-and-isbold-migration → lozenge-isBold-and-lozenge-badge-appearance-migration}/index.js +115 -19
- package/dist/cjs/rules/use-tokens-shape/transformers/style-map.js +4 -1
- package/dist/es2019/presets/all-flat.codegen.js +2 -2
- package/dist/es2019/presets/all.codegen.js +2 -2
- package/dist/es2019/presets/recommended-flat.codegen.js +2 -2
- package/dist/es2019/presets/recommended.codegen.js +2 -2
- package/dist/es2019/rules/index.codegen.js +3 -3
- package/dist/es2019/rules/{lozenge-appearance-and-isbold-migration → lozenge-isBold-and-lozenge-badge-appearance-migration}/index.js +109 -15
- package/dist/es2019/rules/use-tokens-shape/transformers/style-map.js +4 -1
- package/dist/esm/presets/all-flat.codegen.js +2 -2
- package/dist/esm/presets/all.codegen.js +2 -2
- package/dist/esm/presets/recommended-flat.codegen.js +2 -2
- package/dist/esm/presets/recommended.codegen.js +2 -2
- package/dist/esm/rules/index.codegen.js +3 -3
- package/dist/esm/rules/{lozenge-appearance-and-isbold-migration → lozenge-isBold-and-lozenge-badge-appearance-migration}/index.js +115 -19
- package/dist/esm/rules/use-tokens-shape/transformers/style-map.js +4 -1
- package/dist/types/presets/all-flat.codegen.d.ts +1 -1
- package/dist/types/presets/all.codegen.d.ts +1 -1
- package/dist/types/presets/recommended-flat.codegen.d.ts +1 -1
- package/dist/types/presets/recommended.codegen.d.ts +1 -1
- package/dist/types/rules/index.codegen.d.ts +1 -1
- package/dist/types-ts4.5/presets/all-flat.codegen.d.ts +1 -1
- package/dist/types-ts4.5/presets/all.codegen.d.ts +1 -1
- package/dist/types-ts4.5/presets/recommended-flat.codegen.d.ts +1 -1
- package/dist/types-ts4.5/presets/recommended.codegen.d.ts +1 -1
- package/dist/types-ts4.5/rules/index.codegen.d.ts +1 -1
- package/package.json +3 -3
- /package/dist/types/rules/{lozenge-appearance-and-isbold-migration → lozenge-isBold-and-lozenge-badge-appearance-migration}/index.d.ts +0 -0
- /package/dist/types-ts4.5/rules/{lozenge-appearance-and-isbold-migration → lozenge-isBold-and-lozenge-badge-appearance-migration}/index.d.ts +0 -0
|
@@ -8,18 +8,20 @@ var _eslintCodemodUtils = require("eslint-codemod-utils");
|
|
|
8
8
|
var _createRule = require("../utils/create-rule");
|
|
9
9
|
var rule = (0, _createRule.createLintRule)({
|
|
10
10
|
meta: {
|
|
11
|
-
name: 'lozenge-
|
|
11
|
+
name: 'lozenge-isBold-and-lozenge-badge-appearance-migration',
|
|
12
12
|
fixable: 'code',
|
|
13
13
|
type: 'suggestion',
|
|
14
14
|
docs: {
|
|
15
|
-
description: 'Helps migrate
|
|
15
|
+
description: 'Helps migrate Lozenge isBold prop and appearance values (for both Lozenge and Badge components) as part of the Labelling System Phase 1 migration.',
|
|
16
16
|
recommended: true,
|
|
17
17
|
severity: 'warn'
|
|
18
18
|
},
|
|
19
19
|
messages: {
|
|
20
20
|
updateAppearance: 'Update appearance value to new semantic value.',
|
|
21
21
|
migrateTag: 'Non-bold <Lozenge> variants should migrate to <Tag> component.',
|
|
22
|
-
manualReview: "Dynamic 'isBold' props require manual review before migration."
|
|
22
|
+
manualReview: "Dynamic 'isBold' props require manual review before migration.",
|
|
23
|
+
updateBadgeAppearance: 'Update Badge appearance value "{{oldValue}}" to new semantic value "{{newValue}}".',
|
|
24
|
+
dynamicBadgeAppearance: 'Dynamic appearance prop values require manual review to ensure they use the new semantic values: neutral, information, inverse, danger, success.'
|
|
23
25
|
}
|
|
24
26
|
},
|
|
25
27
|
create: function create(context) {
|
|
@@ -28,6 +30,11 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
28
30
|
*/
|
|
29
31
|
var lozengeImports = {}; // local name -> import source
|
|
30
32
|
|
|
33
|
+
/**
|
|
34
|
+
* Contains a map of imported Badge components.
|
|
35
|
+
*/
|
|
36
|
+
var badgeImports = {}; // local name -> import source
|
|
37
|
+
|
|
31
38
|
/**
|
|
32
39
|
* Check if a JSX attribute value is a literal false
|
|
33
40
|
*/
|
|
@@ -36,14 +43,25 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
36
43
|
}
|
|
37
44
|
|
|
38
45
|
/**
|
|
39
|
-
* Check if a JSX attribute value is dynamic (not a literal
|
|
46
|
+
* Check if a JSX attribute value is dynamic (not a static literal value)
|
|
47
|
+
* Can be used for any prop type (boolean, string, etc.)
|
|
40
48
|
*/
|
|
41
49
|
function isDynamicExpression(node) {
|
|
42
|
-
if (!node
|
|
50
|
+
if (!node) {
|
|
51
|
+
return false;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// If it's a plain literal (e.g., appearance="value"), it's not dynamic
|
|
55
|
+
if (node.type === 'Literal') {
|
|
43
56
|
return false;
|
|
44
57
|
}
|
|
45
|
-
|
|
46
|
-
|
|
58
|
+
|
|
59
|
+
// If it's an expression container with a non-literal expression, it's dynamic
|
|
60
|
+
if (node.type === 'JSXExpressionContainer') {
|
|
61
|
+
var expr = node.expression;
|
|
62
|
+
return expr && expr.type !== 'Literal';
|
|
63
|
+
}
|
|
64
|
+
return false;
|
|
47
65
|
}
|
|
48
66
|
|
|
49
67
|
/**
|
|
@@ -76,6 +94,21 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
76
94
|
return mapping[oldValue] || oldValue;
|
|
77
95
|
}
|
|
78
96
|
|
|
97
|
+
/**
|
|
98
|
+
* Map Badge old appearance values to new semantic appearance values
|
|
99
|
+
*/
|
|
100
|
+
function mapBadgeToNewAppearanceValue(oldValue) {
|
|
101
|
+
var mapping = {
|
|
102
|
+
added: 'success',
|
|
103
|
+
removed: 'danger',
|
|
104
|
+
default: 'neutral',
|
|
105
|
+
primary: 'information',
|
|
106
|
+
primaryInverted: 'inverse',
|
|
107
|
+
important: 'danger'
|
|
108
|
+
};
|
|
109
|
+
return mapping[oldValue] || oldValue;
|
|
110
|
+
}
|
|
111
|
+
|
|
79
112
|
/**
|
|
80
113
|
* Extract the string value from a JSX attribute value
|
|
81
114
|
*/
|
|
@@ -92,6 +125,25 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
92
125
|
return null;
|
|
93
126
|
}
|
|
94
127
|
|
|
128
|
+
/**
|
|
129
|
+
* Create a fixer function to replace an appearance prop value
|
|
130
|
+
* Handles both Literal and JSXExpressionContainer with Literal
|
|
131
|
+
*/
|
|
132
|
+
function createAppearanceFixer(attrValue, newValue) {
|
|
133
|
+
return function (fixer) {
|
|
134
|
+
if (!attrValue) {
|
|
135
|
+
return null;
|
|
136
|
+
}
|
|
137
|
+
if (attrValue.type === 'Literal') {
|
|
138
|
+
return fixer.replaceText(attrValue, "\"".concat(newValue, "\""));
|
|
139
|
+
}
|
|
140
|
+
if (attrValue.type === 'JSXExpressionContainer' && 'expression' in attrValue && attrValue.expression && attrValue.expression.type === 'Literal') {
|
|
141
|
+
return fixer.replaceText(attrValue.expression, "\"".concat(newValue, "\""));
|
|
142
|
+
}
|
|
143
|
+
return null;
|
|
144
|
+
};
|
|
145
|
+
}
|
|
146
|
+
|
|
95
147
|
/**
|
|
96
148
|
* Generate the replacement JSX element text
|
|
97
149
|
*/
|
|
@@ -153,6 +205,18 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
153
205
|
}
|
|
154
206
|
});
|
|
155
207
|
}
|
|
208
|
+
// Track Badge imports
|
|
209
|
+
if (moduleSource === '@atlaskit/badge' || moduleSource.startsWith('@atlaskit/badge')) {
|
|
210
|
+
node.specifiers.forEach(function (spec) {
|
|
211
|
+
if (spec.type === 'ImportDefaultSpecifier') {
|
|
212
|
+
badgeImports[spec.local.name] = moduleSource;
|
|
213
|
+
} else if (spec.type === 'ImportSpecifier' && spec.imported.type === 'Identifier') {
|
|
214
|
+
if (spec.imported.name === 'Badge' || spec.imported.name === 'default') {
|
|
215
|
+
badgeImports[spec.local.name] = moduleSource;
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
});
|
|
219
|
+
}
|
|
156
220
|
}
|
|
157
221
|
},
|
|
158
222
|
JSXElement: function JSXElement(node) {
|
|
@@ -164,6 +228,45 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
164
228
|
}
|
|
165
229
|
var elementName = node.openingElement.name.name;
|
|
166
230
|
|
|
231
|
+
// Handle Badge components
|
|
232
|
+
if (badgeImports[elementName]) {
|
|
233
|
+
// Find the appearance prop
|
|
234
|
+
var _appearanceProp = node.openingElement.attributes.find(function (attr) {
|
|
235
|
+
return attr.type === 'JSXAttribute' && attr.name.type === 'JSXIdentifier' && attr.name.name === 'appearance';
|
|
236
|
+
});
|
|
237
|
+
if (!_appearanceProp || _appearanceProp.type !== 'JSXAttribute') {
|
|
238
|
+
// No appearance prop or it's a spread attribute, nothing to migrate
|
|
239
|
+
return;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
// Check if it's a dynamic expression
|
|
243
|
+
if (isDynamicExpression(_appearanceProp.value)) {
|
|
244
|
+
context.report({
|
|
245
|
+
node: _appearanceProp,
|
|
246
|
+
messageId: 'dynamicBadgeAppearance'
|
|
247
|
+
});
|
|
248
|
+
return;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
// Extract the string value
|
|
252
|
+
var stringValue = extractStringValue(_appearanceProp.value);
|
|
253
|
+
if (stringValue && typeof stringValue === 'string') {
|
|
254
|
+
var mappedValue = mapBadgeToNewAppearanceValue(stringValue);
|
|
255
|
+
if (mappedValue !== stringValue) {
|
|
256
|
+
context.report({
|
|
257
|
+
node: _appearanceProp,
|
|
258
|
+
messageId: 'updateBadgeAppearance',
|
|
259
|
+
data: {
|
|
260
|
+
oldValue: stringValue,
|
|
261
|
+
newValue: mappedValue
|
|
262
|
+
},
|
|
263
|
+
fix: createAppearanceFixer(_appearanceProp.value, mappedValue)
|
|
264
|
+
});
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
return;
|
|
268
|
+
}
|
|
269
|
+
|
|
167
270
|
// Only process if this is a Lozenge component we've imported
|
|
168
271
|
if (!lozengeImports[elementName]) {
|
|
169
272
|
return;
|
|
@@ -177,21 +280,14 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
177
280
|
var shouldMigrateToTag = !isBoldProp || isLiteralFalse(isBoldProp.value);
|
|
178
281
|
if (!shouldMigrateToTag) {
|
|
179
282
|
// Only update appearance values for Lozenge components that stay as Lozenge
|
|
180
|
-
var
|
|
181
|
-
if (
|
|
182
|
-
var
|
|
183
|
-
if (
|
|
283
|
+
var _stringValue = extractStringValue(appearanceProp.value);
|
|
284
|
+
if (_stringValue && typeof _stringValue === 'string') {
|
|
285
|
+
var _mappedValue = mapToNewAppearanceValue(_stringValue);
|
|
286
|
+
if (_mappedValue !== _stringValue) {
|
|
184
287
|
context.report({
|
|
185
288
|
node: appearanceProp,
|
|
186
289
|
messageId: 'updateAppearance',
|
|
187
|
-
fix:
|
|
188
|
-
if (appearanceProp.value.type === 'Literal') {
|
|
189
|
-
return fixer.replaceText(appearanceProp.value, "\"".concat(mappedValue, "\""));
|
|
190
|
-
} else if (appearanceProp.value.type === 'JSXExpressionContainer' && appearanceProp.value.expression && appearanceProp.value.expression.type === 'Literal') {
|
|
191
|
-
return fixer.replaceText(appearanceProp.value.expression, "\"".concat(mappedValue, "\""));
|
|
192
|
-
}
|
|
193
|
-
return null;
|
|
194
|
-
}
|
|
290
|
+
fix: createAppearanceFixer(appearanceProp.value, _mappedValue)
|
|
195
291
|
});
|
|
196
292
|
}
|
|
197
293
|
}
|
|
@@ -11,6 +11,7 @@ var radiusTokenMap = {
|
|
|
11
11
|
'6px': 'radius.medium',
|
|
12
12
|
'8px': 'radius.large',
|
|
13
13
|
'12px': 'radius.xlarge',
|
|
14
|
+
'16px': 'radius.xxlarge',
|
|
14
15
|
'50%': 'radius.full',
|
|
15
16
|
'100%': 'radius.full',
|
|
16
17
|
2: 'radius.xsmall',
|
|
@@ -19,11 +20,13 @@ var radiusTokenMap = {
|
|
|
19
20
|
6: 'radius.medium',
|
|
20
21
|
8: 'radius.large',
|
|
21
22
|
12: 'radius.xlarge',
|
|
23
|
+
16: 'radius.xxlarge',
|
|
22
24
|
'0.125rem': 'radius.xsmall',
|
|
23
25
|
'0.25rem': 'radius.small',
|
|
24
26
|
'0.375rem': 'radius.medium',
|
|
25
27
|
'0.5rem': 'radius.large',
|
|
26
|
-
'0.75rem': 'radius.xlarge'
|
|
28
|
+
'0.75rem': 'radius.xlarge',
|
|
29
|
+
'1rem': 'radius.xxlarge'
|
|
27
30
|
};
|
|
28
31
|
var borderWidthTokenMap = {
|
|
29
32
|
'1px': 'border.width'
|
|
@@ -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::
|
|
3
|
+
* @codegen <<SignedSource::df988d512376c1317e5f7a350ad19fb9>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -15,7 +15,7 @@ const rules = {
|
|
|
15
15
|
'@atlaskit/design-system/ensure-icon-color': 'error',
|
|
16
16
|
'@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
|
|
17
17
|
'@atlaskit/design-system/icon-label': 'warn',
|
|
18
|
-
'@atlaskit/design-system/lozenge-
|
|
18
|
+
'@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
|
|
19
19
|
'@atlaskit/design-system/no-banned-imports': 'error',
|
|
20
20
|
'@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
|
|
21
21
|
'@atlaskit/design-system/no-css-tagged-template-expression': 'error',
|
|
@@ -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::
|
|
3
|
+
* @codegen <<SignedSource::2dee8518d733b0b364809d0f5641afda>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -14,7 +14,7 @@ const rules = {
|
|
|
14
14
|
'@atlaskit/design-system/ensure-icon-color': 'error',
|
|
15
15
|
'@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
|
|
16
16
|
'@atlaskit/design-system/icon-label': 'warn',
|
|
17
|
-
'@atlaskit/design-system/lozenge-
|
|
17
|
+
'@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
|
|
18
18
|
'@atlaskit/design-system/no-banned-imports': 'error',
|
|
19
19
|
'@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
|
|
20
20
|
'@atlaskit/design-system/no-css-tagged-template-expression': 'error',
|
|
@@ -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::
|
|
3
|
+
* @codegen <<SignedSource::7ed1a8eeaaea559980cb2c533ba9a2e6>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -11,7 +11,7 @@ const rules = {
|
|
|
11
11
|
'@atlaskit/design-system/consistent-css-prop-usage': 'error',
|
|
12
12
|
'@atlaskit/design-system/ensure-design-token-usage': 'error',
|
|
13
13
|
'@atlaskit/design-system/icon-label': 'warn',
|
|
14
|
-
'@atlaskit/design-system/lozenge-
|
|
14
|
+
'@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
|
|
15
15
|
'@atlaskit/design-system/no-banned-imports': 'error',
|
|
16
16
|
'@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
|
|
17
17
|
'@atlaskit/design-system/no-deprecated-apis': 'error',
|
|
@@ -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::
|
|
3
|
+
* @codegen <<SignedSource::32a0942d7edc5a3fdc70dd0833bb8aca>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -10,7 +10,7 @@ const rules = {
|
|
|
10
10
|
'@atlaskit/design-system/consistent-css-prop-usage': 'error',
|
|
11
11
|
'@atlaskit/design-system/ensure-design-token-usage': 'error',
|
|
12
12
|
'@atlaskit/design-system/icon-label': 'warn',
|
|
13
|
-
'@atlaskit/design-system/lozenge-
|
|
13
|
+
'@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
|
|
14
14
|
'@atlaskit/design-system/no-banned-imports': 'error',
|
|
15
15
|
'@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
|
|
16
16
|
'@atlaskit/design-system/no-deprecated-apis': 'error',
|
|
@@ -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::
|
|
3
|
+
* @codegen <<SignedSource::c74b833590d4eb693616a3fcbf2e335a>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -11,7 +11,7 @@ import ensureDesignTokenUsagePreview from './ensure-design-token-usage-preview';
|
|
|
11
11
|
import ensureIconColor from './ensure-icon-color';
|
|
12
12
|
import ensureProperXcssUsage from './ensure-proper-xcss-usage';
|
|
13
13
|
import iconLabel from './icon-label';
|
|
14
|
-
import
|
|
14
|
+
import lozengeIsBoldAndLozengeBadgeAppearanceMigration from './lozenge-isBold-and-lozenge-badge-appearance-migration';
|
|
15
15
|
import noBannedImports from './no-banned-imports';
|
|
16
16
|
import noBooleanAutofocusOnModalDialog from './no-boolean-autofocus-on-modal-dialog';
|
|
17
17
|
import noCssTaggedTemplateExpression from './no-css-tagged-template-expression';
|
|
@@ -81,7 +81,7 @@ export const rules = {
|
|
|
81
81
|
'ensure-icon-color': ensureIconColor,
|
|
82
82
|
'ensure-proper-xcss-usage': ensureProperXcssUsage,
|
|
83
83
|
'icon-label': iconLabel,
|
|
84
|
-
'lozenge-
|
|
84
|
+
'lozenge-isBold-and-lozenge-badge-appearance-migration': lozengeIsBoldAndLozengeBadgeAppearanceMigration,
|
|
85
85
|
'no-banned-imports': noBannedImports,
|
|
86
86
|
'no-boolean-autofocus-on-modal-dialog': noBooleanAutofocusOnModalDialog,
|
|
87
87
|
'no-css-tagged-template-expression': noCssTaggedTemplateExpression,
|
|
@@ -2,18 +2,20 @@ import { isNodeOfType } from 'eslint-codemod-utils';
|
|
|
2
2
|
import { createLintRule } from '../utils/create-rule';
|
|
3
3
|
const rule = createLintRule({
|
|
4
4
|
meta: {
|
|
5
|
-
name: 'lozenge-
|
|
5
|
+
name: 'lozenge-isBold-and-lozenge-badge-appearance-migration',
|
|
6
6
|
fixable: 'code',
|
|
7
7
|
type: 'suggestion',
|
|
8
8
|
docs: {
|
|
9
|
-
description: 'Helps migrate
|
|
9
|
+
description: 'Helps migrate Lozenge isBold prop and appearance values (for both Lozenge and Badge components) as part of the Labelling System Phase 1 migration.',
|
|
10
10
|
recommended: true,
|
|
11
11
|
severity: 'warn'
|
|
12
12
|
},
|
|
13
13
|
messages: {
|
|
14
14
|
updateAppearance: 'Update appearance value to new semantic value.',
|
|
15
15
|
migrateTag: 'Non-bold <Lozenge> variants should migrate to <Tag> component.',
|
|
16
|
-
manualReview: "Dynamic 'isBold' props require manual review before migration."
|
|
16
|
+
manualReview: "Dynamic 'isBold' props require manual review before migration.",
|
|
17
|
+
updateBadgeAppearance: 'Update Badge appearance value "{{oldValue}}" to new semantic value "{{newValue}}".',
|
|
18
|
+
dynamicBadgeAppearance: 'Dynamic appearance prop values require manual review to ensure they use the new semantic values: neutral, information, inverse, danger, success.'
|
|
17
19
|
}
|
|
18
20
|
},
|
|
19
21
|
create(context) {
|
|
@@ -22,6 +24,11 @@ const rule = createLintRule({
|
|
|
22
24
|
*/
|
|
23
25
|
const lozengeImports = {}; // local name -> import source
|
|
24
26
|
|
|
27
|
+
/**
|
|
28
|
+
* Contains a map of imported Badge components.
|
|
29
|
+
*/
|
|
30
|
+
const badgeImports = {}; // local name -> import source
|
|
31
|
+
|
|
25
32
|
/**
|
|
26
33
|
* Check if a JSX attribute value is a literal false
|
|
27
34
|
*/
|
|
@@ -30,14 +37,25 @@ const rule = createLintRule({
|
|
|
30
37
|
}
|
|
31
38
|
|
|
32
39
|
/**
|
|
33
|
-
* Check if a JSX attribute value is dynamic (not a literal
|
|
40
|
+
* Check if a JSX attribute value is dynamic (not a static literal value)
|
|
41
|
+
* Can be used for any prop type (boolean, string, etc.)
|
|
34
42
|
*/
|
|
35
43
|
function isDynamicExpression(node) {
|
|
36
|
-
if (!node
|
|
44
|
+
if (!node) {
|
|
45
|
+
return false;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// If it's a plain literal (e.g., appearance="value"), it's not dynamic
|
|
49
|
+
if (node.type === 'Literal') {
|
|
37
50
|
return false;
|
|
38
51
|
}
|
|
39
|
-
|
|
40
|
-
|
|
52
|
+
|
|
53
|
+
// If it's an expression container with a non-literal expression, it's dynamic
|
|
54
|
+
if (node.type === 'JSXExpressionContainer') {
|
|
55
|
+
const expr = node.expression;
|
|
56
|
+
return expr && expr.type !== 'Literal';
|
|
57
|
+
}
|
|
58
|
+
return false;
|
|
41
59
|
}
|
|
42
60
|
|
|
43
61
|
/**
|
|
@@ -70,6 +88,21 @@ const rule = createLintRule({
|
|
|
70
88
|
return mapping[oldValue] || oldValue;
|
|
71
89
|
}
|
|
72
90
|
|
|
91
|
+
/**
|
|
92
|
+
* Map Badge old appearance values to new semantic appearance values
|
|
93
|
+
*/
|
|
94
|
+
function mapBadgeToNewAppearanceValue(oldValue) {
|
|
95
|
+
const mapping = {
|
|
96
|
+
added: 'success',
|
|
97
|
+
removed: 'danger',
|
|
98
|
+
default: 'neutral',
|
|
99
|
+
primary: 'information',
|
|
100
|
+
primaryInverted: 'inverse',
|
|
101
|
+
important: 'danger'
|
|
102
|
+
};
|
|
103
|
+
return mapping[oldValue] || oldValue;
|
|
104
|
+
}
|
|
105
|
+
|
|
73
106
|
/**
|
|
74
107
|
* Extract the string value from a JSX attribute value
|
|
75
108
|
*/
|
|
@@ -86,6 +119,25 @@ const rule = createLintRule({
|
|
|
86
119
|
return null;
|
|
87
120
|
}
|
|
88
121
|
|
|
122
|
+
/**
|
|
123
|
+
* Create a fixer function to replace an appearance prop value
|
|
124
|
+
* Handles both Literal and JSXExpressionContainer with Literal
|
|
125
|
+
*/
|
|
126
|
+
function createAppearanceFixer(attrValue, newValue) {
|
|
127
|
+
return fixer => {
|
|
128
|
+
if (!attrValue) {
|
|
129
|
+
return null;
|
|
130
|
+
}
|
|
131
|
+
if (attrValue.type === 'Literal') {
|
|
132
|
+
return fixer.replaceText(attrValue, `"${newValue}"`);
|
|
133
|
+
}
|
|
134
|
+
if (attrValue.type === 'JSXExpressionContainer' && 'expression' in attrValue && attrValue.expression && attrValue.expression.type === 'Literal') {
|
|
135
|
+
return fixer.replaceText(attrValue.expression, `"${newValue}"`);
|
|
136
|
+
}
|
|
137
|
+
return null;
|
|
138
|
+
};
|
|
139
|
+
}
|
|
140
|
+
|
|
89
141
|
/**
|
|
90
142
|
* Generate the replacement JSX element text
|
|
91
143
|
*/
|
|
@@ -147,6 +199,18 @@ const rule = createLintRule({
|
|
|
147
199
|
}
|
|
148
200
|
});
|
|
149
201
|
}
|
|
202
|
+
// Track Badge imports
|
|
203
|
+
if (moduleSource === '@atlaskit/badge' || moduleSource.startsWith('@atlaskit/badge')) {
|
|
204
|
+
node.specifiers.forEach(spec => {
|
|
205
|
+
if (spec.type === 'ImportDefaultSpecifier') {
|
|
206
|
+
badgeImports[spec.local.name] = moduleSource;
|
|
207
|
+
} else if (spec.type === 'ImportSpecifier' && spec.imported.type === 'Identifier') {
|
|
208
|
+
if (spec.imported.name === 'Badge' || spec.imported.name === 'default') {
|
|
209
|
+
badgeImports[spec.local.name] = moduleSource;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
});
|
|
213
|
+
}
|
|
150
214
|
}
|
|
151
215
|
},
|
|
152
216
|
JSXElement(node) {
|
|
@@ -158,6 +222,43 @@ const rule = createLintRule({
|
|
|
158
222
|
}
|
|
159
223
|
const elementName = node.openingElement.name.name;
|
|
160
224
|
|
|
225
|
+
// Handle Badge components
|
|
226
|
+
if (badgeImports[elementName]) {
|
|
227
|
+
// Find the appearance prop
|
|
228
|
+
const appearanceProp = node.openingElement.attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.type === 'JSXIdentifier' && attr.name.name === 'appearance');
|
|
229
|
+
if (!appearanceProp || appearanceProp.type !== 'JSXAttribute') {
|
|
230
|
+
// No appearance prop or it's a spread attribute, nothing to migrate
|
|
231
|
+
return;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
// Check if it's a dynamic expression
|
|
235
|
+
if (isDynamicExpression(appearanceProp.value)) {
|
|
236
|
+
context.report({
|
|
237
|
+
node: appearanceProp,
|
|
238
|
+
messageId: 'dynamicBadgeAppearance'
|
|
239
|
+
});
|
|
240
|
+
return;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
// Extract the string value
|
|
244
|
+
const stringValue = extractStringValue(appearanceProp.value);
|
|
245
|
+
if (stringValue && typeof stringValue === 'string') {
|
|
246
|
+
const mappedValue = mapBadgeToNewAppearanceValue(stringValue);
|
|
247
|
+
if (mappedValue !== stringValue) {
|
|
248
|
+
context.report({
|
|
249
|
+
node: appearanceProp,
|
|
250
|
+
messageId: 'updateBadgeAppearance',
|
|
251
|
+
data: {
|
|
252
|
+
oldValue: stringValue,
|
|
253
|
+
newValue: mappedValue
|
|
254
|
+
},
|
|
255
|
+
fix: createAppearanceFixer(appearanceProp.value, mappedValue)
|
|
256
|
+
});
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
return;
|
|
260
|
+
}
|
|
261
|
+
|
|
161
262
|
// Only process if this is a Lozenge component we've imported
|
|
162
263
|
if (!lozengeImports[elementName]) {
|
|
163
264
|
return;
|
|
@@ -178,14 +279,7 @@ const rule = createLintRule({
|
|
|
178
279
|
context.report({
|
|
179
280
|
node: appearanceProp,
|
|
180
281
|
messageId: 'updateAppearance',
|
|
181
|
-
fix:
|
|
182
|
-
if (appearanceProp.value.type === 'Literal') {
|
|
183
|
-
return fixer.replaceText(appearanceProp.value, `"${mappedValue}"`);
|
|
184
|
-
} else if (appearanceProp.value.type === 'JSXExpressionContainer' && appearanceProp.value.expression && appearanceProp.value.expression.type === 'Literal') {
|
|
185
|
-
return fixer.replaceText(appearanceProp.value.expression, `"${mappedValue}"`);
|
|
186
|
-
}
|
|
187
|
-
return null;
|
|
188
|
-
}
|
|
282
|
+
fix: createAppearanceFixer(appearanceProp.value, mappedValue)
|
|
189
283
|
});
|
|
190
284
|
}
|
|
191
285
|
}
|
|
@@ -5,6 +5,7 @@ const radiusTokenMap = {
|
|
|
5
5
|
'6px': 'radius.medium',
|
|
6
6
|
'8px': 'radius.large',
|
|
7
7
|
'12px': 'radius.xlarge',
|
|
8
|
+
'16px': 'radius.xxlarge',
|
|
8
9
|
'50%': 'radius.full',
|
|
9
10
|
'100%': 'radius.full',
|
|
10
11
|
2: 'radius.xsmall',
|
|
@@ -13,11 +14,13 @@ const radiusTokenMap = {
|
|
|
13
14
|
6: 'radius.medium',
|
|
14
15
|
8: 'radius.large',
|
|
15
16
|
12: 'radius.xlarge',
|
|
17
|
+
16: 'radius.xxlarge',
|
|
16
18
|
'0.125rem': 'radius.xsmall',
|
|
17
19
|
'0.25rem': 'radius.small',
|
|
18
20
|
'0.375rem': 'radius.medium',
|
|
19
21
|
'0.5rem': 'radius.large',
|
|
20
|
-
'0.75rem': 'radius.xlarge'
|
|
22
|
+
'0.75rem': 'radius.xlarge',
|
|
23
|
+
'1rem': 'radius.xxlarge'
|
|
21
24
|
};
|
|
22
25
|
const borderWidthTokenMap = {
|
|
23
26
|
'1px': 'border.width'
|
|
@@ -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::
|
|
3
|
+
* @codegen <<SignedSource::df988d512376c1317e5f7a350ad19fb9>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -15,7 +15,7 @@ var rules = {
|
|
|
15
15
|
'@atlaskit/design-system/ensure-icon-color': 'error',
|
|
16
16
|
'@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
|
|
17
17
|
'@atlaskit/design-system/icon-label': 'warn',
|
|
18
|
-
'@atlaskit/design-system/lozenge-
|
|
18
|
+
'@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
|
|
19
19
|
'@atlaskit/design-system/no-banned-imports': 'error',
|
|
20
20
|
'@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
|
|
21
21
|
'@atlaskit/design-system/no-css-tagged-template-expression': 'error',
|
|
@@ -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::
|
|
3
|
+
* @codegen <<SignedSource::2dee8518d733b0b364809d0f5641afda>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -14,7 +14,7 @@ var rules = {
|
|
|
14
14
|
'@atlaskit/design-system/ensure-icon-color': 'error',
|
|
15
15
|
'@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
|
|
16
16
|
'@atlaskit/design-system/icon-label': 'warn',
|
|
17
|
-
'@atlaskit/design-system/lozenge-
|
|
17
|
+
'@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
|
|
18
18
|
'@atlaskit/design-system/no-banned-imports': 'error',
|
|
19
19
|
'@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
|
|
20
20
|
'@atlaskit/design-system/no-css-tagged-template-expression': 'error',
|
|
@@ -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::
|
|
3
|
+
* @codegen <<SignedSource::7ed1a8eeaaea559980cb2c533ba9a2e6>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -11,7 +11,7 @@ var rules = {
|
|
|
11
11
|
'@atlaskit/design-system/consistent-css-prop-usage': 'error',
|
|
12
12
|
'@atlaskit/design-system/ensure-design-token-usage': 'error',
|
|
13
13
|
'@atlaskit/design-system/icon-label': 'warn',
|
|
14
|
-
'@atlaskit/design-system/lozenge-
|
|
14
|
+
'@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
|
|
15
15
|
'@atlaskit/design-system/no-banned-imports': 'error',
|
|
16
16
|
'@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
|
|
17
17
|
'@atlaskit/design-system/no-deprecated-apis': 'error',
|
|
@@ -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::
|
|
3
|
+
* @codegen <<SignedSource::32a0942d7edc5a3fdc70dd0833bb8aca>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -10,7 +10,7 @@ var rules = {
|
|
|
10
10
|
'@atlaskit/design-system/consistent-css-prop-usage': 'error',
|
|
11
11
|
'@atlaskit/design-system/ensure-design-token-usage': 'error',
|
|
12
12
|
'@atlaskit/design-system/icon-label': 'warn',
|
|
13
|
-
'@atlaskit/design-system/lozenge-
|
|
13
|
+
'@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
|
|
14
14
|
'@atlaskit/design-system/no-banned-imports': 'error',
|
|
15
15
|
'@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
|
|
16
16
|
'@atlaskit/design-system/no-deprecated-apis': 'error',
|
|
@@ -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::
|
|
3
|
+
* @codegen <<SignedSource::c74b833590d4eb693616a3fcbf2e335a>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -11,7 +11,7 @@ import ensureDesignTokenUsagePreview from './ensure-design-token-usage-preview';
|
|
|
11
11
|
import ensureIconColor from './ensure-icon-color';
|
|
12
12
|
import ensureProperXcssUsage from './ensure-proper-xcss-usage';
|
|
13
13
|
import iconLabel from './icon-label';
|
|
14
|
-
import
|
|
14
|
+
import lozengeIsBoldAndLozengeBadgeAppearanceMigration from './lozenge-isBold-and-lozenge-badge-appearance-migration';
|
|
15
15
|
import noBannedImports from './no-banned-imports';
|
|
16
16
|
import noBooleanAutofocusOnModalDialog from './no-boolean-autofocus-on-modal-dialog';
|
|
17
17
|
import noCssTaggedTemplateExpression from './no-css-tagged-template-expression';
|
|
@@ -81,7 +81,7 @@ export var rules = {
|
|
|
81
81
|
'ensure-icon-color': ensureIconColor,
|
|
82
82
|
'ensure-proper-xcss-usage': ensureProperXcssUsage,
|
|
83
83
|
'icon-label': iconLabel,
|
|
84
|
-
'lozenge-
|
|
84
|
+
'lozenge-isBold-and-lozenge-badge-appearance-migration': lozengeIsBoldAndLozengeBadgeAppearanceMigration,
|
|
85
85
|
'no-banned-imports': noBannedImports,
|
|
86
86
|
'no-boolean-autofocus-on-modal-dialog': noBooleanAutofocusOnModalDialog,
|
|
87
87
|
'no-css-tagged-template-expression': noCssTaggedTemplateExpression,
|