Skip to content

Commit

Permalink
feat: codemod to enable v12 tile default icons (#18453)
Browse files Browse the repository at this point in the history 
* feat: codemod to enable v12 tile default icons

* fix: test cases

* fix: formatting issues

* fix: formatting issues

* fix: formatting issues

* fix: formatting issues

* fix: formatting issues
  • Loading branch information
@riddhybansal
riddhybansal authored Feb 5, 2025
1 parent fa1abc1 commit 2f99a47
Show file tree
Hide file tree
Showing 7 changed files with 551 additions and 0 deletions.
58 changes: 58 additions & 0 deletions packages/upgrade/src/upgrades.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -456,6 +456,64 @@ export const upgrades = [
});
},
},
{
name: 'enable-v12-tile-default-icons',
description: `
Wrap Tile and TileGroup components with FeatureFlags enableV12TileDefaultIcons
Transforms:
1. TileGroup with Tiles:
<TileGroup>
<Tile>...</Tile>
</TileGroup>
Into:
<FeatureFlags enableV12TileDefaultIcons>
<TileGroup>
<Tile>...</Tile>
</TileGroup>
</FeatureFlags>
2. Standalone Tile:
<Tile>...</Tile>
Into:
<FeatureFlags enableV12TileDefaultIcons>
<Tile>...</Tile>
</FeatureFlags>
`,
migrate: async (options) => {
const transform = path.join(
TRANSFORM_DIR,
'enable-v12-tile-default-icons.js'
);
const paths =
Array.isArray(options.paths) && options.paths.length > 0
? options.paths
: await glob(['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'], {
cwd: options.workspaceDir,
ignore: [
'**/es/**',
'**/lib/**',
'**/umd/**',
'**/node_modules/**',
'**/storybook-static/**',
'**/dist/**',
'**/build/**',
'**/*.d.ts',
'**/coverage/**',
],
});

await run({
dry: !options.write,
transform,
paths,
verbose: options.verbose,
parser: 'tsx', // Enable parsing of TSX files
});
},
},
{
name: 'ibm-products-update-http-errors',
description:
Expand Down
70 changes: 70 additions & 0 deletions packages/upgrade/transforms/__testfixtures__/enable-v12-tile-default-icons.input.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import React from 'react';
import { TileGroup, Tile, Stack } from '@carbon/react';
import { FeatureFlags } from '@carbon/feature-flags';

function TestComponent() {
return (
<div>
{/* Case 1: Unwrapped TileGroup */}
<TileGroup legend="TestGroup" name="test">
<Tile>Option 1</Tile>
<Tile>Option 2</Tile>
</TileGroup>

{/* Wrapped standalone missing flag prop */}
<FeatureFlags>
<TileGroup legend="Missing Attribute" name="wrapped">
<Tile>Already Wrapped Option 1</Tile>
<Tile>Already Wrapped Option 2</Tile>
</TileGroup>
</FeatureFlags>

{/* Case 3: Already wrapped with other attributes */}
<FeatureFlags enable-v12-tile-radio-icons>
<TileGroup legend="Other Attribute" name="other-wrapped">
<Tile>Other Flag Option 1</Tile>
</TileGroup>
</FeatureFlags>

{/* Case 4: Already wrapped with correct attribute */}
<FeatureFlags enableV12TileDefaultIcons>
<TileGroup legend="Correct Wrapped" name="correct">
<Tile>Correctly Wrapped Option</Tile>
</TileGroup>
</FeatureFlags>

{/* Case 5: Standalone Tiles with different scenarios */}
<Stack>
{/* Unwrapped standalone */}
<Tile>Standalone Tile</Tile>

{/* Wrapped standalone missing flag prop */}
<FeatureFlags>
<Tile>Wrapped Standalone</Tile>
</FeatureFlags>

{/* Wrapped standalone with other flag */}
<FeatureFlags enable-v12-tile-radio-icons>
<Tile>Other Flag Standalone</Tile>
</FeatureFlags>

{/* Correctly wrapped standalone */}
<FeatureFlags enableV12TileDefaultIcons>
<Tile>Correct Standalone</Tile>
</FeatureFlags>
</Stack>

{/* Case 6: Nested structures */}
<div className="nested">
<TileGroup legend="Nested Group" name="nested">
<div className="wrapper">
<Tile>Nested Option 1</Tile>
</div>
<Tile>Nested Option 2</Tile>
</TileGroup>
</div>
</div>
);
}

export default TestComponent;
72 changes: 72 additions & 0 deletions packages/upgrade/transforms/__testfixtures__/enable-v12-tile-default-icons.input.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import React from 'react';
import { TileGroup, Tile, Stack } from '@carbon/react';
import { FeatureFlags } from '@carbon/feature-flags';

const TestComponent: React.FC = () => {
return (
//prettier-ignore
<div>
{/* Case 1: Unwrapped TileGroup */}
<TileGroup legend="TestGroup" name="test">
<Tile id="test-1">Option 1</Tile>
<Tile id="test-2">Option 2</Tile>
</TileGroup>

{/* Wrapped standalone missing flag prop */}
<FeatureFlags>
<TileGroup legend="Missing Attribute" name="wrapped">
<Tile id="wrapped-1">Already Wrapped Option 1</Tile>
<Tile id="wrapped-2">Already Wrapped Option 2</Tile>
<Tile id="wrapped-3">Already Wrapped Option 3</Tile>
</TileGroup>
</FeatureFlags>

{/* Case 3: Already wrapped with other flags */}
<FeatureFlags enable-v12-tile-radio-icons>
<TileGroup legend="Other Attribute" name="other-wrapped">
<Tile id="other-1">Other Flag Option 1</Tile>
</TileGroup>
</FeatureFlags>

{/* Case 4: Already wrapped with correct flag */}
<FeatureFlags enableV12TileDefaultIcons>
<TileGroup legend="Correct Wrapped" name="correct">
<Tile id="correct-1">Correctly Wrapped Option</Tile>
</TileGroup>
</FeatureFlags>

{/* Case 5: Standalone Tiles with different scenarios */}
<Stack>
{/* Unwrapped standalone */}
<Tile id="standalone">Standalone Tile</Tile>

{/* Wrapped standalone missing flag prop */}
<FeatureFlags>
<Tile id="wrapped-standalone">Wrapped Standalone</Tile>
</FeatureFlags>

{/* Wrapped standalone with other flag */}
<FeatureFlags enable-v12-tile-radio-icons>
<Tile id="other-standalone">Other Flag Standalone</Tile>
</FeatureFlags>

{/* Correctly wrapped standalone */}
<FeatureFlags enableV12TileDefaultIcons>
<Tile id="correct-standalone">Correct Standalone</Tile>
</FeatureFlags>
</Stack>

{/* Case 6: Nested structures */}
<div className="nested">
<TileGroup legend="Nested Group" name="nested">
<div className="wrapper">
<Tile id="nested-1">Nested Option 1</Tile>
</div>
<Tile id="nested-2">Nested Option 2</Tile>
</TileGroup>
</div>
</div>
);
};

export default TestComponent;
89 changes: 89 additions & 0 deletions packages/upgrade/transforms/__testfixtures__/enable-v12-tile-default-icons.output.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import React from 'react';
import { TileGroup, Tile, Stack } from '@carbon/react';
import { FeatureFlags } from '@carbon/feature-flags';

function TestComponent() {
return (
(<div>
{/* Case 1: Unwrapped TileGroup */}
<FeatureFlags enableV12TileDefaultIcons><TileGroup legend="TestGroup" name="test">
<Tile>
Option 1
</Tile>
<Tile>
Option 2
</Tile>
</TileGroup></FeatureFlags>
{/* Wrapped standalone missing flag prop */}
<FeatureFlags enableV12TileDefaultIcons>
<TileGroup legend="Missing Attribute" name="wrapped">
<Tile>
Already Wrapped Option 1
</Tile>
<Tile>
Already Wrapped Option 2
</Tile>
</TileGroup>
</FeatureFlags>
{/* Case 3: Already wrapped with other attributes */}
<FeatureFlags enable-v12-tile-radio-icons enableV12TileDefaultIcons>
<TileGroup legend="Other Attribute" name="other-wrapped">
<Tile>
Other Flag Option 1
</Tile>
</TileGroup>
</FeatureFlags>
{/* Case 4: Already wrapped with correct attribute */}
<FeatureFlags enableV12TileDefaultIcons>
<TileGroup legend="Correct Wrapped" name="correct">
<Tile>
Correctly Wrapped Option
</Tile>
</TileGroup>
</FeatureFlags>
{/* Case 5: Standalone Tiles with different scenarios */}
<Stack>
{/* Unwrapped standalone */}
<FeatureFlags enableV12TileDefaultIcons><Tile>
Standalone Tile
</Tile></FeatureFlags>

{/* Wrapped standalone missing flag prop */}
<FeatureFlags enableV12TileDefaultIcons>
<Tile>
Wrapped Standalone
</Tile>
</FeatureFlags>

{/* Wrapped standalone with other flag */}
<FeatureFlags enable-v12-tile-radio-icons enableV12TileDefaultIcons>
<Tile>
Other Flag Standalone
</Tile>
</FeatureFlags>

{/* Correctly wrapped standalone */}
<FeatureFlags enableV12TileDefaultIcons>
<Tile>
Correct Standalone
</Tile>
</FeatureFlags>
</Stack>
{/* Case 6: Nested structures */}
<div className="nested">
<FeatureFlags enableV12TileDefaultIcons><TileGroup legend="Nested Group" name="nested">
<div className="wrapper">
<Tile>
Nested Option 1
</Tile>
</div>
<Tile>
Nested Option 2
</Tile>
</TileGroup></FeatureFlags>
</div>
</div>)
);
}

export default TestComponent;
67 changes: 67 additions & 0 deletions packages/upgrade/transforms/__testfixtures__/enable-v12-tile-default-icons.output.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import React from 'react';
import { TileGroup, Tile, Stack } from '@carbon/react';
import { FeatureFlags } from '@carbon/feature-flags';

const TestComponent: React.FC = () => {
return (
//prettier-ignore
(<div>
{/* Case 1: Unwrapped TileGroup */}
<FeatureFlags enableV12TileDefaultIcons><TileGroup legend="TestGroup" name="test">
<Tile id="test-1">Option 1</Tile>
<Tile id="test-2">Option 2</Tile>
</TileGroup></FeatureFlags>
{/* Wrapped standalone missing flag prop */}
<FeatureFlags enableV12TileDefaultIcons>
<TileGroup legend="Missing Attribute" name="wrapped">
<Tile id="wrapped-1">Already Wrapped Option 1</Tile>
<Tile id="wrapped-2">Already Wrapped Option 2</Tile>
<Tile id="wrapped-3">Already Wrapped Option 3</Tile>
</TileGroup>
</FeatureFlags>
{/* Case 3: Already wrapped with other flags */}
<FeatureFlags enable-v12-tile-radio-icons enableV12TileDefaultIcons>
<TileGroup legend="Other Attribute" name="other-wrapped">
<Tile id="other-1">Other Flag Option 1</Tile>
</TileGroup>
</FeatureFlags>
{/* Case 4: Already wrapped with correct flag */}
<FeatureFlags enableV12TileDefaultIcons>
<TileGroup legend="Correct Wrapped" name="correct">
<Tile id="correct-1">Correctly Wrapped Option</Tile>
</TileGroup>
</FeatureFlags>
{/* Case 5: Standalone Tiles with different scenarios */}
<Stack>
{/* Unwrapped standalone */}
<FeatureFlags enableV12TileDefaultIcons><Tile id="standalone">Standalone Tile</Tile></FeatureFlags>

{/* Wrapped standalone missing flag prop */}
<FeatureFlags enableV12TileDefaultIcons>
<Tile id="wrapped-standalone">Wrapped Standalone</Tile>
</FeatureFlags>

{/* Wrapped standalone with other flag */}
<FeatureFlags enable-v12-tile-radio-icons enableV12TileDefaultIcons>
<Tile id="other-standalone">Other Flag Standalone</Tile>
</FeatureFlags>

{/* Correctly wrapped standalone */}
<FeatureFlags enableV12TileDefaultIcons>
<Tile id="correct-standalone">Correct Standalone</Tile>
</FeatureFlags>
</Stack>
{/* Case 6: Nested structures */}
<div className="nested">
<FeatureFlags enableV12TileDefaultIcons><TileGroup legend="Nested Group" name="nested">
<div className="wrapper">
<Tile id="nested-1">Nested Option 1</Tile>
</div>
<Tile id="nested-2">Nested Option 2</Tile>
</TileGroup></FeatureFlags>
</div>
</div>)
);
};

export default TestComponent;
12 changes: 12 additions & 0 deletions packages/upgrade/transforms/__tests__/enable-v12-tile-default-icons-test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/**
* Copyright IBM Corp. 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

'use strict';

const { defineTest } = require('jscodeshift/dist/testUtils');

defineTest(__dirname, 'enable-v12-tile-default-icons');
Loading

0 comments on commit 2f99a47

Please sign in to comment.