feat: V5 icons codemod (#2732)

* feat: update v5 icons codemod remove variant prop and update size props * chore: update version of codemod * chore: remove unnecessary dependency
contentful · Oct 23, 2024 · 5959d8e · 5959d8e
1 parent 0f1ea18
commit 5959d8e
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 13 deletions.
diff --git a/packages/forma-36-codemod/package.json b/packages/forma-36-codemod/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@contentful/f36-codemod",
   "description": "Forma 36 Codemod",
-  "version": "4.5.0",
+  "version": "5.0.0-alpha.0",
   "main": "bin/f36-codemod.mjs",
   "license": "MIT",
   "files": [
@@ -21,8 +21,7 @@
   "devDependencies": {
     "@types/semver": "^7.3.12",
     "eslint": "^8.43.0",
-    "jest": "^29.3.1",
-    "@contentful/f36-icons": "^4.0.0"
+    "jest": "^29.3.1"
   },
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/",

diff --git a/packages/forma-36-codemod/transforms/__testfixtures__/v5/icons.input.js b/packages/forma-36-codemod/transforms/__testfixtures__/v5/icons.input.js
@@ -6,8 +6,11 @@ import {
   InfoCircleIcon,
 } from '@contentful/f36-icons';
 
-<CloseIcon size="small" />;
-<ChevronUpIcon size="small" />;
+<CloseIcon size="large" />;
+<ChevronUpIcon size="xlarge" />;
 <ChevronDownIcon size="small" />;
 <DeleteIcon size="small" />;
-<InfoCircleIcon />;
+<InfoCircleIcon variant="muted" />;
+
+const largeIcon = true;
+<CloseIcon size={largeIcon ? 'large' : 'xlarge'} />
diff --git a/packages/forma-36-codemod/transforms/__testfixtures__/v5/icons.output.js b/packages/forma-36-codemod/transforms/__testfixtures__/v5/icons.output.js
@@ -1,7 +1,10 @@
-import { CaretDownIcon, CaretUpIcon, XIcon, TrashSimpleIcon, InfoFillIcon } from "@contentful/f36-icons-alpha";
+import { CaretDownIcon, CaretUpIcon, XIcon, TrashSimpleIcon, InfoIcon } from "@contentful/f36-icons-alpha";
 
-<XIcon size="small" />;
-<CaretUpIcon size="small" />;
+<XIcon />;
+<CaretUpIcon />;
 <CaretDownIcon size="small" />;
 <TrashSimpleIcon size="small" />;
-<InfoFillIcon />;
+<InfoIcon />;
+
+const largeIcon = true;
+<XIcon />
diff --git a/packages/forma-36-codemod/transforms/v5/icons.js b/packages/forma-36-codemod/transforms/v5/icons.js
@@ -2,8 +2,15 @@ const {
   getComponentLocalName,
   changeComponentName,
   changeImport,
+  changeProperties,
+  deleteProperty,
+  updateTernaryValues,
+  updatePropertyValue,
+  getProperty,
+  hasProperty,
 } = require('../../utils');
 const { shouldSkipUpdateImport, getImport } = require('../../utils/config');
+const { isConditionalExpression } = require('../../utils/updateTernaryValues');
 
 // V4 icon name : V5 icon name
 const iconsMap = {
@@ -134,6 +141,78 @@ module.exports = function (file, api) {
   components.forEach(({ localName, v4IconName }) => {
     const newComponentName = `${iconsMap[v4IconName]}Icon`;
 
+    source = changeProperties(j, source, {
+      componentName: localName,
+      fn(attributes) {
+        let modifiedAttributes = attributes;
+
+        // Remove variant prop
+        modifiedAttributes = deleteProperty(modifiedAttributes, {
+          propertyName: 'variant',
+          file,
+        });
+
+        // Update size prop
+        if (hasProperty(modifiedAttributes, { propertyName: 'size' })) {
+          let size = getProperty(modifiedAttributes, {
+            propertyName: 'size',
+          });
+
+          // update conditional expressions
+          if (isConditionalExpression(size.value, j)) {
+            modifiedAttributes = updatePropertyValue(modifiedAttributes, {
+              j,
+              propertyName: 'size',
+              propertyValue: (value) => {
+                const valueMap = {
+                  large: 'medium',
+                  xlarge: 'medium',
+                };
+
+                const updatedValue = updateTernaryValues(value, {
+                  j,
+                  valueMap,
+                });
+
+                return updatedValue;
+              },
+            });
+          }
+
+          size = getProperty(modifiedAttributes, {
+            propertyName: 'size',
+          });
+
+          // If ternary has same value for true and false, simplify
+          if (size.value.value === undefined) {
+            const matches = size.value.match(/\{'(\w+?)'\}/);
+            if (matches[1]) {
+              modifiedAttributes = updatePropertyValue(modifiedAttributes, {
+                j,
+                propertyName: 'size',
+                propertyValue: () => {
+                  return j.literal(matches[1]);
+                },
+              });
+            }
+          }
+          size = getProperty(modifiedAttributes, {
+            propertyName: 'size',
+          });
+
+          // Remove size prop if value is 'large', 'xlarge' or 'medium'
+          if (['large', 'xlarge', 'medium'].includes(size.value.value)) {
+            modifiedAttributes = deleteProperty(modifiedAttributes, {
+              propertyName: 'size',
+              file,
+            });
+          }
+        }
+
+        return modifiedAttributes;
+      },
+    });
+
     source = changeComponentName(j, source, {
       componentName: localName,
       outputComponentName: newComponentName,

diff --git a/packages/forma-36-codemod/utils/updateTernaryValues.js b/packages/forma-36-codemod/utils/updateTernaryValues.js
@@ -32,9 +32,13 @@ function updateTernaryValues(value, { j, valueMap = {} }) {
       const consequent = getValueFor('consequent', commonArgs);
       const alternate = getValueFor('alternate', commonArgs);
 
-      j(expression).replaceWith(
-        j.conditionalExpression(expression.value.test, consequent, alternate),
-      );
+      if (consequent.value === alternate.value) {
+        j(expression).replaceWith(j.literal(consequent.value));
+      } else {
+        j(expression).replaceWith(
+          j.conditionalExpression(expression.value.test, consequent, alternate),
+        );
+      }
     })
     .toSource({ quote: 'single' });
 }