Skip to content

Commit ac654aa

Browse files
riddhybansaltay1orjones
riddhybansal
and
tay1orjones
authored
feat: codemod to enable v12 tile radio icons (#18364)
* feat: codemod to enable v12 tile radio icons * fix: test * Update packages/upgrade/transforms/__testfixtures__/enable-v12-tile-radio-icons.input.js Co-authored-by: Taylor Jones <[email protected]> * Update packages/upgrade/transforms/enable-v12-tile-radio-icons.js Co-authored-by: Taylor Jones <[email protected]> * Update packages/upgrade/transforms/__tests__/enable-v12-tile-radio-icons-test.js Co-authored-by: Taylor Jones <[email protected]> * fix: added tsx fixtures * fix: test cases * fix: test cases * fix: formatting issues * fix: formatting issues --------- Co-authored-by: Taylor Jones <[email protected]>
1 parent bc04c97 commit ac654aa

8 files changed

+604
-0
lines changed

‎.prettierignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ packages/**/examples/**
5959
# Upgrade
6060
packages/upgrade/cli.js
6161
packages/upgrade/**/*.output.js
62+
packages/upgrade/**/*.output.tsx
6263

6364
# Accessibility Verification Testing
6465
**/.avt/**

‎packages/upgrade/src/upgrades.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -368,6 +368,66 @@ export const upgrades = [
368368
});
369369
},
370370
},
371+
{
372+
name: 'enable-v12-tile-radio-icons',
373+
description: `
374+
Wrap RadioTile components with FeatureFlags enableV12TileRadioIcons
375+
376+
Transforms:
377+
378+
1. TileGroup with RadioTile:
379+
<TileGroup>
380+
<RadioTile>...</RadioTile>
381+
</TileGroup>
382+
383+
Into:
384+
<FeatureFlags enableV12TileRadioIcons>
385+
<TileGroup>
386+
<RadioTile>...</RadioTile>
387+
</TileGroup>
388+
</FeatureFlags>
389+
390+
2. Standalone RadioTile:
391+
<RadioTile>...</RadioTile>
392+
393+
Into:
394+
<FeatureFlags enableV12TileRadioIcons>
395+
<RadioTile>...</RadioTile>
396+
</FeatureFlags>
397+
`,
398+
399+
migrate: async (options) => {
400+
const transform = path.join(
401+
TRANSFORM_DIR,
402+
'enable-v12-tile-radio-icons.js'
403+
);
404+
const paths =
405+
Array.isArray(options.paths) && options.paths.length > 0
406+
? options.paths
407+
: await glob(['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'], {
408+
cwd: options.workspaceDir,
409+
ignore: [
410+
'**/es/**',
411+
'**/lib/**',
412+
'**/umd/**',
413+
'**/node_modules/**',
414+
'**/storybook-static/**',
415+
'**/dist/**',
416+
'**/build/**',
417+
'**/*.d.ts',
418+
'**/coverage/**',
419+
],
420+
});
421+
422+
await run({
423+
dry: !options.write,
424+
transform,
425+
paths,
426+
verbose: options.verbose,
427+
parser: 'tsx', // Enable parsing of TSX files
428+
});
429+
},
430+
},
371431
{
372432
name: 'refactor-to-callout',
373433
description:

‎packages/upgrade/transforms/__testfixtures__/enable-v12-tile-radio-icons.input.js

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import React from 'react';
2+
import { TileGroup, RadioTile, Stack } from '@carbon/react';
3+
import { FeatureFlags } from '@carbon/feature-flags';
4+
5+
function TestComponent() {
6+
return (
7+
//prettier-ignore
8+
<div>
9+
{/* Case 1: Unwrapped TileGroup */}
10+
<TileGroup legend="TestGroup" name="test">
11+
<RadioTile id="test-1" value="test-1">
12+
Option 1
13+
</RadioTile>
14+
<RadioTile id="test-2" value="test-2">
15+
Option 2
16+
</RadioTile>
17+
</TileGroup>
18+
{/* Wrapped standalone missing flag prop */}
19+
<FeatureFlags>
20+
<TileGroup legend="Missing Attribute" name="wrapped">
21+
<RadioTile id="wrapped-1" value="wrapped-1">
22+
Already Wrapped Option 1
23+
</RadioTile>
24+
<RadioTile id="wrapped-2" value="wrapped-2">
25+
Already Wrapped Option 2
26+
</RadioTile>
27+
</TileGroup>
28+
</FeatureFlags>
29+
{/* Case 3: Already wrapped with other attributes */}
30+
<FeatureFlags enable-v12-tile-default-icons>
31+
<TileGroup legend="Other Attribute" name="other-wrapped">
32+
<RadioTile id="other-1" value="other-1">
33+
Other Flag Option 1
34+
</RadioTile>
35+
</TileGroup>
36+
</FeatureFlags>
37+
{/* Case 4: Already wrapped with correct attribute */}
38+
<FeatureFlags enableV12TileRadioIcons>
39+
<TileGroup legend="Correct Wrapped" name="correct">
40+
<RadioTile id="correct-1" value="correct-1">
41+
Correctly Wrapped Option
42+
</RadioTile>
43+
</TileGroup>
44+
</FeatureFlags>
45+
{/* Case 5: Standalone RadioTiles with different scenarios */}
46+
<Stack>
47+
{/* Unwrapped standalone */}
48+
<RadioTile id="standalone" value="standalone">
49+
Standalone Tile
50+
</RadioTile>
51+
{/* Wrapped standalone missing flag prop */}
52+
<FeatureFlags>
53+
<RadioTile id="wrapped-standalone" value="wrapped-standalone">
54+
Wrapped Standalone
55+
</RadioTile>
56+
</FeatureFlags>
57+
{/* Wrapped standalone with other flag */}
58+
<FeatureFlags enable-v12-tile-default-icons>
59+
<RadioTile id="other-standalone" value="other-standalone">
60+
Other Flag Standalone
61+
</RadioTile>
62+
</FeatureFlags>
63+
{/* Correctly wrapped standalone */}
64+
<FeatureFlags enableV12TileRadioIcons>
65+
<RadioTile id="correct-standalone" value="correct-standalone">
66+
Correct Standalone
67+
</RadioTile>
68+
</FeatureFlags>
69+
</Stack>
70+
{/* Case 6: Nested structures */}
71+
<div className="nested">
72+
<TileGroup legend="Nested Group" name="nested">
73+
<div className="wrapper">
74+
<RadioTile id="nested-1" value="nested-1">
75+
Nested Option 1
76+
</RadioTile>
77+
</div>
78+
<RadioTile id="nested-2" value="nested-2">
79+
Nested Option 2
80+
</RadioTile>
81+
</TileGroup>
82+
</div>
83+
</div>
84+
);
85+
}
86+
87+
export default TestComponent;

‎packages/upgrade/transforms/__testfixtures__/enable-v12-tile-radio-icons.input.tsx

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import React from 'react';
2+
import { TileGroup, RadioTile, Stack } from '@carbon/react';
3+
import { FeatureFlags } from '@carbon/feature-flags';
4+
5+
const TestComponent: React.FC = () => {
6+
return (
7+
//prettier-ignore
8+
<div>
9+
{/* Case 1: Unwrapped TileGroup */}
10+
<TileGroup legend="TestGroup" name="test">
11+
<RadioTile id="test-1" value="test-1">
12+
Option 1
13+
</RadioTile>
14+
<RadioTile id="test-2" value="test-2">
15+
Option 2
16+
</RadioTile>
17+
</TileGroup>
18+
{/* Wrapped standalone missing flag prop */}
19+
<FeatureFlags>
20+
<TileGroup legend="Missing Attribute" name="wrapped">
21+
<RadioTile id="wrapped-1" value="wrapped-1">
22+
Already Wrapped Option 1
23+
</RadioTile>
24+
<RadioTile id="wrapped-2" value="wrapped-2">
25+
Already Wrapped Option 2
26+
</RadioTile>
27+
</TileGroup>
28+
</FeatureFlags>
29+
{/* Case 3: Already wrapped with other flags */}
30+
<FeatureFlags enable-v12-tile-default-icons>
31+
<TileGroup legend="Other Attribute" name="other-wrapped">
32+
<RadioTile id="other-1" value="other-1">
33+
Other Flag Option 1
34+
</RadioTile>
35+
</TileGroup>
36+
</FeatureFlags>
37+
{/* Case 4: Already wrapped with correct flag */}
38+
<FeatureFlags enableV12TileRadioIcons>
39+
<TileGroup legend="Correct Wrapped" name="correct">
40+
<RadioTile id="correct-1" value="correct-1">
41+
Correctly Wrapped Option
42+
</RadioTile>
43+
</TileGroup>
44+
</FeatureFlags>
45+
{/* Case 5: Standalone RadioTiles with different scenarios */}
46+
<Stack>
47+
{/* Unwrapped standalone */}
48+
<RadioTile id="standalone" value="standalone">
49+
Standalone Tile
50+
</RadioTile>
51+
{/* Wrapped standalone missing flag prop */}
52+
<FeatureFlags>
53+
<RadioTile id="wrapped-standalone" value="wrapped-standalone">
54+
Wrapped Standalone
55+
</RadioTile>
56+
</FeatureFlags>
57+
{/* Wrapped standalone with other flag */}
58+
<FeatureFlags enable-v12-tile-default-icons>
59+
<RadioTile id="other-standalone" value="other-standalone">
60+
Other Flag Standalone radio
61+
</RadioTile>
62+
</FeatureFlags>
63+
{/* Correctly wrapped standalone */}
64+
<FeatureFlags enableV12TileRadioIcons>
65+
<RadioTile id="correct-standalone" value="correct-standalone">
66+
Correct Standalone
67+
</RadioTile>
68+
</FeatureFlags>
69+
</Stack>
70+
{/* Case 6: Nested structures */}
71+
<div className="nested">
72+
<TileGroup legend="Nested Group" name="nested">
73+
<div className="wrapper">
74+
<RadioTile id="nested-1" value="nested-1">
75+
Nested Option 1
76+
</RadioTile>
77+
</div>
78+
<RadioTile id="nested-2" value="nested-2">
79+
Nested Option 2
80+
</RadioTile>
81+
</TileGroup>
82+
</div>
83+
</div>
84+
);
85+
};
86+
87+
export default TestComponent;

‎packages/upgrade/transforms/__testfixtures__/enable-v12-tile-radio-icons.output.js

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import React from 'react';
2+
import { TileGroup, RadioTile, Stack } from '@carbon/react';
3+
import { FeatureFlags } from '@carbon/feature-flags';
4+
5+
function TestComponent() {
6+
return (
7+
//prettier-ignore
8+
(<div>
9+
{/* Case 1: Unwrapped TileGroup */}
10+
<FeatureFlags enableV12TileRadioIcons><TileGroup legend="TestGroup" name="test">
11+
<RadioTile id="test-1" value="test-1">
12+
Option 1
13+
</RadioTile>
14+
<RadioTile id="test-2" value="test-2">
15+
Option 2
16+
</RadioTile>
17+
</TileGroup></FeatureFlags>
18+
{/* Wrapped standalone missing flag prop */}
19+
<FeatureFlags enableV12TileRadioIcons>
20+
<TileGroup legend="Missing Attribute" name="wrapped">
21+
<RadioTile id="wrapped-1" value="wrapped-1">
22+
Already Wrapped Option 1
23+
</RadioTile>
24+
<RadioTile id="wrapped-2" value="wrapped-2">
25+
Already Wrapped Option 2
26+
</RadioTile>
27+
</TileGroup>
28+
</FeatureFlags>
29+
{/* Case 3: Already wrapped with other attributes */}
30+
<FeatureFlags enable-v12-tile-default-icons enableV12TileRadioIcons>
31+
<TileGroup legend="Other Attribute" name="other-wrapped">
32+
<RadioTile id="other-1" value="other-1">
33+
Other Flag Option 1
34+
</RadioTile>
35+
</TileGroup>
36+
</FeatureFlags>
37+
{/* Case 4: Already wrapped with correct attribute */}
38+
<FeatureFlags enableV12TileRadioIcons>
39+
<TileGroup legend="Correct Wrapped" name="correct">
40+
<RadioTile id="correct-1" value="correct-1">
41+
Correctly Wrapped Option
42+
</RadioTile>
43+
</TileGroup>
44+
</FeatureFlags>
45+
{/* Case 5: Standalone RadioTiles with different scenarios */}
46+
<Stack>
47+
{/* Unwrapped standalone */}
48+
<FeatureFlags enableV12TileRadioIcons><RadioTile id="standalone" value="standalone">
49+
Standalone Tile
50+
</RadioTile></FeatureFlags>
51+
{/* Wrapped standalone missing flag prop */}
52+
<FeatureFlags enableV12TileRadioIcons>
53+
<RadioTile id="wrapped-standalone" value="wrapped-standalone">
54+
Wrapped Standalone
55+
</RadioTile>
56+
</FeatureFlags>
57+
{/* Wrapped standalone with other flag */}
58+
<FeatureFlags enable-v12-tile-default-icons enableV12TileRadioIcons>
59+
<RadioTile id="other-standalone" value="other-standalone">
60+
Other Flag Standalone
61+
</RadioTile>
62+
</FeatureFlags>
63+
{/* Correctly wrapped standalone */}
64+
<FeatureFlags enableV12TileRadioIcons>
65+
<RadioTile id="correct-standalone" value="correct-standalone">
66+
Correct Standalone
67+
</RadioTile>
68+
</FeatureFlags>
69+
</Stack>
70+
{/* Case 6: Nested structures */}
71+
<div className="nested">
72+
<FeatureFlags enableV12TileRadioIcons><TileGroup legend="Nested Group" name="nested">
73+
<div className="wrapper">
74+
<RadioTile id="nested-1" value="nested-1">
75+
Nested Option 1
76+
</RadioTile>
77+
</div>
78+
<RadioTile id="nested-2" value="nested-2">
79+
Nested Option 2
80+
</RadioTile>
81+
</TileGroup></FeatureFlags>
82+
</div>
83+
</div>)
84+
);
85+
}
86+
87+
export default TestComponent;

0 commit comments

Comments
 (0)