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 <tay1orjones@users.noreply.github.com> * Update packages/upgrade/transforms/enable-v12-tile-radio-icons.js Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com> * Update packages/upgrade/transforms/__tests__/enable-v12-tile-radio-icons-test.js Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com> * fix: added tsx fixtures * fix: test cases * fix: test cases * fix: formatting issues * fix: formatting issues --------- Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
carbon-design-system · Feb 3, 2025 · ac654aa · ac654aa
1 parent bc04c97
commit ac654aa
Show file tree

Hide file tree

Showing 8 changed files with 604 additions and 0 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -59,6 +59,7 @@ packages/**/examples/**
 # Upgrade
 packages/upgrade/cli.js
 packages/upgrade/**/*.output.js
+packages/upgrade/**/*.output.tsx
 
 # Accessibility Verification Testing
 **/.avt/**
diff --git a/packages/upgrade/src/upgrades.js b/packages/upgrade/src/upgrades.js
@@ -368,6 +368,66 @@ export const upgrades = [
           });
         },
       },
+      {
+        name: 'enable-v12-tile-radio-icons',
+        description: `
+          Wrap RadioTile components with FeatureFlags enableV12TileRadioIcons
+          
+          Transforms:
+          
+          1. TileGroup with RadioTile:
+          <TileGroup>
+            <RadioTile>...</RadioTile>
+          </TileGroup>
+          
+          Into:
+          <FeatureFlags enableV12TileRadioIcons>
+            <TileGroup>
+              <RadioTile>...</RadioTile>
+            </TileGroup>
+          </FeatureFlags>
+      
+          2. Standalone RadioTile:
+          <RadioTile>...</RadioTile>
+          
+          Into:
+          <FeatureFlags enableV12TileRadioIcons>
+            <RadioTile>...</RadioTile>
+          </FeatureFlags>
+        `,
+
+        migrate: async (options) => {
+          const transform = path.join(
+            TRANSFORM_DIR,
+            'enable-v12-tile-radio-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: 'refactor-to-callout',
         description:

diff --git a/packages/upgrade/transforms/__testfixtures__/enable-v12-tile-radio-icons.input.js b/packages/upgrade/transforms/__testfixtures__/enable-v12-tile-radio-icons.input.js
@@ -0,0 +1,87 @@
+import React from 'react';
+import { TileGroup, RadioTile, Stack } from '@carbon/react';
+import { FeatureFlags } from '@carbon/feature-flags';
+
+function TestComponent() {
+  return (
+    //prettier-ignore
+    <div>
+      {/* Case 1: Unwrapped TileGroup */}
+      <TileGroup legend="TestGroup" name="test">
+        <RadioTile id="test-1" value="test-1">
+          Option 1
+        </RadioTile>
+        <RadioTile id="test-2" value="test-2">
+          Option 2
+        </RadioTile>
+      </TileGroup>
+      {/* Wrapped standalone missing flag prop */}
+      <FeatureFlags>
+        <TileGroup legend="Missing Attribute" name="wrapped">
+          <RadioTile id="wrapped-1" value="wrapped-1">
+            Already Wrapped Option 1
+          </RadioTile>
+          <RadioTile id="wrapped-2" value="wrapped-2">
+            Already Wrapped Option 2
+          </RadioTile>
+        </TileGroup>
+      </FeatureFlags>
+      {/* Case 3: Already wrapped with other attributes */}
+      <FeatureFlags enable-v12-tile-default-icons>
+        <TileGroup legend="Other Attribute" name="other-wrapped">
+          <RadioTile id="other-1" value="other-1">
+            Other Flag Option 1
+          </RadioTile>
+        </TileGroup>
+      </FeatureFlags>
+      {/* Case 4: Already wrapped with correct attribute */}
+      <FeatureFlags enableV12TileRadioIcons>
+        <TileGroup legend="Correct Wrapped" name="correct">
+          <RadioTile id="correct-1" value="correct-1">
+            Correctly Wrapped Option
+          </RadioTile>
+        </TileGroup>
+      </FeatureFlags>
+      {/* Case 5: Standalone RadioTiles with different scenarios */}
+      <Stack>
+        {/* Unwrapped standalone */}
+        <RadioTile id="standalone" value="standalone">
+          Standalone Tile
+        </RadioTile>
+        {/* Wrapped standalone missing flag prop */}
+        <FeatureFlags>
+          <RadioTile id="wrapped-standalone" value="wrapped-standalone">
+            Wrapped Standalone
+          </RadioTile>
+        </FeatureFlags>
+        {/* Wrapped standalone with other flag */}
+        <FeatureFlags enable-v12-tile-default-icons>
+          <RadioTile id="other-standalone" value="other-standalone">
+            Other Flag Standalone
+          </RadioTile>
+        </FeatureFlags>
+        {/* Correctly wrapped standalone */}
+        <FeatureFlags enableV12TileRadioIcons>
+          <RadioTile id="correct-standalone" value="correct-standalone">
+            Correct Standalone
+          </RadioTile>
+        </FeatureFlags>
+      </Stack>
+      {/* Case 6: Nested structures */}
+      <div className="nested">
+        <TileGroup legend="Nested Group" name="nested">
+          <div className="wrapper">
+            <RadioTile id="nested-1" value="nested-1">
+              Nested Option 1
+            </RadioTile>
+          </div>
+          <RadioTile id="nested-2" value="nested-2">
+            Nested Option 2
+          </RadioTile>
+        </TileGroup>
+      </div>
+    </div>
+  );
+}
+
+export default TestComponent;
diff --git a/packages/upgrade/transforms/__testfixtures__/enable-v12-tile-radio-icons.input.tsx b/packages/upgrade/transforms/__testfixtures__/enable-v12-tile-radio-icons.input.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { TileGroup, RadioTile, 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">
+        <RadioTile id="test-1" value="test-1">
+          Option 1
+        </RadioTile>
+        <RadioTile id="test-2" value="test-2">
+          Option 2
+        </RadioTile>
+      </TileGroup>
+      {/* Wrapped standalone missing flag prop */}
+      <FeatureFlags>
+        <TileGroup legend="Missing Attribute" name="wrapped">
+          <RadioTile id="wrapped-1" value="wrapped-1">
+            Already Wrapped Option 1
+          </RadioTile>
+          <RadioTile id="wrapped-2" value="wrapped-2">
+            Already Wrapped Option 2
+          </RadioTile>
+        </TileGroup>
+      </FeatureFlags>
+      {/* Case 3: Already wrapped with other flags */}
+      <FeatureFlags enable-v12-tile-default-icons>
+        <TileGroup legend="Other Attribute" name="other-wrapped">
+          <RadioTile id="other-1" value="other-1">
+            Other Flag Option 1
+          </RadioTile>
+        </TileGroup>
+      </FeatureFlags>
+      {/* Case 4: Already wrapped with correct flag */}
+      <FeatureFlags enableV12TileRadioIcons>
+        <TileGroup legend="Correct Wrapped" name="correct">
+          <RadioTile id="correct-1" value="correct-1">
+            Correctly Wrapped Option
+          </RadioTile>
+        </TileGroup>
+      </FeatureFlags>
+      {/* Case 5: Standalone RadioTiles with different scenarios */}
+      <Stack>
+        {/* Unwrapped standalone */}
+        <RadioTile id="standalone" value="standalone">
+          Standalone Tile
+        </RadioTile>
+        {/* Wrapped standalone missing flag prop */}
+        <FeatureFlags>
+          <RadioTile id="wrapped-standalone" value="wrapped-standalone">
+            Wrapped Standalone
+          </RadioTile>
+        </FeatureFlags>
+        {/* Wrapped standalone with other flag */}
+        <FeatureFlags enable-v12-tile-default-icons>
+          <RadioTile id="other-standalone" value="other-standalone">
+            Other Flag Standalone radio
+          </RadioTile>
+        </FeatureFlags>
+        {/* Correctly wrapped standalone */}
+        <FeatureFlags enableV12TileRadioIcons>
+          <RadioTile id="correct-standalone" value="correct-standalone">
+            Correct Standalone
+          </RadioTile>
+        </FeatureFlags>
+      </Stack>
+      {/* Case 6: Nested structures */}
+      <div className="nested">
+        <TileGroup legend="Nested Group" name="nested">
+          <div className="wrapper">
+            <RadioTile id="nested-1" value="nested-1">
+              Nested Option 1
+            </RadioTile>
+          </div>
+          <RadioTile id="nested-2" value="nested-2">
+            Nested Option 2
+          </RadioTile>
+        </TileGroup>
+      </div>
+    </div>
+  );
+};
+
+export default TestComponent;
diff --git a/packages/upgrade/transforms/__testfixtures__/enable-v12-tile-radio-icons.output.js b/packages/upgrade/transforms/__testfixtures__/enable-v12-tile-radio-icons.output.js
@@ -0,0 +1,87 @@
+import React from 'react';
+import { TileGroup, RadioTile, Stack } from '@carbon/react';
+import { FeatureFlags } from '@carbon/feature-flags';
+
+function TestComponent() {
+  return (
+    //prettier-ignore
+    (<div>
+      {/* Case 1: Unwrapped TileGroup */}
+      <FeatureFlags enableV12TileRadioIcons><TileGroup legend="TestGroup" name="test">
+          <RadioTile id="test-1" value="test-1">
+            Option 1
+          </RadioTile>
+          <RadioTile id="test-2" value="test-2">
+            Option 2
+          </RadioTile>
+        </TileGroup></FeatureFlags>
+      {/* Wrapped standalone missing flag prop */}
+      <FeatureFlags enableV12TileRadioIcons>
+        <TileGroup legend="Missing Attribute" name="wrapped">
+          <RadioTile id="wrapped-1" value="wrapped-1">
+            Already Wrapped Option 1
+          </RadioTile>
+          <RadioTile id="wrapped-2" value="wrapped-2">
+            Already Wrapped Option 2
+          </RadioTile>
+        </TileGroup>
+      </FeatureFlags>
+      {/* Case 3: Already wrapped with other attributes */}
+      <FeatureFlags enable-v12-tile-default-icons enableV12TileRadioIcons>
+        <TileGroup legend="Other Attribute" name="other-wrapped">
+          <RadioTile id="other-1" value="other-1">
+            Other Flag Option 1
+          </RadioTile>
+        </TileGroup>
+      </FeatureFlags>
+      {/* Case 4: Already wrapped with correct attribute */}
+      <FeatureFlags enableV12TileRadioIcons>
+        <TileGroup legend="Correct Wrapped" name="correct">
+          <RadioTile id="correct-1" value="correct-1">
+            Correctly Wrapped Option
+          </RadioTile>
+        </TileGroup>
+      </FeatureFlags>
+      {/* Case 5: Standalone RadioTiles with different scenarios */}
+      <Stack>
+        {/* Unwrapped standalone */}
+        <FeatureFlags enableV12TileRadioIcons><RadioTile id="standalone" value="standalone">
+            Standalone Tile
+          </RadioTile></FeatureFlags>
+        {/* Wrapped standalone missing flag prop */}
+        <FeatureFlags enableV12TileRadioIcons>
+          <RadioTile id="wrapped-standalone" value="wrapped-standalone">
+            Wrapped Standalone
+          </RadioTile>
+        </FeatureFlags>
+        {/* Wrapped standalone with other flag */}
+        <FeatureFlags enable-v12-tile-default-icons enableV12TileRadioIcons>
+          <RadioTile id="other-standalone" value="other-standalone">
+            Other Flag Standalone
+          </RadioTile>
+        </FeatureFlags>
+        {/* Correctly wrapped standalone */}
+        <FeatureFlags enableV12TileRadioIcons>
+          <RadioTile id="correct-standalone" value="correct-standalone">
+            Correct Standalone
+          </RadioTile>
+        </FeatureFlags>
+      </Stack>
+      {/* Case 6: Nested structures */}
+      <div className="nested">
+        <FeatureFlags enableV12TileRadioIcons><TileGroup legend="Nested Group" name="nested">
+            <div className="wrapper">
+              <RadioTile id="nested-1" value="nested-1">
+                Nested Option 1
+              </RadioTile>
+            </div>
+            <RadioTile id="nested-2" value="nested-2">
+              Nested Option 2
+            </RadioTile>
+          </TileGroup></FeatureFlags>
+      </div>
+    </div>)
+  );
+}
+
+export default TestComponent;