@atlaskit/codemod-cli 0.31.2 → 0.32.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/codemod-cli
 
+## 0.32.1
+
+### Patch Changes
+
+- [`b866a7f72dab4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b866a7f72dab4) -
+  Updated lozenge-to-tag-migration codemod to handle variable lozenge children
+
+## 0.32.0
+
+### Minor Changes
+
+- [`a5b157e56828d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a5b157e56828d) -
+  Add a new codemod `badge-appearance-semantic-migration` to migrate deprecated Badge appearances to
+  colorsas part of the Labelling System Phase 1 migration.
+
 ## 0.31.2
 
 ### Patch Changes

package/dist/cjs/presets/badge-appearance-semantic-migration/badge-appearance-semantic-migration.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _badgeAppearanceSemanticMigration = _interopRequireDefault(require("./codemods/badge-appearance-semantic-migration"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function transformer(_x, _x2) {
+  return _transformer.apply(this, arguments);
+}
+function _transformer() {
+  _transformer = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(file, api) {
+    var transformers, src;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          transformers = [_badgeAppearanceSemanticMigration.default];
+          src = file.source;
+          transformers.forEach(function (transformer) {
+            if (typeof src === 'undefined') {
+              return;
+            }
+            var nextSrc = transformer(_objectSpread(_objectSpread({}, file), {}, {
+              source: src
+            }), api);
+            if (nextSrc) {
+              src = nextSrc;
+            }
+          });
+          return _context.abrupt("return", src);
+        case 4:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _transformer.apply(this, arguments);
+}

package/dist/cjs/presets/badge-appearance-semantic-migration/codemods/badge-appearance-semantic-migration.js

@@ -0,0 +1,145 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _utils = require("@hypermod/utils");
+var _codemodUtils = require("@atlaskit/codemod-utils");
+var BADGE_ENTRY_POINT = '@atlaskit/badge';
+var PRINT_SETTINGS = {
+  quote: 'single'
+};
+
+// Old appearance values that map to new semantic appearance values
+var OLD_TO_NEW_APPEARANCE_MAP = {
+  added: 'success',
+  removed: 'danger',
+  default: 'neutral',
+  primary: 'information',
+  primaryInverted: 'inverse',
+  important: 'danger'
+};
+/**
+ * Codemod to migrate Badge component appearance semantic values.
+ *
+ * This codemod:
+ * 1. Updates `appearance` prop values to new semantic values
+ * 2. Maps old semantic values to new semantic values (e.g. added → success, removed → danger, primary → information)
+ * 3. Adds comments for dynamic values that need manual verification
+ */
+function transformer(file, api) {
+  var j = api.jscodeshift;
+  var source = j(file.source);
+
+  // Find all Badge imports
+  var badgeImports = (0, _utils.getImportDeclaration)(j, source, BADGE_ENTRY_POINT);
+
+  // If no Badge imports, exit early
+  if (!badgeImports.length) {
+    return file.source;
+  }
+
+  // Get all imported Badge identifiers (could be renamed)
+  var badgeIdentifiers = new Set();
+  badgeImports.forEach(function (importPath) {
+    var _importPath$value$spe;
+    (_importPath$value$spe = importPath.value.specifiers) === null || _importPath$value$spe === void 0 || _importPath$value$spe.forEach(function (specifier) {
+      var _specifier$imported;
+      if (specifier.type === 'ImportDefaultSpecifier') {
+        var _specifier$local;
+        // Handle: import Badge from '@atlaskit/badge'
+        badgeIdentifiers.add(((_specifier$local = specifier.local) === null || _specifier$local === void 0 ? void 0 : _specifier$local.name) || 'Badge');
+      } else if (specifier.type === 'ImportSpecifier' && ((_specifier$imported = specifier.imported) === null || _specifier$imported === void 0 ? void 0 : _specifier$imported.type) === 'Identifier' && specifier.imported.name === 'default') {
+        var _specifier$local2;
+        // Handle: import { default as MyBadge } from '@atlaskit/badge'
+        badgeIdentifiers.add(((_specifier$local2 = specifier.local) === null || _specifier$local2 === void 0 ? void 0 : _specifier$local2.name) || 'Badge');
+      }
+    });
+  });
+
+  // If no Badge identifiers found, exit early
+  if (badgeIdentifiers.size === 0) {
+    return file.source;
+  }
+
+  // Find all Badge JSX elements
+  var badgeElements = [];
+  source.find(j.JSXElement).forEach(function (path) {
+    var _openingElement$name;
+    var openingElement = path.value.openingElement;
+    if (((_openingElement$name = openingElement.name) === null || _openingElement$name === void 0 ? void 0 : _openingElement$name.type) === 'JSXIdentifier' && badgeIdentifiers.has(openingElement.name.name)) {
+      var _openingElement$attri;
+      var element = {
+        path: path,
+        hasAppearanceProp: false
+      };
+
+      // Check for appearance prop
+      (_openingElement$attri = openingElement.attributes) === null || _openingElement$attri === void 0 || _openingElement$attri.forEach(function (attr) {
+        var _attr$name;
+        if (attr.type === 'JSXAttribute' && ((_attr$name = attr.name) === null || _attr$name === void 0 ? void 0 : _attr$name.type) === 'JSXIdentifier') {
+          if (attr.name.name === 'appearance') {
+            var _attr$value, _attr$value2;
+            element.hasAppearanceProp = true;
+            if (((_attr$value = attr.value) === null || _attr$value === void 0 ? void 0 : _attr$value.type) === 'StringLiteral') {
+              element.appearanceValue = attr.value.value;
+            } else if (((_attr$value2 = attr.value) === null || _attr$value2 === void 0 ? void 0 : _attr$value2.type) === 'JSXExpressionContainer') {
+              // Handle dynamic values
+              var expression = attr.value.expression;
+              if (expression.type === 'StringLiteral') {
+                element.appearanceValue = expression.value;
+              } else {
+                element.appearanceValue = 'dynamic';
+              }
+            }
+          }
+        }
+      });
+      badgeElements.push(element);
+    }
+  });
+
+  // Process each Badge element
+  badgeElements.forEach(function (element) {
+    var path = element.path,
+      hasAppearanceProp = element.hasAppearanceProp,
+      appearanceValue = element.appearanceValue;
+    var openingElement = path.value.openingElement;
+
+    // Update appearance prop values to new semantic values
+    if (hasAppearanceProp) {
+      var _openingElement$attri2;
+      (_openingElement$attri2 = openingElement.attributes) === null || _openingElement$attri2 === void 0 || _openingElement$attri2.forEach(function (attr) {
+        var _attr$name2;
+        if (attr.type === 'JSXAttribute' && ((_attr$name2 = attr.name) === null || _attr$name2 === void 0 ? void 0 : _attr$name2.type) === 'JSXIdentifier' && attr.name.name === 'appearance') {
+          // Handle different types of appearance values
+          if (appearanceValue === 'dynamic') {
+            // For dynamic values, add a comment
+            (0, _codemodUtils.addCommentBefore)(j, j(path), "FIXME: This Badge component uses a dynamic `appearance` prop with updated semantic values.\nPlease verify that the values being passed use the new semantic values: neutral, information, inverse, danger, success.\nOld values mapping: default\u2192neutral, primary\u2192information, primaryInverted\u2192inverse, added\u2192success, removed\u2192danger, important\u2192danger.");
+          } else if (appearanceValue === 'primaryInverted') {
+            var _attr$value3;
+            // For primaryInverted, we need to add a comment since it maps to inverse
+            (0, _codemodUtils.addCommentBefore)(j, j(path), "FIXME: This Badge component used `appearance=\"primaryInverted\"` which has been migrated to `appearance=\"inverse\"`.\nPlease verify the visual appearance matches your expectations.");
+            // Update the value
+            if (((_attr$value3 = attr.value) === null || _attr$value3 === void 0 ? void 0 : _attr$value3.type) === 'StringLiteral') {
+              attr.value.value = OLD_TO_NEW_APPEARANCE_MAP[appearanceValue];
+            }
+          } else if (appearanceValue && !OLD_TO_NEW_APPEARANCE_MAP[appearanceValue]) {
+            // For invalid string values, add a warning comment
+            (0, _codemodUtils.addCommentBefore)(j, j(path), "FIXME: This Badge component uses an unknown `appearance` value \"".concat(appearanceValue, "\".\nValid new semantic appearance values are: ").concat(Object.values(OLD_TO_NEW_APPEARANCE_MAP).filter(function (v, i, arr) {
+              return arr.indexOf(v) === i;
+            }).join(', '), ".\nPlease update this value to a valid semantic appearance value."));
+          } else if (appearanceValue && OLD_TO_NEW_APPEARANCE_MAP[appearanceValue]) {
+            var _attr$value4;
+            // For valid string values, update the value to the new semantic value
+            if (((_attr$value4 = attr.value) === null || _attr$value4 === void 0 ? void 0 : _attr$value4.type) === 'StringLiteral') {
+              attr.value.value = OLD_TO_NEW_APPEARANCE_MAP[appearanceValue];
+            }
+          }
+        }
+      });
+    }
+  });
+  return source.toSource(PRINT_SETTINGS);
+}

package/dist/cjs/presets/index.js

@@ -16,12 +16,13 @@ require("./remove-dark-theme-vr-options/remove-dark-theme-vr-options");
 require("./remove-token-fallbacks/remove-token-fallbacks");
 require("./lozenge-appearance-semantic-migration/lozenge-appearance-semantic-migration");
 require("./lozenge-to-tag-migration/lozenge-to-tag-migration");
+require("./badge-appearance-semantic-migration/badge-appearance-semantic-migration");
 /**
  * Manually import presets to make sure typescript includes them
  * in the final bundle.
  */
 
-var presets = ['styled-to-emotion', 'theme-remove-deprecated-mixins', 'migrate-to-link', 'migrate-to-new-buttons', 'migrate-icon-object-to-object', 'upgrade-pragmatic-drag-and-drop-to-stable', 'remove-dark-theme-vr-options', 'remove-token-fallbacks', 'lozenge-appearance-semantic-migration', 'lozenge-to-tag-migration'].map(function (preset) {
+var presets = ['styled-to-emotion', 'theme-remove-deprecated-mixins', 'migrate-to-link', 'migrate-to-new-buttons', 'migrate-icon-object-to-object', 'upgrade-pragmatic-drag-and-drop-to-stable', 'remove-dark-theme-vr-options', 'remove-token-fallbacks', 'lozenge-appearance-semantic-migration', 'lozenge-to-tag-migration', 'badge-appearance-semantic-migration'].map(function (preset) {
   return _path.default.join(__dirname, preset, "".concat(preset, ".@(ts|js|tsx)"));
 });
 var _default = exports.default = presets;

package/dist/cjs/presets/lozenge-to-tag-migration/codemods/lozenge-to-tag-migration.js

@@ -99,6 +99,8 @@ var transformer = function transformer(file, api) {
     var unknownAppearanceValue = '';
 
     // Process children to extract text
+    var hasVariableChild = false;
+    var variableChildExpression = null;
     if (element.children && element.children.length > 0) {
       if (element.children.length === 1) {
         var child = element.children[0];
@@ -109,7 +111,21 @@ var transformer = function transformer(file, api) {
           }
         } else if (j.JSXExpressionContainer.check(child) && j.StringLiteral.check(child.expression)) {
           textContent = child.expression.value;
+        } else if (j.JSXExpressionContainer.check(child)) {
+          // Check if it's a simple identifier (variable) or member expression
+          if (j.Identifier.check(child.expression)) {
+            hasVariableChild = true;
+            variableChildExpression = child.expression;
+          } else if (j.MemberExpression.check(child.expression)) {
+            // Handle member expressions like obj.prop
+            hasVariableChild = true;
+            variableChildExpression = child.expression;
+          } else {
+            // Complex expression or JSX element
+            hasComplexChildren = true;
+          }
         } else {
+          // JSX elements or other complex children
           hasComplexChildren = true;
         }
       } else {
@@ -159,8 +175,11 @@ var transformer = function transformer(file, api) {
     });
 
     // Assemble attributes in correct order: text, other props, color
-    if (textContent && !hasComplexChildren) {
+    if (textContent && !hasComplexChildren && !hasVariableChild) {
       newAttributes.push(j.jsxAttribute(j.jsxIdentifier('text'), j.stringLiteral(textContent)));
+    } else if (hasVariableChild && variableChildExpression) {
+      // Use the variable expression as the text prop
+      newAttributes.push(j.jsxAttribute(j.jsxIdentifier('text'), j.jsxExpressionContainer(variableChildExpression)));
     }
 
     // Add other attributes
@@ -182,6 +201,9 @@ var transformer = function transformer(file, api) {
     if (hasComplexChildren) {
       warnings.push("FIXME: This Tag component has complex children that couldn't be automatically migrated to the text prop.\nTag component only supports simple text via the text prop. Please manually convert the children content.");
     }
+    if (hasVariableChild) {
+      warnings.push('FIXME: This Tag component uses a variable as the text prop. Please verify that the variable contains a string value.');
+    }
     if (hasMaxWidthProp) {
       warnings.push('FIXME: maxWidth prop was removed during migration from Lozenge to Tag.\nTag component does not support maxWidth. Please review if width constraints are needed.');
     }

package/dist/es2019/presets/badge-appearance-semantic-migration/badge-appearance-semantic-migration.js

@@ -0,0 +1,18 @@
+import badgeAppearanceSemanticMigrationTransformer from './codemods/badge-appearance-semantic-migration';
+export default async function transformer(file, api) {
+  const transformers = [badgeAppearanceSemanticMigrationTransformer];
+  let src = file.source;
+  transformers.forEach(transformer => {
+    if (typeof src === 'undefined') {
+      return;
+    }
+    const nextSrc = transformer({
+      ...file,
+      source: src
+    }, api);
+    if (nextSrc) {
+      src = nextSrc;
+    }
+  });
+  return src;
+}

package/dist/es2019/presets/badge-appearance-semantic-migration/codemods/badge-appearance-semantic-migration.js

@@ -0,0 +1,144 @@
+import { getImportDeclaration } from '@hypermod/utils';
+import { addCommentBefore } from '@atlaskit/codemod-utils';
+const BADGE_ENTRY_POINT = '@atlaskit/badge';
+const PRINT_SETTINGS = {
+  quote: 'single'
+};
+
+// Old appearance values that map to new semantic appearance values
+const OLD_TO_NEW_APPEARANCE_MAP = {
+  added: 'success',
+  removed: 'danger',
+  default: 'neutral',
+  primary: 'information',
+  primaryInverted: 'inverse',
+  important: 'danger'
+};
+/**
+ * Codemod to migrate Badge component appearance semantic values.
+ *
+ * This codemod:
+ * 1. Updates `appearance` prop values to new semantic values
+ * 2. Maps old semantic values to new semantic values (e.g. added → success, removed → danger, primary → information)
+ * 3. Adds comments for dynamic values that need manual verification
+ */
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const source = j(file.source);
+
+  // Find all Badge imports
+  const badgeImports = getImportDeclaration(j, source, BADGE_ENTRY_POINT);
+
+  // If no Badge imports, exit early
+  if (!badgeImports.length) {
+    return file.source;
+  }
+
+  // Get all imported Badge identifiers (could be renamed)
+  const badgeIdentifiers = new Set();
+  badgeImports.forEach(importPath => {
+    var _importPath$value$spe;
+    (_importPath$value$spe = importPath.value.specifiers) === null || _importPath$value$spe === void 0 ? void 0 : _importPath$value$spe.forEach(specifier => {
+      var _specifier$imported;
+      if (specifier.type === 'ImportDefaultSpecifier') {
+        var _specifier$local;
+        // Handle: import Badge from '@atlaskit/badge'
+        badgeIdentifiers.add(((_specifier$local = specifier.local) === null || _specifier$local === void 0 ? void 0 : _specifier$local.name) || 'Badge');
+      } else if (specifier.type === 'ImportSpecifier' && ((_specifier$imported = specifier.imported) === null || _specifier$imported === void 0 ? void 0 : _specifier$imported.type) === 'Identifier' && specifier.imported.name === 'default') {
+        var _specifier$local2;
+        // Handle: import { default as MyBadge } from '@atlaskit/badge'
+        badgeIdentifiers.add(((_specifier$local2 = specifier.local) === null || _specifier$local2 === void 0 ? void 0 : _specifier$local2.name) || 'Badge');
+      }
+    });
+  });
+
+  // If no Badge identifiers found, exit early
+  if (badgeIdentifiers.size === 0) {
+    return file.source;
+  }
+
+  // Find all Badge JSX elements
+  const badgeElements = [];
+  source.find(j.JSXElement).forEach(path => {
+    var _openingElement$name;
+    const openingElement = path.value.openingElement;
+    if (((_openingElement$name = openingElement.name) === null || _openingElement$name === void 0 ? void 0 : _openingElement$name.type) === 'JSXIdentifier' && badgeIdentifiers.has(openingElement.name.name)) {
+      var _openingElement$attri;
+      const element = {
+        path,
+        hasAppearanceProp: false
+      };
+
+      // Check for appearance prop
+      (_openingElement$attri = openingElement.attributes) === null || _openingElement$attri === void 0 ? void 0 : _openingElement$attri.forEach(attr => {
+        var _attr$name;
+        if (attr.type === 'JSXAttribute' && ((_attr$name = attr.name) === null || _attr$name === void 0 ? void 0 : _attr$name.type) === 'JSXIdentifier') {
+          if (attr.name.name === 'appearance') {
+            var _attr$value, _attr$value2;
+            element.hasAppearanceProp = true;
+            if (((_attr$value = attr.value) === null || _attr$value === void 0 ? void 0 : _attr$value.type) === 'StringLiteral') {
+              element.appearanceValue = attr.value.value;
+            } else if (((_attr$value2 = attr.value) === null || _attr$value2 === void 0 ? void 0 : _attr$value2.type) === 'JSXExpressionContainer') {
+              // Handle dynamic values
+              const expression = attr.value.expression;
+              if (expression.type === 'StringLiteral') {
+                element.appearanceValue = expression.value;
+              } else {
+                element.appearanceValue = 'dynamic';
+              }
+            }
+          }
+        }
+      });
+      badgeElements.push(element);
+    }
+  });
+
+  // Process each Badge element
+  badgeElements.forEach(element => {
+    const {
+      path,
+      hasAppearanceProp,
+      appearanceValue
+    } = element;
+    const openingElement = path.value.openingElement;
+
+    // Update appearance prop values to new semantic values
+    if (hasAppearanceProp) {
+      var _openingElement$attri2;
+      (_openingElement$attri2 = openingElement.attributes) === null || _openingElement$attri2 === void 0 ? void 0 : _openingElement$attri2.forEach(attr => {
+        var _attr$name2;
+        if (attr.type === 'JSXAttribute' && ((_attr$name2 = attr.name) === null || _attr$name2 === void 0 ? void 0 : _attr$name2.type) === 'JSXIdentifier' && attr.name.name === 'appearance') {
+          // Handle different types of appearance values
+          if (appearanceValue === 'dynamic') {
+            // For dynamic values, add a comment
+            addCommentBefore(j, j(path), `FIXME: This Badge component uses a dynamic \`appearance\` prop with updated semantic values.
+Please verify that the values being passed use the new semantic values: neutral, information, inverse, danger, success.
+Old values mapping: default→neutral, primary→information, primaryInverted→inverse, added→success, removed→danger, important→danger.`);
+          } else if (appearanceValue === 'primaryInverted') {
+            var _attr$value3;
+            // For primaryInverted, we need to add a comment since it maps to inverse
+            addCommentBefore(j, j(path), `FIXME: This Badge component used \`appearance="primaryInverted"\` which has been migrated to \`appearance="inverse"\`.
+Please verify the visual appearance matches your expectations.`);
+            // Update the value
+            if (((_attr$value3 = attr.value) === null || _attr$value3 === void 0 ? void 0 : _attr$value3.type) === 'StringLiteral') {
+              attr.value.value = OLD_TO_NEW_APPEARANCE_MAP[appearanceValue];
+            }
+          } else if (appearanceValue && !OLD_TO_NEW_APPEARANCE_MAP[appearanceValue]) {
+            // For invalid string values, add a warning comment
+            addCommentBefore(j, j(path), `FIXME: This Badge component uses an unknown \`appearance\` value "${appearanceValue}".
+Valid new semantic appearance values are: ${Object.values(OLD_TO_NEW_APPEARANCE_MAP).filter((v, i, arr) => arr.indexOf(v) === i).join(', ')}.
+Please update this value to a valid semantic appearance value.`);
+          } else if (appearanceValue && OLD_TO_NEW_APPEARANCE_MAP[appearanceValue]) {
+            var _attr$value4;
+            // For valid string values, update the value to the new semantic value
+            if (((_attr$value4 = attr.value) === null || _attr$value4 === void 0 ? void 0 : _attr$value4.type) === 'StringLiteral') {
+              attr.value.value = OLD_TO_NEW_APPEARANCE_MAP[appearanceValue];
+            }
+          }
+        }
+      });
+    }
+  });
+  return source.toSource(PRINT_SETTINGS);
+}

package/dist/es2019/presets/index.js

@@ -14,5 +14,6 @@ import './remove-dark-theme-vr-options/remove-dark-theme-vr-options';
 import './remove-token-fallbacks/remove-token-fallbacks';
 import './lozenge-appearance-semantic-migration/lozenge-appearance-semantic-migration';
 import './lozenge-to-tag-migration/lozenge-to-tag-migration';
-const presets = ['styled-to-emotion', 'theme-remove-deprecated-mixins', 'migrate-to-link', 'migrate-to-new-buttons', 'migrate-icon-object-to-object', 'upgrade-pragmatic-drag-and-drop-to-stable', 'remove-dark-theme-vr-options', 'remove-token-fallbacks', 'lozenge-appearance-semantic-migration', 'lozenge-to-tag-migration'].map(preset => path.join(__dirname, preset, `${preset}.@(ts|js|tsx)`));
+import './badge-appearance-semantic-migration/badge-appearance-semantic-migration';
+const presets = ['styled-to-emotion', 'theme-remove-deprecated-mixins', 'migrate-to-link', 'migrate-to-new-buttons', 'migrate-icon-object-to-object', 'upgrade-pragmatic-drag-and-drop-to-stable', 'remove-dark-theme-vr-options', 'remove-token-fallbacks', 'lozenge-appearance-semantic-migration', 'lozenge-to-tag-migration', 'badge-appearance-semantic-migration'].map(preset => path.join(__dirname, preset, `${preset}.@(ts|js|tsx)`));
 export default presets;

package/dist/es2019/presets/lozenge-to-tag-migration/codemods/lozenge-to-tag-migration.js

@@ -90,6 +90,8 @@ If isBold is typically false, consider migrating to <Tag /> from '@atlaskit/tag'
     let unknownAppearanceValue = '';
 
     // Process children to extract text
+    let hasVariableChild = false;
+    let variableChildExpression = null;
     if (element.children && element.children.length > 0) {
       if (element.children.length === 1) {
         const child = element.children[0];
@@ -100,7 +102,21 @@ If isBold is typically false, consider migrating to <Tag /> from '@atlaskit/tag'
           }
         } else if (j.JSXExpressionContainer.check(child) && j.StringLiteral.check(child.expression)) {
           textContent = child.expression.value;
+        } else if (j.JSXExpressionContainer.check(child)) {
+          // Check if it's a simple identifier (variable) or member expression
+          if (j.Identifier.check(child.expression)) {
+            hasVariableChild = true;
+            variableChildExpression = child.expression;
+          } else if (j.MemberExpression.check(child.expression)) {
+            // Handle member expressions like obj.prop
+            hasVariableChild = true;
+            variableChildExpression = child.expression;
+          } else {
+            // Complex expression or JSX element
+            hasComplexChildren = true;
+          }
         } else {
+          // JSX elements or other complex children
           hasComplexChildren = true;
         }
       } else {
@@ -150,8 +166,11 @@ If isBold is typically false, consider migrating to <Tag /> from '@atlaskit/tag'
     });
 
     // Assemble attributes in correct order: text, other props, color
-    if (textContent && !hasComplexChildren) {
+    if (textContent && !hasComplexChildren && !hasVariableChild) {
       newAttributes.push(j.jsxAttribute(j.jsxIdentifier('text'), j.stringLiteral(textContent)));
+    } else if (hasVariableChild && variableChildExpression) {
+      // Use the variable expression as the text prop
+      newAttributes.push(j.jsxAttribute(j.jsxIdentifier('text'), j.jsxExpressionContainer(variableChildExpression)));
     }
 
     // Add other attributes
@@ -173,6 +192,9 @@ If isBold is typically false, consider migrating to <Tag /> from '@atlaskit/tag'
     if (hasComplexChildren) {
       warnings.push("FIXME: This Tag component has complex children that couldn't be automatically migrated to the text prop.\nTag component only supports simple text via the text prop. Please manually convert the children content.");
     }
+    if (hasVariableChild) {
+      warnings.push('FIXME: This Tag component uses a variable as the text prop. Please verify that the variable contains a string value.');
+    }
     if (hasMaxWidthProp) {
       warnings.push('FIXME: maxWidth prop was removed during migration from Lozenge to Tag.\nTag component does not support maxWidth. Please review if width constraints are needed.');
     }

package/dist/esm/presets/badge-appearance-semantic-migration/badge-appearance-semantic-migration.js

@@ -0,0 +1,37 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import badgeAppearanceSemanticMigrationTransformer from './codemods/badge-appearance-semantic-migration';
+export default function transformer(_x, _x2) {
+  return _transformer.apply(this, arguments);
+}
+function _transformer() {
+  _transformer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(file, api) {
+    var transformers, src;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          transformers = [badgeAppearanceSemanticMigrationTransformer];
+          src = file.source;
+          transformers.forEach(function (transformer) {
+            if (typeof src === 'undefined') {
+              return;
+            }
+            var nextSrc = transformer(_objectSpread(_objectSpread({}, file), {}, {
+              source: src
+            }), api);
+            if (nextSrc) {
+              src = nextSrc;
+            }
+          });
+          return _context.abrupt("return", src);
+        case 4:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _transformer.apply(this, arguments);
+}

package/dist/esm/presets/badge-appearance-semantic-migration/codemods/badge-appearance-semantic-migration.js

@@ -0,0 +1,139 @@
+import { getImportDeclaration } from '@hypermod/utils';
+import { addCommentBefore } from '@atlaskit/codemod-utils';
+var BADGE_ENTRY_POINT = '@atlaskit/badge';
+var PRINT_SETTINGS = {
+  quote: 'single'
+};
+
+// Old appearance values that map to new semantic appearance values
+var OLD_TO_NEW_APPEARANCE_MAP = {
+  added: 'success',
+  removed: 'danger',
+  default: 'neutral',
+  primary: 'information',
+  primaryInverted: 'inverse',
+  important: 'danger'
+};
+/**
+ * Codemod to migrate Badge component appearance semantic values.
+ *
+ * This codemod:
+ * 1. Updates `appearance` prop values to new semantic values
+ * 2. Maps old semantic values to new semantic values (e.g. added → success, removed → danger, primary → information)
+ * 3. Adds comments for dynamic values that need manual verification
+ */
+export default function transformer(file, api) {
+  var j = api.jscodeshift;
+  var source = j(file.source);
+
+  // Find all Badge imports
+  var badgeImports = getImportDeclaration(j, source, BADGE_ENTRY_POINT);
+
+  // If no Badge imports, exit early
+  if (!badgeImports.length) {
+    return file.source;
+  }
+
+  // Get all imported Badge identifiers (could be renamed)
+  var badgeIdentifiers = new Set();
+  badgeImports.forEach(function (importPath) {
+    var _importPath$value$spe;
+    (_importPath$value$spe = importPath.value.specifiers) === null || _importPath$value$spe === void 0 || _importPath$value$spe.forEach(function (specifier) {
+      var _specifier$imported;
+      if (specifier.type === 'ImportDefaultSpecifier') {
+        var _specifier$local;
+        // Handle: import Badge from '@atlaskit/badge'
+        badgeIdentifiers.add(((_specifier$local = specifier.local) === null || _specifier$local === void 0 ? void 0 : _specifier$local.name) || 'Badge');
+      } else if (specifier.type === 'ImportSpecifier' && ((_specifier$imported = specifier.imported) === null || _specifier$imported === void 0 ? void 0 : _specifier$imported.type) === 'Identifier' && specifier.imported.name === 'default') {
+        var _specifier$local2;
+        // Handle: import { default as MyBadge } from '@atlaskit/badge'
+        badgeIdentifiers.add(((_specifier$local2 = specifier.local) === null || _specifier$local2 === void 0 ? void 0 : _specifier$local2.name) || 'Badge');
+      }
+    });
+  });
+
+  // If no Badge identifiers found, exit early
+  if (badgeIdentifiers.size === 0) {
+    return file.source;
+  }
+
+  // Find all Badge JSX elements
+  var badgeElements = [];
+  source.find(j.JSXElement).forEach(function (path) {
+    var _openingElement$name;
+    var openingElement = path.value.openingElement;
+    if (((_openingElement$name = openingElement.name) === null || _openingElement$name === void 0 ? void 0 : _openingElement$name.type) === 'JSXIdentifier' && badgeIdentifiers.has(openingElement.name.name)) {
+      var _openingElement$attri;
+      var element = {
+        path: path,
+        hasAppearanceProp: false
+      };
+
+      // Check for appearance prop
+      (_openingElement$attri = openingElement.attributes) === null || _openingElement$attri === void 0 || _openingElement$attri.forEach(function (attr) {
+        var _attr$name;
+        if (attr.type === 'JSXAttribute' && ((_attr$name = attr.name) === null || _attr$name === void 0 ? void 0 : _attr$name.type) === 'JSXIdentifier') {
+          if (attr.name.name === 'appearance') {
+            var _attr$value, _attr$value2;
+            element.hasAppearanceProp = true;
+            if (((_attr$value = attr.value) === null || _attr$value === void 0 ? void 0 : _attr$value.type) === 'StringLiteral') {
+              element.appearanceValue = attr.value.value;
+            } else if (((_attr$value2 = attr.value) === null || _attr$value2 === void 0 ? void 0 : _attr$value2.type) === 'JSXExpressionContainer') {
+              // Handle dynamic values
+              var expression = attr.value.expression;
+              if (expression.type === 'StringLiteral') {
+                element.appearanceValue = expression.value;
+              } else {
+                element.appearanceValue = 'dynamic';
+              }
+            }
+          }
+        }
+      });
+      badgeElements.push(element);
+    }
+  });
+
+  // Process each Badge element
+  badgeElements.forEach(function (element) {
+    var path = element.path,
+      hasAppearanceProp = element.hasAppearanceProp,
+      appearanceValue = element.appearanceValue;
+    var openingElement = path.value.openingElement;
+
+    // Update appearance prop values to new semantic values
+    if (hasAppearanceProp) {
+      var _openingElement$attri2;
+      (_openingElement$attri2 = openingElement.attributes) === null || _openingElement$attri2 === void 0 || _openingElement$attri2.forEach(function (attr) {
+        var _attr$name2;
+        if (attr.type === 'JSXAttribute' && ((_attr$name2 = attr.name) === null || _attr$name2 === void 0 ? void 0 : _attr$name2.type) === 'JSXIdentifier' && attr.name.name === 'appearance') {
+          // Handle different types of appearance values
+          if (appearanceValue === 'dynamic') {
+            // For dynamic values, add a comment
+            addCommentBefore(j, j(path), "FIXME: This Badge component uses a dynamic `appearance` prop with updated semantic values.\nPlease verify that the values being passed use the new semantic values: neutral, information, inverse, danger, success.\nOld values mapping: default\u2192neutral, primary\u2192information, primaryInverted\u2192inverse, added\u2192success, removed\u2192danger, important\u2192danger.");
+          } else if (appearanceValue === 'primaryInverted') {
+            var _attr$value3;
+            // For primaryInverted, we need to add a comment since it maps to inverse
+            addCommentBefore(j, j(path), "FIXME: This Badge component used `appearance=\"primaryInverted\"` which has been migrated to `appearance=\"inverse\"`.\nPlease verify the visual appearance matches your expectations.");
+            // Update the value
+            if (((_attr$value3 = attr.value) === null || _attr$value3 === void 0 ? void 0 : _attr$value3.type) === 'StringLiteral') {
+              attr.value.value = OLD_TO_NEW_APPEARANCE_MAP[appearanceValue];
+            }
+          } else if (appearanceValue && !OLD_TO_NEW_APPEARANCE_MAP[appearanceValue]) {
+            // For invalid string values, add a warning comment
+            addCommentBefore(j, j(path), "FIXME: This Badge component uses an unknown `appearance` value \"".concat(appearanceValue, "\".\nValid new semantic appearance values are: ").concat(Object.values(OLD_TO_NEW_APPEARANCE_MAP).filter(function (v, i, arr) {
+              return arr.indexOf(v) === i;
+            }).join(', '), ".\nPlease update this value to a valid semantic appearance value."));
+          } else if (appearanceValue && OLD_TO_NEW_APPEARANCE_MAP[appearanceValue]) {
+            var _attr$value4;
+            // For valid string values, update the value to the new semantic value
+            if (((_attr$value4 = attr.value) === null || _attr$value4 === void 0 ? void 0 : _attr$value4.type) === 'StringLiteral') {
+              attr.value.value = OLD_TO_NEW_APPEARANCE_MAP[appearanceValue];
+            }
+          }
+        }
+      });
+    }
+  });
+  return source.toSource(PRINT_SETTINGS);
+}

package/dist/esm/presets/index.js

@@ -14,7 +14,8 @@ import './remove-dark-theme-vr-options/remove-dark-theme-vr-options';
 import './remove-token-fallbacks/remove-token-fallbacks';
 import './lozenge-appearance-semantic-migration/lozenge-appearance-semantic-migration';
 import './lozenge-to-tag-migration/lozenge-to-tag-migration';
-var presets = ['styled-to-emotion', 'theme-remove-deprecated-mixins', 'migrate-to-link', 'migrate-to-new-buttons', 'migrate-icon-object-to-object', 'upgrade-pragmatic-drag-and-drop-to-stable', 'remove-dark-theme-vr-options', 'remove-token-fallbacks', 'lozenge-appearance-semantic-migration', 'lozenge-to-tag-migration'].map(function (preset) {
+import './badge-appearance-semantic-migration/badge-appearance-semantic-migration';
+var presets = ['styled-to-emotion', 'theme-remove-deprecated-mixins', 'migrate-to-link', 'migrate-to-new-buttons', 'migrate-icon-object-to-object', 'upgrade-pragmatic-drag-and-drop-to-stable', 'remove-dark-theme-vr-options', 'remove-token-fallbacks', 'lozenge-appearance-semantic-migration', 'lozenge-to-tag-migration', 'badge-appearance-semantic-migration'].map(function (preset) {
   return path.join(__dirname, preset, "".concat(preset, ".@(ts|js|tsx)"));
 });
 export default presets;

package/dist/esm/presets/lozenge-to-tag-migration/codemods/lozenge-to-tag-migration.js

@@ -93,6 +93,8 @@ var transformer = function transformer(file, api) {
     var unknownAppearanceValue = '';
 
     // Process children to extract text
+    var hasVariableChild = false;
+    var variableChildExpression = null;
     if (element.children && element.children.length > 0) {
       if (element.children.length === 1) {
         var child = element.children[0];
@@ -103,7 +105,21 @@ var transformer = function transformer(file, api) {
           }
         } else if (j.JSXExpressionContainer.check(child) && j.StringLiteral.check(child.expression)) {
           textContent = child.expression.value;
+        } else if (j.JSXExpressionContainer.check(child)) {
+          // Check if it's a simple identifier (variable) or member expression
+          if (j.Identifier.check(child.expression)) {
+            hasVariableChild = true;
+            variableChildExpression = child.expression;
+          } else if (j.MemberExpression.check(child.expression)) {
+            // Handle member expressions like obj.prop
+            hasVariableChild = true;
+            variableChildExpression = child.expression;
+          } else {
+            // Complex expression or JSX element
+            hasComplexChildren = true;
+          }
         } else {
+          // JSX elements or other complex children
           hasComplexChildren = true;
         }
       } else {
@@ -153,8 +169,11 @@ var transformer = function transformer(file, api) {
     });
 
     // Assemble attributes in correct order: text, other props, color
-    if (textContent && !hasComplexChildren) {
+    if (textContent && !hasComplexChildren && !hasVariableChild) {
       newAttributes.push(j.jsxAttribute(j.jsxIdentifier('text'), j.stringLiteral(textContent)));
+    } else if (hasVariableChild && variableChildExpression) {
+      // Use the variable expression as the text prop
+      newAttributes.push(j.jsxAttribute(j.jsxIdentifier('text'), j.jsxExpressionContainer(variableChildExpression)));
     }
 
     // Add other attributes
@@ -176,6 +195,9 @@ var transformer = function transformer(file, api) {
     if (hasComplexChildren) {
       warnings.push("FIXME: This Tag component has complex children that couldn't be automatically migrated to the text prop.\nTag component only supports simple text via the text prop. Please manually convert the children content.");
     }
+    if (hasVariableChild) {
+      warnings.push('FIXME: This Tag component uses a variable as the text prop. Please verify that the variable contains a string value.');
+    }
     if (hasMaxWidthProp) {
       warnings.push('FIXME: maxWidth prop was removed during migration from Lozenge to Tag.\nTag component does not support maxWidth. Please review if width constraints are needed.');
     }

package/dist/types/presets/badge-appearance-semantic-migration/badge-appearance-semantic-migration.d.ts

@@ -0,0 +1,2 @@
+import type { API, FileInfo } from 'jscodeshift';
+export default function transformer(file: FileInfo, api: API): Promise<string>;

package/dist/types/presets/badge-appearance-semantic-migration/codemods/badge-appearance-semantic-migration.d.ts

@@ -0,0 +1,10 @@
+import { type API, type FileInfo } from 'jscodeshift';
+/**
+ * Codemod to migrate Badge component appearance semantic values.
+ *
+ * This codemod:
+ * 1. Updates `appearance` prop values to new semantic values
+ * 2. Maps old semantic values to new semantic values (e.g. added → success, removed → danger, primary → information)
+ * 3. Adds comments for dynamic values that need manual verification
+ */
+export default function transformer(file: FileInfo, api: API): string;

package/dist/types/presets/index.d.ts

@@ -12,5 +12,6 @@ import './remove-dark-theme-vr-options/remove-dark-theme-vr-options';
 import './remove-token-fallbacks/remove-token-fallbacks';
 import './lozenge-appearance-semantic-migration/lozenge-appearance-semantic-migration';
 import './lozenge-to-tag-migration/lozenge-to-tag-migration';
+import './badge-appearance-semantic-migration/badge-appearance-semantic-migration';
 declare const presets: string[];
 export default presets;

package/dist/types-ts4.5/presets/badge-appearance-semantic-migration/badge-appearance-semantic-migration.d.ts

@@ -0,0 +1,2 @@
+import type { API, FileInfo } from 'jscodeshift';
+export default function transformer(file: FileInfo, api: API): Promise<string>;

package/dist/types-ts4.5/presets/badge-appearance-semantic-migration/codemods/badge-appearance-semantic-migration.d.ts

@@ -0,0 +1,10 @@
+import { type API, type FileInfo } from 'jscodeshift';
+/**
+ * Codemod to migrate Badge component appearance semantic values.
+ *
+ * This codemod:
+ * 1. Updates `appearance` prop values to new semantic values
+ * 2. Maps old semantic values to new semantic values (e.g. added → success, removed → danger, primary → information)
+ * 3. Adds comments for dynamic values that need manual verification
+ */
+export default function transformer(file: FileInfo, api: API): string;

package/dist/types-ts4.5/presets/index.d.ts

@@ -12,5 +12,6 @@ import './remove-dark-theme-vr-options/remove-dark-theme-vr-options';
 import './remove-token-fallbacks/remove-token-fallbacks';
 import './lozenge-appearance-semantic-migration/lozenge-appearance-semantic-migration';
 import './lozenge-to-tag-migration/lozenge-to-tag-migration';
+import './badge-appearance-semantic-migration/badge-appearance-semantic-migration';
 declare const presets: string[];
 export default presets;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/codemod-cli",
-	"version": "0.31.2",
+	"version": "0.32.1",
 	"description": "A cli for distributing codemods for atlassian-frontend components and services",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
 	"bin": "./bin/codemod-cli.js",
 	"dependencies": {
 		"@atlaskit/codemod-utils": "^4.2.0",
-		"@atlaskit/tokens": "^8.0.0",
+		"@atlaskit/tokens": "^8.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@codeshift/utils": "^0.2.4",
 		"@hypermod/utils": "^0.4.2",