Skip to content

Commit 52bf91b

Browse files
devongovettdevongovett
authored
feat: Add codemod for ActionGroup (#7396)
* feat: Add codemod for ActionGroup * update snapshot * Fix Item and ActionGroup imports
1 parent baa330f commit 52bf91b

File tree

5 files changed

+401
-3
lines changed

5 files changed

+401
-3
lines changed

‎packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/actiongroup.test.ts.snap

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Comments out unsupported props 1`] = `
4+
"import { ActionButtonGroup, ActionButton } from "@react-spectrum/s2";
5+
// TODO(S2-upgrade): overflowMode has not been implemented yet.
6+
// TODO(S2-upgrade): buttonLabelBehavior has not been implemented yet.
7+
// TODO(S2-upgrade): summaryIcon has not been implemented yet.
8+
<ActionButtonGroup>
9+
<ActionButton key="add">Add</ActionButton>
10+
<ActionButton key="delete">Delete</ActionButton>
11+
<ActionButton key="edit">Edit</ActionButton>
12+
</ActionButtonGroup>"
13+
`;
14+
15+
exports[`Converts ActionGroup to ActionButtonGroup 1`] = `
16+
"import { ActionButtonGroup, ActionButton } from "@react-spectrum/s2";
17+
<ActionButtonGroup>
18+
<ActionButton key="add" onPress={() => onAction("add")}>Add</ActionButton>
19+
<ActionButton key="delete" onPress={() => onAction("delete")}>Delete</ActionButton>
20+
<ActionButton key="edit" onPress={() => onAction("edit")}>Edit</ActionButton>
21+
</ActionButtonGroup>"
22+
`;
23+
24+
exports[`Converts ActionGroup to ActionButtonGroup with disabledKeys 1`] = `
25+
"import { ActionButtonGroup, ActionButton } from "@react-spectrum/s2";
26+
27+
function Example({disabledKeys}) {
28+
let _disabledKeys = new Set(disabledKeys);
29+
return (
30+
(<ActionButtonGroup>
31+
<ActionButton
32+
key="add"
33+
onPress={() => onAction("add")}
34+
isDisabled={_disabledKeys.has("add")}>Add</ActionButton>
35+
<ActionButton
36+
key="delete"
37+
onPress={() => onAction("delete")}
38+
isDisabled={_disabledKeys.has("delete")}>Delete</ActionButton>
39+
<ActionButton
40+
key="edit"
41+
onPress={() => onAction("edit")}
42+
isDisabled={_disabledKeys.has("edit")}>Edit</ActionButton>
43+
</ActionButtonGroup>)
44+
);
45+
}"
46+
`;
47+
48+
exports[`Converts ActionGroup to ActionButtonGroup with dynamic collections 1`] = `
49+
"import { ActionButtonGroup, ActionButton } from "@react-spectrum/s2";
50+
<ActionButtonGroup>
51+
{items.map(
52+
item => <ActionButton key={item.key ?? item.id} onPress={() => onAction(item.key ?? item.id)}>{item.name}</ActionButton>
53+
)}
54+
</ActionButtonGroup>"
55+
`;
56+
57+
exports[`Converts ActionGroup to ActionButtonGroup with dynamic collections and custom key 1`] = `
58+
"import { ActionButtonGroup, ActionButton } from "@react-spectrum/s2";
59+
<ActionButtonGroup>
60+
{items.map(
61+
item => <ActionButton key={item._id} onPress={() => onAction(item._id)}>{item.name}</ActionButton>
62+
)}
63+
</ActionButtonGroup>"
64+
`;
65+
66+
exports[`Converts ActionGroup to ToggleButtonGroup 1`] = `
67+
"import { ToggleButtonGroup, ToggleButton } from "@react-spectrum/s2";
68+
<ToggleButtonGroup selectionMode="single" onSelectionChange={onSelectionChange}>
69+
<ToggleButton id="add">Add</ToggleButton>
70+
<ToggleButton id="delete">Delete</ToggleButton>
71+
<ToggleButton id="edit">Edit</ToggleButton>
72+
</ToggleButtonGroup>"
73+
`;
74+
75+
exports[`Converts ActionGroup to ToggleButtonGroup with disabledKeys 1`] = `
76+
"import { ToggleButtonGroup, ToggleButton } from "@react-spectrum/s2";
77+
78+
function Example({disabledKeys}) {
79+
let _disabledKeys = new Set(disabledKeys);
80+
return (
81+
(<ToggleButtonGroup selectionMode="single" onSelectionChange={onSelectionChange}>
82+
<ToggleButton id="add" isDisabled={_disabledKeys.has("add")}>Add</ToggleButton>
83+
<ToggleButton id="delete" isDisabled={_disabledKeys.has("delete")}>Delete</ToggleButton>
84+
<ToggleButton id="edit" isDisabled={_disabledKeys.has("edit")}>Edit</ToggleButton>
85+
</ToggleButtonGroup>)
86+
);
87+
}"
88+
`;
89+
90+
exports[`Converts ActionGroup to ToggleButtonGroup with dynamic collections 1`] = `
91+
"import { ToggleButtonGroup, ToggleButton } from "@react-spectrum/s2";
92+
<ToggleButtonGroup selectionMode="single" onSelectionChange={onSelectionChange}>
93+
{items.map(
94+
item => <ToggleButton key={item.key ?? item.id} id={item.key ?? item.id}>{item.name}</ToggleButton>
95+
)}
96+
</ToggleButtonGroup>"
97+
`;
98+
99+
exports[`Converts ActionGroup to ToggleButtonGroup with dynamic collections and custom key 1`] = `
100+
"import { ToggleButtonGroup, ToggleButton } from "@react-spectrum/s2";
101+
<ToggleButtonGroup selectionMode="single" onSelectionChange={onSelectionChange}>
102+
{items.map(
103+
item => <ToggleButton key={item._id} id={item._id}>{item.name}</ToggleButton>
104+
)}
105+
</ToggleButtonGroup>"
106+
`;

‎packages/dev/codemods/src/s1-to-s2/__tests__/actiongroup.test.ts

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
// @ts-ignore
2+
import {defineSnapshotTest} from 'jscodeshift/dist/testUtils';
3+
import transform from '../src/codemods/codemod';
4+
5+
const test = (name: string, input: string) => {
6+
defineSnapshotTest(transform, {}, input, name);
7+
};
8+
9+
test('Converts ActionGroup to ActionButtonGroup', `
10+
import {ActionGroup, Item} from '@adobe/react-spectrum';
11+
<ActionGroup onAction={onAction}>
12+
<Item key="add">Add</Item>
13+
<Item key="delete">Delete</Item>
14+
<Item key="edit">Edit</Item>
15+
</ActionGroup>
16+
`);
17+
18+
test('Converts ActionGroup to ActionButtonGroup with disabledKeys', `
19+
import {ActionGroup, Item} from '@adobe/react-spectrum';
20+
21+
function Example({disabledKeys}) {
22+
return (
23+
<ActionGroup onAction={onAction} disabledKeys={disabledKeys}>
24+
<Item key="add">Add</Item>
25+
<Item key="delete">Delete</Item>
26+
<Item key="edit">Edit</Item>
27+
</ActionGroup>
28+
);
29+
}
30+
`);
31+
32+
test('Converts ActionGroup to ActionButtonGroup with dynamic collections', `
33+
import {ActionGroup, Item} from '@adobe/react-spectrum';
34+
<ActionGroup onAction={onAction} items={items}>
35+
{item => <Item>{item.name}</Item>}
36+
</ActionGroup>
37+
`);
38+
39+
test('Converts ActionGroup to ActionButtonGroup with dynamic collections and custom key', `
40+
import {ActionGroup, Item} from '@adobe/react-spectrum';
41+
<ActionGroup onAction={onAction} items={items}>
42+
{item => <Item key={item._id}>{item.name}</Item>}
43+
</ActionGroup>
44+
`);
45+
46+
test('Converts ActionGroup to ToggleButtonGroup', `
47+
import {ActionGroup, Item} from '@adobe/react-spectrum';
48+
<ActionGroup selectionMode="single" onSelectionChange={onSelectionChange}>
49+
<Item key="add">Add</Item>
50+
<Item key="delete">Delete</Item>
51+
<Item key="edit">Edit</Item>
52+
</ActionGroup>
53+
`);
54+
55+
test('Converts ActionGroup to ToggleButtonGroup with disabledKeys', `
56+
import {ActionGroup, Item} from '@adobe/react-spectrum';
57+
58+
function Example({disabledKeys}) {
59+
return (
60+
<ActionGroup selectionMode="single" onSelectionChange={onSelectionChange} disabledKeys={disabledKeys}>
61+
<Item key="add">Add</Item>
62+
<Item key="delete">Delete</Item>
63+
<Item key="edit">Edit</Item>
64+
</ActionGroup>
65+
);
66+
}
67+
`);
68+
69+
test('Converts ActionGroup to ToggleButtonGroup with dynamic collections', `
70+
import {ActionGroup, Item} from '@adobe/react-spectrum';
71+
<ActionGroup selectionMode="single" onSelectionChange={onSelectionChange} items={items}>
72+
{item => <Item>{item.name}</Item>}
73+
</ActionGroup>
74+
`);
75+
76+
test('Converts ActionGroup to ToggleButtonGroup with dynamic collections and custom key', `
77+
import {ActionGroup, Item} from '@adobe/react-spectrum';
78+
<ActionGroup selectionMode="single" onSelectionChange={onSelectionChange} items={items}>
79+
{item => <Item key={item._id}>{item.name}</Item>}
80+
</ActionGroup>
81+
`);
82+
83+
test('Comments out unsupported props', `
84+
import {ActionGroup, Item} from '@adobe/react-spectrum';
85+
<ActionGroup overflowMode="collapse" buttonLabelBehavior="collapse" summaryIcon={<Icon />}>
86+
<Item key="add">Add</Item>
87+
<Item key="delete">Delete</Item>
88+
<Item key="edit">Edit</Item>
89+
</ActionGroup>
90+
`);

‎packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,10 @@ type FunctionInfo =
7979
| {
8080
name: 'updateDialogChild',
8181
args: {}
82+
}
83+
| {
84+
name: 'updateActionGroup',
85+
args: {}
8286
};
8387

8488
type Change = {
@@ -116,6 +120,39 @@ export const changes: ChangesJSON = {
116120
}
117121
]
118122
},
123+
ActionGroup: {
124+
changes: [
125+
{
126+
description: 'Comment out overflowMode',
127+
reason: 'It has not been implemented yet',
128+
function: {
129+
name: 'commentOutProp',
130+
args: {propToComment: 'overflowMode'}
131+
}
132+
},
133+
{
134+
description: 'Comment out buttonLabelBehavior',
135+
reason: 'It has not been implemented yet',
136+
function: {
137+
name: 'commentOutProp',
138+
args: {propToComment: 'buttonLabelBehavior'}
139+
}
140+
},
141+
{
142+
description: 'Comment out summaryIcon',
143+
reason: 'It has not been implemented yet',
144+
function: {
145+
name: 'commentOutProp',
146+
args: {propToComment: 'summaryIcon'}
147+
}
148+
},
149+
{
150+
description: 'Replace with ActionButtonGroup or ToggleButtonGroup',
151+
reason: 'The API has changed',
152+
function: {name: 'updateActionGroup', args: {}}
153+
}
154+
]
155+
},
119156
ActionMenu: {
120157
changes: [
121158
{

‎packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@ availableComponents.add('Section');
2626
// Don't update v3 Provider
2727
availableComponents.delete('Provider');
2828

29+
// Replaced by ActionButtonGroup and ToggleButtonGroup
30+
availableComponents.add('ActionGroup');
31+
2932

3033
interface Options {
3134
/** Comma separated list of components to transform. If not specified, all available components will be transformed. */
@@ -226,7 +229,7 @@ export default function transformer(file: FileInfo, api: API, options: Options)
226229
if (importedComponents.size) {
227230
// Add imports to existing @react-spectrum/s2 import if it exists, otherwise add a new one.
228231
let importSpecifiers = new Set([...importedComponents]
229-
.filter(([c]) => c !== 'Flex' && c !== 'Grid' && c !== 'View' && c !== 'Item' && c !== 'Section')
232+
.filter(([c]) => c !== 'Flex' && c !== 'Grid' && c !== 'View' && c !== 'Item' && c !== 'Section' && c !== 'ActionGroup')
230233
.map(([, specifier]) => specifier));
231234

232235
let existingImport = root.find(j.ImportDeclaration, {

0 commit comments

Comments
 (0)