Skip to content

Commit 63aef23

Browse files
gitdallasgitdallas
authored
fixes to hasAnimations codemod (#845)
* fixes to hasAnimations codemod Signed-off-by: gitdallas <[email protected]> * make use of some helper functions Signed-off-by: gitdallas <[email protected]> --------- Signed-off-by: gitdallas <[email protected]>
1 parent e558b8d commit 63aef23

File tree

5 files changed

+193
-184
lines changed

5 files changed

+193
-184
lines changed

‎packages/eslint-plugin-pf-codemods/src/rules/v6/enableAnimations/enable-animations.md‎

Lines changed: 8 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,48 +2,30 @@
22

33
This rule adds the `hasAnimations` prop to PatternFly components that support animations. This is an optional enhancement that enables smoother transitions and animations in your UI components.
44

5+
**⚠️ Important:** Enabling animations may change the DOM structure of some components. This could affect CSS selectors, testing queries, or other code that relies on the specific DOM structure. Review your code after enabling animations to ensure compatibility.
6+
57
The following components will have `hasAnimations` added:
68
- AlertGroup
7-
- DualListSelector
9+
- DualListSelector (only when `isTree` prop has a truthy value)
810
- FormFieldGroupExpandable
9-
- SearchInput
11+
- SearchInputExpandable
1012
- TreeView
1113
- Table (from @patternfly/react-table)
1214

15+
**Note:** For DualListSelector, the `hasAnimations` prop will only be added when the `isTree` prop is present and has a truthy value (e.g., `isTree`, `isTree={true}`, `isTree="yes"`, `isTree={1}`). It will not be added when `isTree` is falsy (e.g., `isTree={false}`, `isTree=""`, `isTree={0}`) or when the `isTree` prop is not present at all.
16+
1317
This rule can only run using the `--only enable-animations` option.
1418

1519
#### Examples
1620

1721
In:
1822

1923
```jsx
20-
import { AlertGroup, TreeView } from '@patternfly/react-core';
21-
import { Table } from '@patternfly/react-table';
22-
23-
export const Example = () => (
24-
<>
25-
<AlertGroup isLiveRegion>
26-
{/* alerts */}
27-
</AlertGroup>
28-
<TreeView />
29-
<Table />
30-
</>
31-
);
24+
%inputExample%
3225
```
3326

3427
Out:
3528

3629
```jsx
37-
import { AlertGroup, TreeView } from '@patternfly/react-core';
38-
import { Table } from '@patternfly/react-table';
39-
40-
export const Example = () => (
41-
<>
42-
<AlertGroup hasAnimations isLiveRegion>
43-
{/* alerts */}
44-
</AlertGroup>
45-
<TreeView hasAnimations />
46-
<Table hasAnimations />
47-
</>
48-
);
30+
%outputExample%
4931
```

‎packages/eslint-plugin-pf-codemods/src/rules/v6/enableAnimations/enable-animations.test.ts‎

Lines changed: 123 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -1,152 +1,128 @@
11
const ruleTester = require("../../ruletester");
22
import * as rule from "./enable-animations";
33

4+
const valid = [
5+
// Components not in target list should be ignored
6+
"<AlertGroup />",
7+
"import { AlertGroup } from '@patternfly/react-core'; <AlertGroup hasAnimations />",
8+
"import { AlertGroup } from '@patternfly/react-core'; <AlertGroup hasAnimations={true} />",
9+
"import { Table } from '@patternfly/react-table'; <Table hasAnimations />",
10+
// Component not in target components
11+
"import { Button } from '@patternfly/react-core'; <Button />",
12+
// DualListSelector without isTree should not get hasAnimations
13+
"import { DualListSelector } from '@patternfly/react-core'; <DualListSelector />",
14+
// DualListSelector with isTree={false} should not get hasAnimations
15+
"import { DualListSelector } from '@patternfly/react-core'; <DualListSelector isTree={false} />",
16+
// DualListSelector with isTree and hasAnimations already present
17+
"import { DualListSelector } from '@patternfly/react-core'; <DualListSelector isTree hasAnimations />",
18+
];
19+
20+
const invalid = [
21+
{
22+
code: "import { AlertGroup } from '@patternfly/react-core'; <AlertGroup />",
23+
output: "import { AlertGroup } from '@patternfly/react-core'; <AlertGroup hasAnimations />",
24+
errors: [
25+
{
26+
message: "Consider adding hasAnimations prop to enable component animations.",
27+
type: "JSXOpeningElement"
28+
}
29+
]
30+
},
31+
{
32+
code: "import { DualListSelector } from '@patternfly/react-core'; <DualListSelector isTree />",
33+
output: "import { DualListSelector } from '@patternfly/react-core'; <DualListSelector isTree hasAnimations />",
34+
errors: [
35+
{
36+
message: "Consider adding hasAnimations prop to enable component animations.",
37+
type: "JSXOpeningElement"
38+
}
39+
]
40+
},
41+
{
42+
code: "import { DualListSelector } from '@patternfly/react-core'; <DualListSelector isTree={true} />",
43+
output: "import { DualListSelector } from '@patternfly/react-core'; <DualListSelector isTree={true} hasAnimations />",
44+
errors: [
45+
{
46+
message: "Consider adding hasAnimations prop to enable component animations.",
47+
type: "JSXOpeningElement"
48+
}
49+
]
50+
},
51+
{
52+
code: "import { TreeView } from '@patternfly/react-core'; <TreeView />",
53+
output: "import { TreeView } from '@patternfly/react-core'; <TreeView hasAnimations />",
54+
errors: [
55+
{
56+
message: "Consider adding hasAnimations prop to enable component animations.",
57+
type: "JSXOpeningElement"
58+
}
59+
]
60+
},
61+
{
62+
code: "import { SearchInputExpandable } from '@patternfly/react-core'; <SearchInputExpandable />",
63+
output: "import { SearchInputExpandable } from '@patternfly/react-core'; <SearchInputExpandable hasAnimations />",
64+
errors: [
65+
{
66+
message: "Consider adding hasAnimations prop to enable component animations.",
67+
type: "JSXOpeningElement"
68+
}
69+
]
70+
},
71+
{
72+
code: "import { FormFieldGroupExpandable } from '@patternfly/react-core'; <FormFieldGroupExpandable />",
73+
output: "import { FormFieldGroupExpandable } from '@patternfly/react-core'; <FormFieldGroupExpandable hasAnimations />",
74+
errors: [
75+
{
76+
message: "Consider adding hasAnimations prop to enable component animations.",
77+
type: "JSXOpeningElement"
78+
}
79+
]
80+
},
81+
{
82+
code: "import { Table } from '@patternfly/react-table'; <Table />",
83+
output: "import { Table } from '@patternfly/react-table'; <Table hasAnimations />",
84+
errors: [
85+
{
86+
message: "Consider adding hasAnimations prop to enable component animations.",
87+
type: "JSXOpeningElement"
88+
}
89+
]
90+
},
91+
{
92+
code: `import { AlertGroup, TreeView } from '@patternfly/react-core';
93+
<>
94+
<AlertGroup />
95+
<TreeView />
96+
</>`,
97+
output: `import { AlertGroup, TreeView } from '@patternfly/react-core';
98+
<>
99+
<AlertGroup hasAnimations />
100+
<TreeView hasAnimations />
101+
</>`,
102+
errors: [
103+
{
104+
message: "Consider adding hasAnimations prop to enable component animations.",
105+
type: "JSXOpeningElement"
106+
},
107+
{
108+
message: "Consider adding hasAnimations prop to enable component animations.",
109+
type: "JSXOpeningElement"
110+
}
111+
]
112+
},
113+
{
114+
code: "import { AlertGroup } from '@patternfly/react-core'; <AlertGroup isLiveRegion />",
115+
output: "import { AlertGroup } from '@patternfly/react-core'; <AlertGroup isLiveRegion hasAnimations />",
116+
errors: [
117+
{
118+
message: "Consider adding hasAnimations prop to enable component animations.",
119+
type: "JSXOpeningElement"
120+
}
121+
]
122+
}
123+
];
124+
4125
ruleTester.run("enable-animations", rule, {
5-
valid: [
6-
// No imports, should not trigger
7-
{
8-
code: `<AlertGroup />`,
9-
},
10-
// Already has hasAnimations prop
11-
{
12-
code: `import { AlertGroup } from '@patternfly/react-core'; <AlertGroup hasAnimations />`,
13-
},
14-
// Already has hasAnimations with value
15-
{
16-
code: `import { AlertGroup } from '@patternfly/react-core'; <AlertGroup hasAnimations={true} />`,
17-
},
18-
// Table already has hasAnimations
19-
{
20-
code: `import { Table } from '@patternfly/react-table'; <Table hasAnimations />`,
21-
},
22-
// Non-target component should not be affected
23-
{
24-
code: `import { Button } from '@patternfly/react-core'; <Button />`,
25-
},
26-
],
27-
invalid: [
28-
// AlertGroup without hasAnimations
29-
{
30-
code: `import { AlertGroup } from '@patternfly/react-core'; <AlertGroup />`,
31-
output: `import { AlertGroup } from '@patternfly/react-core'; <AlertGroup hasAnimations />`,
32-
errors: [
33-
{
34-
message: "Consider adding hasAnimations prop to enable component animations.",
35-
type: "JSXOpeningElement",
36-
},
37-
],
38-
},
39-
// DualListSelector without hasAnimations
40-
{
41-
code: `import { DualListSelector } from '@patternfly/react-core'; <DualListSelector />`,
42-
output: `import { DualListSelector } from '@patternfly/react-core'; <DualListSelector hasAnimations />`,
43-
errors: [
44-
{
45-
message: "Consider adding hasAnimations prop to enable component animations.",
46-
type: "JSXOpeningElement",
47-
},
48-
],
49-
},
50-
// TreeView without hasAnimations
51-
{
52-
code: `import { TreeView } from '@patternfly/react-core'; <TreeView />`,
53-
output: `import { TreeView } from '@patternfly/react-core'; <TreeView hasAnimations />`,
54-
errors: [
55-
{
56-
message: "Consider adding hasAnimations prop to enable component animations.",
57-
type: "JSXOpeningElement",
58-
},
59-
],
60-
},
61-
// SearchInput without hasAnimations
62-
{
63-
code: `import { SearchInput } from '@patternfly/react-core'; <SearchInput />`,
64-
output: `import { SearchInput } from '@patternfly/react-core'; <SearchInput hasAnimations />`,
65-
errors: [
66-
{
67-
message: "Consider adding hasAnimations prop to enable component animations.",
68-
type: "JSXOpeningElement",
69-
},
70-
],
71-
},
72-
// FormFieldGroupExpandable without hasAnimations
73-
{
74-
code: `import { FormFieldGroupExpandable } from '@patternfly/react-core'; <FormFieldGroupExpandable />`,
75-
output: `import { FormFieldGroupExpandable } from '@patternfly/react-core'; <FormFieldGroupExpandable hasAnimations />`,
76-
errors: [
77-
{
78-
message: "Consider adding hasAnimations prop to enable component animations.",
79-
type: "JSXOpeningElement",
80-
},
81-
],
82-
},
83-
// Table from react-table without hasAnimations
84-
{
85-
code: `import { Table } from '@patternfly/react-table'; <Table />`,
86-
output: `import { Table } from '@patternfly/react-table'; <Table hasAnimations />`,
87-
errors: [
88-
{
89-
message: "Consider adding hasAnimations prop to enable component animations.",
90-
type: "JSXOpeningElement",
91-
},
92-
],
93-
},
94-
// Multiple components in one file
95-
{
96-
code: `import { AlertGroup, TreeView } from '@patternfly/react-core';
97-
<>
98-
<AlertGroup />
99-
<TreeView />
100-
</>`,
101-
output: `import { AlertGroup, TreeView } from '@patternfly/react-core';
102-
<>
103-
<AlertGroup hasAnimations />
104-
<TreeView hasAnimations />
105-
</>`,
106-
errors: [
107-
{
108-
message: "Consider adding hasAnimations prop to enable component animations.",
109-
type: "JSXOpeningElement",
110-
},
111-
{
112-
message: "Consider adding hasAnimations prop to enable component animations.",
113-
type: "JSXOpeningElement",
114-
},
115-
],
116-
},
117-
// Component with existing props
118-
{
119-
code: `import { AlertGroup } from '@patternfly/react-core'; <AlertGroup isLiveRegion />`,
120-
output: `import { AlertGroup } from '@patternfly/react-core'; <AlertGroup hasAnimations isLiveRegion />`,
121-
errors: [
122-
{
123-
message: "Consider adding hasAnimations prop to enable component animations.",
124-
type: "JSXOpeningElement",
125-
},
126-
],
127-
},
128-
// Self-closing and regular tags
129-
{
130-
code: `import { DualListSelector } from '@patternfly/react-core';
131-
<>
132-
<DualListSelector />
133-
<DualListSelector></DualListSelector>
134-
</>`,
135-
output: `import { DualListSelector } from '@patternfly/react-core';
136-
<>
137-
<DualListSelector hasAnimations />
138-
<DualListSelector hasAnimations></DualListSelector>
139-
</>`,
140-
errors: [
141-
{
142-
message: "Consider adding hasAnimations prop to enable component animations.",
143-
type: "JSXOpeningElement",
144-
},
145-
{
146-
message: "Consider adding hasAnimations prop to enable component animations.",
147-
type: "JSXOpeningElement",
148-
},
149-
],
150-
},
151-
],
126+
valid: valid,
127+
invalid: invalid,
152128
});

0 commit comments

Comments
 (0)