@atlaskit/codemod-cli 0.32.2 → 0.33.0

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

@@ -0,0 +1,381 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { getImportDeclaration } from '@hypermod/utils';
+var TAG_ENTRY_POINT = '@atlaskit/tag';
+var TAG_REMOVABLE_ENTRY_POINT = '@atlaskit/tag/removable-tag';
+var TAG_SIMPLE_ENTRY_POINT = '@atlaskit/tag/simple-tag';
+var AVATAR_ENTRY_POINT = '@atlaskit/avatar';
+var PRINT_SETTINGS = {
+  quote: 'single'
+};
+
+// Color mapping from Light versions to non-light versions
+var COLOR_MAP = {
+  limeLight: 'lime',
+  orangeLight: 'orange',
+  magentaLight: 'magenta',
+  greenLight: 'green',
+  blueLight: 'blue',
+  redLight: 'red',
+  purpleLight: 'purple',
+  greyLight: 'gray',
+  // Note: grey -> gray spelling change
+  tealLight: 'teal',
+  yellowLight: 'yellow',
+  grey: 'gray' // Also handle non-light grey -> gray
+};
+
+// Valid target color values that don't need migration
+var VALID_COLORS = new Set(['lime', 'orange', 'magenta', 'green', 'blue', 'red', 'purple', 'gray', 'teal', 'yellow', 'standard']);
+/**
+ * Check if a JSX expression is an Avatar component from '@atlaskit/avatar'
+ */
+function isAvatarComponent(expression) {
+  // Handle <Avatar ... />
+  if (expression.type === 'JSXElement') {
+    var _openingElement$name;
+    var openingElement = expression.openingElement;
+    if (((_openingElement$name = openingElement.name) === null || _openingElement$name === void 0 ? void 0 : _openingElement$name.type) === 'JSXIdentifier') {
+      return openingElement.name.name === 'Avatar';
+    }
+  }
+  return false;
+}
+
+/**
+ * Check if elemBefore contains only an Avatar component (directly or via render props)
+ */
+function hasOnlyAvatarInElemBefore(attr) {
+  var _attr$value;
+  if (((_attr$value = attr.value) === null || _attr$value === void 0 ? void 0 : _attr$value.type) === 'JSXExpressionContainer') {
+    var expression = attr.value.expression;
+
+    // Direct Avatar: elemBefore={<Avatar />}
+    if (isAvatarComponent(expression)) {
+      return {
+        isAvatar: true,
+        avatarJSX: expression
+      };
+    }
+
+    // Render props: elemBefore={(props) => <Avatar {...props} />}
+    if ((expression.type === 'ArrowFunctionExpression' || expression.type === 'FunctionExpression') && expression.body) {
+      // Check if the function body is an Avatar component
+      var body = expression.body;
+      if (isAvatarComponent(body)) {
+        return {
+          isAvatar: true,
+          avatarJSX: body
+        };
+      }
+    }
+  }
+  return {
+    isAvatar: false
+  };
+}
+
+/**
+ * Extract string value from a JSX attribute value
+ */
+function extractStringValue(attrValue) {
+  if (!attrValue) {
+    return null;
+  }
+  if (attrValue.type === 'StringLiteral') {
+    return attrValue.value;
+  }
+  if (attrValue.type === 'JSXExpressionContainer') {
+    var expression = attrValue.expression;
+    if (expression.type === 'StringLiteral') {
+      return expression.value;
+    }
+  }
+  return null;
+}
+
+/**
+ * Find an attribute by name in the attributes array
+ */
+function findAttribute(attributes, attrName) {
+  return attributes === null || attributes === void 0 ? void 0 : attributes.find(function (attr) {
+    var _attr$name;
+    return attr.type === 'JSXAttribute' && ((_attr$name = attr.name) === null || _attr$name === void 0 ? void 0 : _attr$name.type) === 'JSXIdentifier' && attr.name.name === attrName;
+  });
+}
+
+/**
+ * Codemod to migrate Tag components to new Tag/AvatarTag API.
+ *
+ * This codemod:
+ * 1. Identifies all Tag imports from various entry points
+ * 2. For tags with elemBefore containing only Avatar:
+ *    - Migrates to AvatarTag from '@atlaskit/tag'
+ *    - Renames elemBefore to avatar
+ *    - Converts avatar to render props function
+ *    - Removes color prop
+ *    - Adds isRemovable={false} if original was SimpleTag
+ * 3. For other tags:
+ *    - Migrates to default import from '@atlaskit/tag'
+ *    - Removes appearance prop
+ *    - Migrates color values using COLOR_MAP
+ *    - Adds isRemovable={false} if original was SimpleTag
+ *    - Adds comment for manual migration if color can't be mapped
+ */
+export default function transformer(file, api) {
+  var j = api.jscodeshift;
+  var source = j(file.source);
+
+  // Track all Tag identifiers and whether they were SimpleTag
+  var tagIdentifiers = new Map();
+
+  // Find all Tag imports from main entry point
+  var mainTagImports = getImportDeclaration(j, source, TAG_ENTRY_POINT);
+  mainTagImports.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, _specifier$local2;
+        // import Tag from '@atlaskit/tag' -> RemovableTag (default)
+        tagIdentifiers.set(((_specifier$local = specifier.local) === null || _specifier$local === void 0 ? void 0 : _specifier$local.name) || 'Tag', {
+          localName: ((_specifier$local2 = specifier.local) === null || _specifier$local2 === void 0 ? void 0 : _specifier$local2.name) || 'Tag',
+          isSimpleTag: false
+        });
+      } else if (specifier.type === 'ImportSpecifier' && ((_specifier$imported = specifier.imported) === null || _specifier$imported === void 0 ? void 0 : _specifier$imported.type) === 'Identifier') {
+        var _specifier$local3;
+        var localName = ((_specifier$local3 = specifier.local) === null || _specifier$local3 === void 0 ? void 0 : _specifier$local3.name) || specifier.imported.name;
+        if (specifier.imported.name === 'SimpleTag') {
+          // import { SimpleTag } from '@atlaskit/tag'
+          tagIdentifiers.set(localName, {
+            localName: localName,
+            isSimpleTag: true
+          });
+        } else if (specifier.imported.name === 'RemovableTag') {
+          // import { RemovableTag } from '@atlaskit/tag'
+          tagIdentifiers.set(localName, {
+            localName: localName,
+            isSimpleTag: false
+          });
+        }
+      }
+    });
+  });
+
+  // Find imports from removable-tag entry point
+  var removableTagImports = getImportDeclaration(j, source, TAG_REMOVABLE_ENTRY_POINT);
+  removableTagImports.forEach(function (importPath) {
+    var _importPath$value$spe2;
+    (_importPath$value$spe2 = importPath.value.specifiers) === null || _importPath$value$spe2 === void 0 || _importPath$value$spe2.forEach(function (specifier) {
+      if (specifier.type === 'ImportDefaultSpecifier') {
+        var _specifier$local4, _specifier$local5;
+        // import RemovableTag from '@atlaskit/tag/removable-tag'
+        tagIdentifiers.set(((_specifier$local4 = specifier.local) === null || _specifier$local4 === void 0 ? void 0 : _specifier$local4.name) || 'RemovableTag', {
+          localName: ((_specifier$local5 = specifier.local) === null || _specifier$local5 === void 0 ? void 0 : _specifier$local5.name) || 'RemovableTag',
+          isSimpleTag: false
+        });
+      }
+    });
+  });
+
+  // Find imports from simple-tag entry point
+  var simpleTagImports = getImportDeclaration(j, source, TAG_SIMPLE_ENTRY_POINT);
+  simpleTagImports.forEach(function (importPath) {
+    var _importPath$value$spe3;
+    (_importPath$value$spe3 = importPath.value.specifiers) === null || _importPath$value$spe3 === void 0 || _importPath$value$spe3.forEach(function (specifier) {
+      if (specifier.type === 'ImportDefaultSpecifier') {
+        var _specifier$local6, _specifier$local7;
+        // import SimpleTag from '@atlaskit/tag/simple-tag'
+        tagIdentifiers.set(((_specifier$local6 = specifier.local) === null || _specifier$local6 === void 0 ? void 0 : _specifier$local6.name) || 'SimpleTag', {
+          localName: ((_specifier$local7 = specifier.local) === null || _specifier$local7 === void 0 ? void 0 : _specifier$local7.name) || 'SimpleTag',
+          isSimpleTag: true
+        });
+      }
+    });
+  });
+
+  // If no Tag imports found, exit early
+  if (tagIdentifiers.size === 0) {
+    return file.source;
+  }
+
+  // Check if Avatar is imported
+  var avatarImports = getImportDeclaration(j, source, AVATAR_ENTRY_POINT);
+  var hasAvatarImport = avatarImports.length > 0;
+
+  // Track which tags need AvatarTag vs regular Tag
+  var tagsToMigrateToAvatarTag = new Set();
+  var tagsNeedingManualMigration = new Set();
+  var hasRegularTagUsage = false; // Track if any tag remains as regular Tag
+
+  // Find and process all Tag JSX elements
+  source.find(j.JSXElement).forEach(function (path) {
+    var _openingElement$name2;
+    var openingElement = path.value.openingElement;
+    if (((_openingElement$name2 = openingElement.name) === null || _openingElement$name2 === void 0 ? void 0 : _openingElement$name2.type) === 'JSXIdentifier' && tagIdentifiers.has(openingElement.name.name)) {
+      var componentName = openingElement.name.name;
+      var tagInfo = tagIdentifiers.get(componentName);
+      var attributes = openingElement.attributes || [];
+
+      // Check for elemBefore with Avatar
+      var elemBeforeAttr = findAttribute(attributes, 'elemBefore');
+      var colorAttr = findAttribute(attributes, 'color');
+      var shouldMigrateToAvatarTag = false;
+      if (elemBeforeAttr && hasAvatarImport) {
+        var _hasOnlyAvatarInElemB = hasOnlyAvatarInElemBefore(elemBeforeAttr),
+          isAvatar = _hasOnlyAvatarInElemB.isAvatar,
+          avatarJSX = _hasOnlyAvatarInElemB.avatarJSX;
+        if (isAvatar && avatarJSX) {
+          var _path$value$closingEl, _elemBeforeAttr$name, _elemBeforeAttr$value;
+          shouldMigrateToAvatarTag = true;
+          tagsToMigrateToAvatarTag.add(componentName);
+
+          // Rename component to AvatarTag
+          openingElement.name.name = 'AvatarTag';
+          if (((_path$value$closingEl = path.value.closingElement) === null || _path$value$closingEl === void 0 || (_path$value$closingEl = _path$value$closingEl.name) === null || _path$value$closingEl === void 0 ? void 0 : _path$value$closingEl.type) === 'JSXIdentifier') {
+            path.value.closingElement.name.name = 'AvatarTag';
+          }
+
+          // Rename elemBefore to avatar
+          if (((_elemBeforeAttr$name = elemBeforeAttr.name) === null || _elemBeforeAttr$name === void 0 ? void 0 : _elemBeforeAttr$name.type) === 'JSXIdentifier') {
+            elemBeforeAttr.name.name = 'avatar';
+          }
+
+          // Convert avatar to render props function if not already
+          if (((_elemBeforeAttr$value = elemBeforeAttr.value) === null || _elemBeforeAttr$value === void 0 ? void 0 : _elemBeforeAttr$value.type) === 'JSXExpressionContainer') {
+            var expression = elemBeforeAttr.value.expression;
+
+            // If it's a direct Avatar component, convert to render props
+            if (isAvatarComponent(expression)) {
+              // Create: (avatarProps) => <Avatar {...avatarProps} originalProps... />
+              var avatarElement = expression;
+              var avatarAttributes = avatarElement.openingElement.attributes || [];
+
+              // Build new attributes with spread first, then existing props
+              var newAttributes = [j.jsxSpreadAttribute(j.identifier('avatarProps'))].concat(_toConsumableArray(avatarAttributes));
+              avatarElement.openingElement.attributes = newAttributes;
+
+              // Wrap in arrow function
+              var renderPropsFunc = j.arrowFunctionExpression([j.identifier('avatarProps')], avatarElement);
+              elemBeforeAttr.value.expression = renderPropsFunc;
+            }
+            // If it's already a function, leave it as is
+          }
+
+          // Remove color prop
+          openingElement.attributes = (openingElement.attributes || []).filter(function (attr) {
+            var _attr$name2;
+            if (attr.type === 'JSXAttribute' && ((_attr$name2 = attr.name) === null || _attr$name2 === void 0 ? void 0 : _attr$name2.type) === 'JSXIdentifier') {
+              return attr.name.name !== 'color';
+            }
+            return true;
+          });
+        }
+      }
+      if (!shouldMigrateToAvatarTag) {
+        var _path$value$closingEl2;
+        // Keep as regular Tag, rename to "Tag" if needed
+        hasRegularTagUsage = true;
+        openingElement.name.name = 'Tag';
+        if (((_path$value$closingEl2 = path.value.closingElement) === null || _path$value$closingEl2 === void 0 || (_path$value$closingEl2 = _path$value$closingEl2.name) === null || _path$value$closingEl2 === void 0 ? void 0 : _path$value$closingEl2.type) === 'JSXIdentifier') {
+          path.value.closingElement.name.name = 'Tag';
+        }
+
+        // Migrate color if present
+        if (colorAttr) {
+          var colorValue = extractStringValue(colorAttr.value);
+          if (colorValue && COLOR_MAP[colorValue]) {
+            var _colorAttr$value, _colorAttr$value2;
+            // Update the color value
+            if (((_colorAttr$value = colorAttr.value) === null || _colorAttr$value === void 0 ? void 0 : _colorAttr$value.type) === 'StringLiteral') {
+              colorAttr.value.value = COLOR_MAP[colorValue];
+            } else if (((_colorAttr$value2 = colorAttr.value) === null || _colorAttr$value2 === void 0 ? void 0 : _colorAttr$value2.type) === 'JSXExpressionContainer') {
+              var _expression = colorAttr.value.expression;
+              if (_expression.type === 'StringLiteral') {
+                _expression.value = COLOR_MAP[colorValue];
+              }
+            }
+          } else if (colorValue && !COLOR_MAP[colorValue] && !VALID_COLORS.has(colorValue)) {
+            // Color value is unknown/custom - mark for manual migration
+            tagsNeedingManualMigration.add(path);
+          }
+        }
+      }
+
+      // Remove appearance prop (for both AvatarTag and Tag)
+      openingElement.attributes = (openingElement.attributes || []).filter(function (attr) {
+        var _attr$name3;
+        if (attr.type === 'JSXAttribute' && ((_attr$name3 = attr.name) === null || _attr$name3 === void 0 ? void 0 : _attr$name3.type) === 'JSXIdentifier') {
+          return attr.name.name !== 'appearance';
+        }
+        return true;
+      });
+
+      // Add isRemovable={false} if original was SimpleTag and prop doesn't exist
+      if (tagInfo.isSimpleTag && !findAttribute(openingElement.attributes || [], 'isRemovable')) {
+        openingElement.attributes = openingElement.attributes || [];
+        openingElement.attributes.push(j.jsxAttribute(j.jsxIdentifier('isRemovable'), j.jsxExpressionContainer(j.booleanLiteral(false))));
+      }
+    }
+  });
+
+  // Add comments for manual migration
+  tagsNeedingManualMigration.forEach(function (path) {
+    var comment = ' TODO: Manual migration needed - color prop value could not be automatically migrated ';
+    j(path).forEach(function (p) {
+      var node = p.value;
+      node.comments = node.comments || [];
+      node.comments.push(j.commentBlock(comment));
+    });
+  });
+
+  // Update imports
+  var needsAvatarTagImport = tagsToMigrateToAvatarTag.size > 0;
+  // We need default Tag import if there are any regular tag usages
+  var needsDefaultTagImport = hasRegularTagUsage;
+
+  // Create new imports
+  var newImports = [];
+  if (needsDefaultTagImport) {
+    newImports.push(j.importDeclaration([j.importDefaultSpecifier(j.identifier('Tag'))], j.literal(TAG_ENTRY_POINT)));
+  }
+  if (needsAvatarTagImport) {
+    newImports.push(j.importDeclaration([j.importSpecifier(j.identifier('AvatarTag'))], j.literal(TAG_ENTRY_POINT)));
+  }
+
+  // Remove old Tag imports first
+  mainTagImports.forEach(function (importPath) {
+    return j(importPath).remove();
+  });
+  removableTagImports.forEach(function (importPath) {
+    return j(importPath).remove();
+  });
+  simpleTagImports.forEach(function (importPath) {
+    return j(importPath).remove();
+  });
+
+  // Insert new imports after Avatar import (if exists) or at the beginning
+  if (newImports.length > 0) {
+    var program = source.find(j.Program);
+    if (program.length > 0) {
+      var body = program.at(0).get('body').value;
+      if (avatarImports.length > 0) {
+        // Find the Avatar import in the body
+        var avatarImportNode = avatarImports.at(0).get().value;
+        var avatarIndex = body.findIndex(function (node) {
+          return node === avatarImportNode;
+        });
+        if (avatarIndex !== -1) {
+          // Insert all new imports right after Avatar import
+          body.splice.apply(body, [avatarIndex + 1, 0].concat(newImports));
+        } else {
+          // Fallback: add at beginning
+          body.unshift.apply(body, _toConsumableArray(newImports.reverse()));
+        }
+      } else {
+        // No Avatar import, add at beginning
+        body.unshift.apply(body, _toConsumableArray(newImports.reverse()));
+      }
+    }
+  }
+  return source.toSource(PRINT_SETTINGS);
+}

