Skip to content

Commit 52104c0

Browse files
Reid BarberGitHub Enterprise
Reid Barber
authored and
GitHub Enterprise
committed
Codemod follow-up (#200)
1 parent 25caaac commit 52104c0

18 files changed

+643
-277
lines changed

‎packages/@react-spectrum/upgrade-cli/__tests__/__snapshots__/avatar.test.ts.snap

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,35 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Replaces size (maybe? or just removes it?) 1`] = `
3+
exports[`Replaces size prop with macro size value 1`] = `
44
"import { Avatar } from "@react/experimental-s2";
5+
import { style } from "@react/experimental-s2/style" with { type: "macro" };
56
let size = 75;
67
let props = {size: 100};
78
89
<div>
9-
<Avatar src="https://i.imgur.com/kJOwAdv.png" alt="avatar with custom size" />
10-
<Avatar src="https://i.imgur.com/kJOwAdv.png" alt="avatar with custom size" />
10+
<Avatar
11+
src="https://i.imgur.com/kJOwAdv.png"
12+
alt="avatar with custom size"
13+
styles={style({
14+
size: 16
15+
})} />
16+
<Avatar
17+
src="https://i.imgur.com/kJOwAdv.png"
18+
alt="avatar with custom size"
19+
styles={style({
20+
size: 40
21+
})} />
22+
<Avatar
23+
src="https://i.imgur.com/kJOwAdv.png"
24+
alt="avatar with custom size"
25+
styles={style({
26+
size: "[50px]"
27+
})} />
28+
<Avatar
29+
src="https://i.imgur.com/kJOwAdv.png"
30+
alt="avatar with custom size"
31+
// TODO(S2-upgrade): update this style prop
32+
size={size} />
1133
<Avatar
1234
src="https://i.imgur.com/kJOwAdv.png"
1335
alt="avatar with custom size"

‎packages/@react-spectrum/upgrade-cli/__tests__/__snapshots__/breadcrumbs.test.ts.snap

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ let folders = [
5252
<div>
5353
// TODO(S2-upgrade): S2 Breadcrumbs no longer includes a nav element by default. You can wrap the Breadcrumbs component in a nav element if needed.
5454
<Breadcrumbs onAction={(a) => setFolderId(a)}>
55-
{folders.map(f => <Breadcrumb id={f.id}>{f.label}</Breadcrumb>)}
55+
{folders.map(f => <Breadcrumb id={f.id} key={f.id}>{f.label}</Breadcrumb>)}
5656
</Breadcrumbs>
5757
</div>"
5858
`;
@@ -82,6 +82,18 @@ const items = [
8282
</div>"
8383
`;
8484

85+
exports[`Leaves a comment if size prop contains "S" 1`] = `
86+
"import { Breadcrumb, Breadcrumbs } from "@react/experimental-s2";
87+
import { Item } from '@adobe/react-spectrum';
88+
89+
// TODO(S2-upgrade): S2 Breadcrumbs no longer includes a nav element by default. You can wrap the Breadcrumbs component in a nav element if needed.
90+
<Breadcrumbs // TODO(S2-upgrade): size="S" is no longer supported. You'll need to update this manually.
91+
size={true ? 'M' : 'S'}>
92+
<Breadcrumb id="home">Home</Breadcrumb>
93+
<Breadcrumb id="trendy">Trendy</Breadcrumb>
94+
</Breadcrumbs>"
95+
`;
96+
8597
exports[`Removes size="S" 1`] = `
8698
"import { Breadcrumb, Breadcrumbs } from "@react/experimental-s2";
8799
import { Item } from '@adobe/react-spectrum';

‎packages/@react-spectrum/upgrade-cli/__tests__/__snapshots__/button.test.ts.snap

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Comments out isPending 1`] = `
4+
"import { Button } from "@react/experimental-s2";
5+
6+
<div>
7+
// TODO(S2-upgrade): isPending has not been implemented yet.
8+
<Button>Test</Button>
9+
// TODO(S2-upgrade): isPending has not been implemented yet.
10+
<Button>Test</Button>
11+
</div>"
12+
`;
13+
314
exports[`Converts Button to LinkButton if it has href prop 1`] = `
415
"import { LinkButton, Button } from "@react/experimental-s2";
516
@@ -9,14 +20,19 @@ exports[`Converts Button to LinkButton if it has href prop 1`] = `
920
</div>"
1021
`;
1122

12-
exports[`Comments out isPending 1`] = `
23+
exports[`Does not change nested components with same prop name 1`] = `
1324
"import { Button } from "@react/experimental-s2";
25+
import {FakeComponent} from 'fake-package';
1426
1527
<div>
16-
// TODO(S2-upgrade): isPending has not been implemented yet.
17-
<Button>Test</Button>
18-
// TODO(S2-upgrade): isPending has not been implemented yet.
19-
<Button>Test</Button>
28+
<Button variant="accent">
29+
Test
30+
<FakeComponent variant="cta">Test</FakeComponent>
31+
</Button>
32+
<Button variant="primary" staticColor="white">
33+
Test
34+
<FakeComponent variant="overBackground">Test</FakeComponent>
35+
</Button>
2036
</div>"
2137
`;
2238

@@ -28,3 +44,12 @@ exports[`Renames variants 1`] = `
2844
<Button variant="primary" staticColor="white">Test</Button>
2945
</div>"
3046
`;
47+
48+
exports[`Renames variants with aliased import 1`] = `
49+
"import { Button as RSPButton } from "@react/experimental-s2";
50+
51+
<div>
52+
<RSPButton variant="accent">Test</RSPButton>
53+
<RSPButton variant="primary" staticColor="white">Test</RSPButton>
54+
</div>"
55+
`;

‎packages/@react-spectrum/upgrade-cli/__tests__/__snapshots__/colorarea.test.ts.snap

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,21 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Removes size 1`] = `
3+
exports[`Replaces size prop with macro size value 1`] = `
44
"import { ColorArea } from "@react/experimental-s2";
5+
import { style } from "@react/experimental-s2/style" with { type: "macro" };
6+
let size = 75;
7+
let props = {size: 100};
58
6-
<ColorArea defaultValue="#7f0000" />"
9+
<>
10+
<ColorArea defaultValue="#7f0000" styles={style({
11+
size: 96
12+
})} />
13+
<ColorArea defaultValue="#7f0000" styles={style({
14+
size: "[50px]"
15+
})} />
16+
<ColorArea defaultValue="#7f0000" // TODO(S2-upgrade): update this style prop
17+
size={size} />
18+
<ColorArea defaultValue="#7f0000" // TODO(S2-upgrade): check this spread for style props
19+
{...props} />
20+
</>"
721
`;

‎packages/@react-spectrum/upgrade-cli/__tests__/__snapshots__/colorwheel.test.ts.snap

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,21 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Removes size 1`] = `
3+
exports[`Replaces size prop with macro size value 1`] = `
44
"import { ColorWheel } from "@react/experimental-s2";
5+
import { style } from "@react/experimental-s2/style" with { type: "macro" };
6+
let size = 75;
7+
let props = {size: 100};
58
6-
<ColorWheel defaultValue="hsl(30, 100%, 50%)" />"
9+
<>
10+
<ColorWheel defaultValue="hsl(30, 100%, 50%)" styles={style({
11+
size: 96
12+
})} />
13+
<ColorWheel defaultValue="hsl(30, 100%, 50%)" styles={style({
14+
size: "[50px]"
15+
})} />
16+
<ColorWheel defaultValue="hsl(30, 100%, 50%)" // TODO(S2-upgrade): update this style prop
17+
size={size} />
18+
<ColorWheel defaultValue="hsl(30, 100%, 50%)" // TODO(S2-upgrade): check this spread for style props
19+
{...props} />
20+
</>"
721
`;

‎packages/@react-spectrum/upgrade-cli/__tests__/__snapshots__/dialog.test.ts.snap

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,50 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Comments out if type might be "tray" 1`] = `
4+
"import { DialogTrigger, ActionButton, Dialog, Heading, Divider, Content, Text } from "@react/experimental-s2";
5+
6+
// TODO(S2-upgrade): type="tray" has not been implemented yet.
7+
<DialogTrigger>
8+
<ActionButton>Disk Status</ActionButton>
9+
<Dialog>
10+
50% disk space remaining.
11+
</Dialog>
12+
</DialogTrigger>"
13+
`;
14+
15+
exports[`Comments out mobileType 1`] = `
16+
"import { DialogTrigger, ActionButton, Dialog, Heading, Divider, Content, Text } from "@react/experimental-s2";
17+
18+
<>
19+
// TODO(S2-upgrade): mobileType has not been implemented yet.
20+
<DialogTrigger>
21+
<ActionButton>Disk Status</ActionButton>
22+
<Dialog>
23+
50% disk space remaining.
24+
</Dialog>
25+
</DialogTrigger>
26+
// TODO(S2-upgrade): mobileType has not been implemented yet.
27+
<DialogTrigger>
28+
<ActionButton>Disk Status</ActionButton>
29+
<Dialog>
30+
50% disk space remaining.
31+
</Dialog>
32+
</DialogTrigger>
33+
</>"
34+
`;
35+
36+
exports[`Comments out type="tray" 1`] = `
37+
"import { DialogTrigger, ActionButton, Dialog, Heading, Divider, Content, Text } from "@react/experimental-s2";
38+
39+
// TODO(S2-upgrade): type="tray" has not been implemented yet.
40+
<DialogTrigger>
41+
<ActionButton>Disk Status</ActionButton>
42+
<Dialog>
43+
50% disk space remaining.
44+
</Dialog>
45+
</DialogTrigger>"
46+
`;
47+
348
exports[`Moves close function from DialogTrigger to Dialog 1`] = `
449
"import { DialogTrigger, Button, Dialog, Heading, Content, Divider } from "@react/experimental-s2";
550
@@ -23,6 +68,20 @@ exports[`Removes divider 1`] = `
2368
</Dialog>"
2469
`;
2570

71+
exports[`Removes onDismiss and leaves a comment 1`] = `
72+
"import { DialogTrigger, Button, Dialog, Heading, Content, Divider } from "@react/experimental-s2";
73+
74+
<DialogTrigger>
75+
<Button>Test</Button>
76+
// onDismiss was removed from Dialog. Use onOpenChange on the DialogTrigger, or onDismiss on the DialogContainer instead
77+
<Dialog>{close => <>
78+
<Heading>Test</Heading>
79+
80+
<Content>Content</Content>
81+
</>}</Dialog>
82+
</DialogTrigger>"
83+
`;
84+
2685
exports[`bails when it cannot move the close function 1`] = `
2786
"import { DialogTrigger, Button, Dialog, Heading, Content, Divider } from "@react/experimental-s2";
2887

