Skip to content

Commit 1e685a2

Browse files
adamviktorathatblindgeye
adamviktora
and
thatblindgeye
authored
feat(tokens): warn about old react-tokens usage (#739)
* feat(tokens): warn about old react-tokens usage * fix: description link Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> --------- Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>
1 parent 1feccd3 commit 1e685a2

File tree

8 files changed

+3834
-5
lines changed

8 files changed

+3834
-5
lines changed

‎packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export const warningRules = [
4545
"tabs-update-markup",
4646
"tabs-warn-children-type-changed",
4747
"Th-Td-warn-update-markup",
48+
"tokens-warn",
4849
"toolbarLabelGroupContent-updated-markup",
4950
"tooltip-warn-triggerRef-may-be-required",
5051
"treeView-warn-selectable-styling-modifier-removed",

‎packages/eslint-plugin-pf-codemods/src/rules/helpers/getFromPackage.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
Statement,
66
Directive,
77
ExportNamedDeclaration,
8-
ImportDefaultSpecifier,
98
ImportSpecifier,
109
ExportSpecifier,
1110
} from "estree-jsx";
@@ -92,7 +91,7 @@ export function getDefaultImportsFromPackage(
9291
context: Rule.RuleContext,
9392
packageName: string,
9493
componentName: string = ""
95-
): ImportDefaultSpecifier[] {
94+
): ImportDefaultSpecifierWithParent[] {
9695
const astBody = context.getSourceCode().ast.body;
9796

9897
const importDeclarations = astBody.filter(
@@ -111,7 +110,7 @@ export function getDefaultImportsFromPackage(
111110
imp.source.value?.toString().includes(componentName)) &&
112111
imp.specifiers[0]?.type === "ImportDefaultSpecifier"
113112
)
114-
.map((imp) => imp.specifiers[0]) as ImportDefaultSpecifier[];
113+
.map((imp) => imp.specifiers[0]) as ImportDefaultSpecifierWithParent[];
115114
}
116115

117116
export function getAllImportsFromPackage(
@@ -127,5 +126,5 @@ export function getAllImportsFromPackage(
127126
componentNames.includes(imp.imported.name)
128127
);
129128

130-
return [filteredImports, defaultImports as ImportDefaultSpecifierWithParent[]].flat();
129+
return [filteredImports, defaultImports].flat();
131130
}

‎packages/eslint-plugin-pf-codemods/src/rules/helpers/pfPackageMatches.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export function pfPackageMatches(
1616
parts[1] +
1717
"(/dist/(esm|js|dynamic))?" +
1818
(parts[2] ? "/" + parts[2] : "") +
19-
(parts[1] === "react-component-groups"
19+
(["react-component-groups", "react-tokens"].includes(parts[1])
2020
? `(/.*)?$`
2121
: `(/(components|helpers${
2222
parts[1] === "react-icons" ? "|icons" : ""

‎packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
### tokens-warn
2+
3+
We have updated our CSS tokens. About half of our tokens have been replaced with newer ones. To find a suitable replacement token, check our [v6 token documentation](https://staging-v6.patternfly.org/tokens/all-patternfly-tokens).
4+
5+
#### Examples
6+
7+
In:
8+
9+
```jsx
10+
%inputExample%
11+
```
12+
13+
Out:
14+
15+
```jsx
16+
%outputExample%
17+
```

‎packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.test.ts

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
const ruleTester = require("../../ruletester");
2+
import * as rule from "./tokens-warn";
3+
4+
const getWarnMessage = (tokenName: string) =>
5+
`${tokenName} is an old CSS token. About half of our tokens have been replaced with newer ones. To find a suitable replacement token, check our new documentation https://staging-v6.patternfly.org/tokens/all-patternfly-tokens.`;
6+
7+
ruleTester.run("tokens-warn", rule, {
8+
valid: [
9+
// token existing in V6
10+
{
11+
code: `import c_about_modal_box from '@patternfly/react-tokens/dist/esm/c_about_modal_box';`,
12+
},
13+
// token existing in V6
14+
{
15+
code: `import { c_about_modal_box } from '@patternfly/react-tokens';`,
16+
},
17+
],
18+
invalid: [
19+
{
20+
code: `import { global_info_color_100 } from '@patternfly/react-tokens';`,
21+
output: `import { global_info_color_100 } from '@patternfly/react-tokens';`,
22+
errors: [
23+
{
24+
message: getWarnMessage("global_info_color_100"),
25+
type: "ImportSpecifier",
26+
},
27+
],
28+
},
29+
// with alias
30+
{
31+
code: `import { global_info_color_100 as infoColor } from '@patternfly/react-tokens';`,
32+
output: `import { global_info_color_100 as infoColor } from '@patternfly/react-tokens';`,
33+
errors: [
34+
{
35+
message: getWarnMessage("global_info_color_100"),
36+
type: "ImportSpecifier",
37+
},
38+
],
39+
},
40+
{
41+
// named import - esm
42+
code: `import { global_info_color_100 } from '@patternfly/react-tokens/dist/esm/global_info_color_100';`,
43+
output: `import { global_info_color_100 } from '@patternfly/react-tokens/dist/esm/global_info_color_100';`,
44+
errors: [
45+
{
46+
message: getWarnMessage("global_info_color_100"),
47+
type: "ImportSpecifier",
48+
},
49+
],
50+
},
51+
{
52+
// named import - js
53+
code: `import { global_info_color_100 } from '@patternfly/react-tokens/dist/js/global_info_color_100';`,
54+
output: `import { global_info_color_100 } from '@patternfly/react-tokens/dist/js/global_info_color_100';`,
55+
errors: [
56+
{
57+
message: getWarnMessage("global_info_color_100"),
58+
type: "ImportSpecifier",
59+
},
60+
],
61+
},
62+
{
63+
// default import - esm
64+
code: `import global_info_color_100 from '@patternfly/react-tokens/dist/esm/global_info_color_100';`,
65+
output: `import global_info_color_100 from '@patternfly/react-tokens/dist/esm/global_info_color_100';`,
66+
errors: [
67+
{
68+
message: getWarnMessage("global_info_color_100"),
69+
type: "ImportDeclaration",
70+
},
71+
],
72+
},
73+
{
74+
// default import - js
75+
code: `import global_info_color_100 from '@patternfly/react-tokens/dist/js/global_info_color_100';`,
76+
output: `import global_info_color_100 from '@patternfly/react-tokens/dist/js/global_info_color_100';`,
77+
errors: [
78+
{
79+
message: getWarnMessage("global_info_color_100"),
80+
type: "ImportDeclaration",
81+
},
82+
],
83+
},
84+
{
85+
// default import with custom name
86+
code: `import someToken from '@patternfly/react-tokens/dist/esm/global_info_color_100';`,
87+
output: `import someToken from '@patternfly/react-tokens/dist/esm/global_info_color_100';`,
88+
errors: [
89+
{
90+
message: getWarnMessage("global_info_color_100"),
91+
type: "ImportDeclaration",
92+
},
93+
],
94+
},
95+
],
96+
});

0 commit comments

Comments
 (0)