package/dist/esm/presets/tag-to-newTag-migration/tag-to-newTag-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 tagToNewTagMigrationTransformer from './codemods/tag-to-newTag-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 = [tagToNewTagMigrationTransformer];
+          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/types/presets/index.d.ts

@@ -13,5 +13,6 @@ 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';
+import './tag-to-newTag-migration/tag-to-newTag-migration';
 declare const presets: string[];
 export default presets;

package/dist/types/presets/tag-to-newTag-migration/codemods/tag-to-newTag-migration.d.ts

@@ -0,0 +1,20 @@
+import { type API, type FileInfo } from 'jscodeshift';
+/**
+ * Codemod to migrate Tag components to new Tag/AvatarTag API.
+ *
+ * This codemod:
+ * 1. Identifies all Tag imports from various entry points
+ * 2. For tags with elemBefore containing only Avatar:
+ *    - Migrates to AvatarTag from '@atlaskit/tag'
+ *    - Renames elemBefore to avatar
+ *    - Converts avatar to render props function
+ *    - Removes color prop
+ *    - Adds isRemovable={false} if original was SimpleTag
+ * 3. For other tags:
+ *    - Migrates to default import from '@atlaskit/tag'
+ *    - Removes appearance prop
+ *    - Migrates color values using COLOR_MAP
+ *    - Adds isRemovable={false} if original was SimpleTag
+ *    - Adds comment for manual migration if color can't be mapped
+ */
+export default function transformer(file: FileInfo, api: API): string;