‎packages/@react-spectrum/upgrade-cli/__tests__/__snapshots__/progressbar.test.ts.snap

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,24 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Comments out labelPosition 1`] = `
4+
"import { ProgressBar } from "@react/experimental-s2";
5+
<div>
6+
// TODO(S2-upgrade): labelPosition has not been implemented yet.
7+
<ProgressBar />
8+
// TODO(S2-upgrade): labelPosition has not been implemented yet.
9+
<ProgressBar />
10+
</div>"
11+
`;
12+
13+
exports[`Removes showValueLabel 1`] = `
14+
"import { ProgressBar } from "@react/experimental-s2";
15+
<div>
16+
<ProgressBar />
17+
<ProgressBar />
18+
<ProgressBar />
19+
</div>"
20+
`;
21+
322
exports[`Renames variants 1`] = `
423
"import { ProgressBar } from "@react/experimental-s2";
524
<div>

‎packages/@react-spectrum/upgrade-cli/__tests__/avatar.test.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,20 @@ const test = (name: string, input: string) => {
66
defineSnapshotTest(transform, {}, input, name);
77
};
88

9-
// add other sizes if we are going to replace it for them
10-
test('Replaces size (maybe? or just removes it?)', `
9+
test('Replaces size prop with macro size value', `
1110
import {Avatar} from '@adobe/react-spectrum';
1211
let size = 75;
1312
let props = {size: 100};
1413
1514
<div>
15+
<Avatar
16+
src="https://i.imgur.com/kJOwAdv.png"
17+
alt="avatar with custom size"
18+
size="avatar-size-50" />
19+
<Avatar
20+
src="https://i.imgur.com/kJOwAdv.png"
21+
alt="avatar with custom size"
22+
size="avatar-size-700" />
1623
<Avatar
1724
src="https://i.imgur.com/kJOwAdv.png"
1825
alt="avatar with custom size"

‎packages/@react-spectrum/upgrade-cli/__tests__/breadcrumbs.test.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,3 +107,12 @@ import {Breadcrumbs, Item} from '@adobe/react-spectrum';
107107
<Item key="trendy">Trendy</Item>
108108
</Breadcrumbs>
109109
`);
110+
111+
test('Leaves a comment if size prop contains "S"', `
112+
import {Breadcrumbs, Item} from '@adobe/react-spectrum';
113+
114+
<Breadcrumbs size={true ? 'M' : 'S'}>
115+
<Item key="home">Home</Item>
116+
<Item key="trendy">Trendy</Item>
117+
</Breadcrumbs>
118+
`);

‎packages/@react-spectrum/upgrade-cli/__tests__/button.test.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,15 @@ import {Button} from '@adobe/react-spectrum';
1515
</div>
1616
`);
1717

18+
test('Renames variants with aliased import', `
19+
import {Button as RSPButton} from '@adobe/react-spectrum';
20+
21+
<div>
22+
<RSPButton variant="cta">Test</RSPButton>
23+
<RSPButton variant="overBackground">Test</RSPButton>
24+
</div>
25+
`);
26+
1827
test('Comments out isPending', `
1928
import {Button} from '@adobe/react-spectrum';
2029
@@ -32,3 +41,19 @@ import {Button} from '@adobe/react-spectrum';
3241
<Button href="/">Test</Button>
3342
</div>
3443
`);
44+
45+
test('Does not change nested components with same prop name', `
46+
import {Button} from '@adobe/react-spectrum';
47+
import {FakeComponent} from 'fake-package';
48+
49+
<div>
50+
<Button variant="cta">
51+
Test
52+
<FakeComponent variant="cta">Test</FakeComponent>
53+
</Button>
54+
<Button variant="overBackground">
55+
Test
56+
<FakeComponent variant="overBackground">Test</FakeComponent>
57+
</Button>
58+
</div>
59+
`);

0 commit comments

Comments
 (0)