package/dist/types/presets/tag-to-newTag-migration/tag-to-newTag-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/index.d.ts

@@ -13,5 +13,6 @@ 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';
+import './tag-to-newTag-migration/tag-to-newTag-migration';
 declare const presets: string[];
 export default presets;

package/dist/types-ts4.5/presets/tag-to-newTag-migration/codemods/tag-to-newTag-migration.d.ts

@@ -0,0 +1,20 @@
+import { type API, type FileInfo } from 'jscodeshift';
+/**
+ * Codemod to migrate Tag components to new Tag/AvatarTag API.
+ *
+ * This codemod:
+ * 1. Identifies all Tag imports from various entry points
+ * 2. For tags with elemBefore containing only Avatar:
+ *    - Migrates to AvatarTag from '@atlaskit/tag'
+ *    - Renames elemBefore to avatar
+ *    - Converts avatar to render props function
+ *    - Removes color prop
+ *    - Adds isRemovable={false} if original was SimpleTag
+ * 3. For other tags:
+ *    - Migrates to default import from '@atlaskit/tag'
+ *    - Removes appearance prop
+ *    - Migrates color values using COLOR_MAP
+ *    - Adds isRemovable={false} if original was SimpleTag
+ *    - Adds comment for manual migration if color can't be mapped
+ */
+export default function transformer(file: FileInfo, api: API): string;

package/dist/types-ts4.5/presets/tag-to-newTag-migration/tag-to-newTag-migration.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/codemod-cli",
-	"version": "0.32.2",
+	"version": "0.33.0",
 	"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.4.0",
+		"@atlaskit/tokens": "^8.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@codeshift/utils": "^0.2.4",
 		"@hypermod/utils": "^0.4.2",