@atlaskit/codemod-cli 0.32.2 → 0.33.0

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

@@ -0,0 +1,373 @@
+import { getImportDeclaration } from '@hypermod/utils';
+const TAG_ENTRY_POINT = '@atlaskit/tag';
+const TAG_REMOVABLE_ENTRY_POINT = '@atlaskit/tag/removable-tag';
+const TAG_SIMPLE_ENTRY_POINT = '@atlaskit/tag/simple-tag';
+const AVATAR_ENTRY_POINT = '@atlaskit/avatar';
+const PRINT_SETTINGS = {
+  quote: 'single'
+};
+
+// Color mapping from Light versions to non-light versions
+const 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
+const 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;
+    const 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') {
+    const 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
+      const 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') {
+    const 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(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) {
+  const j = api.jscodeshift;
+  const source = j(file.source);
+
+  // Track all Tag identifiers and whether they were SimpleTag
+  const tagIdentifiers = new Map();
+
+  // Find all Tag imports from main entry point
+  const mainTagImports = getImportDeclaration(j, source, TAG_ENTRY_POINT);
+  mainTagImports.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, _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;
+        const 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,
+            isSimpleTag: true
+          });
+        } else if (specifier.imported.name === 'RemovableTag') {
+          // import { RemovableTag } from '@atlaskit/tag'
+          tagIdentifiers.set(localName, {
+            localName,
+            isSimpleTag: false
+          });
+        }
+      }
+    });
+  });
+
+  // Find imports from removable-tag entry point
+  const removableTagImports = getImportDeclaration(j, source, TAG_REMOVABLE_ENTRY_POINT);
+  removableTagImports.forEach(importPath => {
+    var _importPath$value$spe2;
+    (_importPath$value$spe2 = importPath.value.specifiers) === null || _importPath$value$spe2 === void 0 ? void 0 : _importPath$value$spe2.forEach(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
+  const simpleTagImports = getImportDeclaration(j, source, TAG_SIMPLE_ENTRY_POINT);
+  simpleTagImports.forEach(importPath => {
+    var _importPath$value$spe3;
+    (_importPath$value$spe3 = importPath.value.specifiers) === null || _importPath$value$spe3 === void 0 ? void 0 : _importPath$value$spe3.forEach(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
+  const avatarImports = getImportDeclaration(j, source, AVATAR_ENTRY_POINT);
+  const hasAvatarImport = avatarImports.length > 0;
+
+  // Track which tags need AvatarTag vs regular Tag
+  const tagsToMigrateToAvatarTag = new Set();
+  const tagsNeedingManualMigration = new Set();
+  let hasRegularTagUsage = false; // Track if any tag remains as regular Tag
+
+  // Find and process all Tag JSX elements
+  source.find(j.JSXElement).forEach(path => {
+    var _openingElement$name2;
+    const 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)) {
+      const componentName = openingElement.name.name;
+      const tagInfo = tagIdentifiers.get(componentName);
+      const attributes = openingElement.attributes || [];
+
+      // Check for elemBefore with Avatar
+      const elemBeforeAttr = findAttribute(attributes, 'elemBefore');
+      const colorAttr = findAttribute(attributes, 'color');
+      let shouldMigrateToAvatarTag = false;
+      if (elemBeforeAttr && hasAvatarImport) {
+        const {
+          isAvatar,
+          avatarJSX
+        } = hasOnlyAvatarInElemBefore(elemBeforeAttr);
+        if (isAvatar && avatarJSX) {
+          var _path$value$closingEl, _path$value$closingEl2, _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 ? void 0 : (_path$value$closingEl2 = _path$value$closingEl.name) === null || _path$value$closingEl2 === void 0 ? void 0 : _path$value$closingEl2.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') {
+            const expression = elemBeforeAttr.value.expression;
+
+            // If it's a direct Avatar component, convert to render props
+            if (isAvatarComponent(expression)) {
+              // Create: (avatarProps) => <Avatar {...avatarProps} originalProps... />
+              const avatarElement = expression;
+              const avatarAttributes = avatarElement.openingElement.attributes || [];
+
+              // Build new attributes with spread first, then existing props
+              const newAttributes = [j.jsxSpreadAttribute(j.identifier('avatarProps')), ...avatarAttributes];
+              avatarElement.openingElement.attributes = newAttributes;
+
+              // Wrap in arrow function
+              const 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(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$closingEl3, _path$value$closingEl4;
+        // Keep as regular Tag, rename to "Tag" if needed
+        hasRegularTagUsage = true;
+        openingElement.name.name = 'Tag';
+        if (((_path$value$closingEl3 = path.value.closingElement) === null || _path$value$closingEl3 === void 0 ? void 0 : (_path$value$closingEl4 = _path$value$closingEl3.name) === null || _path$value$closingEl4 === void 0 ? void 0 : _path$value$closingEl4.type) === 'JSXIdentifier') {
+          path.value.closingElement.name.name = 'Tag';
+        }
+
+        // Migrate color if present
+        if (colorAttr) {
+          const 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') {
+              const 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(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(path => {
+    const comment = ' TODO: Manual migration needed - color prop value could not be automatically migrated ';
+    j(path).forEach(p => {
+      const node = p.value;
+      node.comments = node.comments || [];
+      node.comments.push(j.commentBlock(comment));
+    });
+  });
+
+  // Update imports
+  const needsAvatarTagImport = tagsToMigrateToAvatarTag.size > 0;
+  // We need default Tag import if there are any regular tag usages
+  const needsDefaultTagImport = hasRegularTagUsage;
+
+  // Create new imports
+  const 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(importPath => j(importPath).remove());
+  removableTagImports.forEach(importPath => j(importPath).remove());
+  simpleTagImports.forEach(importPath => j(importPath).remove());
+
+  // Insert new imports after Avatar import (if exists) or at the beginning
+  if (newImports.length > 0) {
+    const program = source.find(j.Program);
+    if (program.length > 0) {
+      const body = program.at(0).get('body').value;
+      if (avatarImports.length > 0) {
+        // Find the Avatar import in the body
+        const avatarImportNode = avatarImports.at(0).get().value;
+        const avatarIndex = body.findIndex(node => node === avatarImportNode);
+        if (avatarIndex !== -1) {
+          // Insert all new imports right after Avatar import
+          body.splice(avatarIndex + 1, 0, ...newImports);
+        } else {
+          // Fallback: add at beginning
+          body.unshift(...newImports.reverse());
+        }
+      } else {
+        // No Avatar import, add at beginning
+        body.unshift(...newImports.reverse());
+      }
+    }
+  }
+  return source.toSource(PRINT_SETTINGS);
+}

package/dist/es2019/presets/tag-to-newTag-migration/tag-to-newTag-migration.js

@@ -0,0 +1,18 @@
+import tagToNewTagMigrationTransformer from './codemods/tag-to-newTag-migration';
+export default async function transformer(file, api) {
+  const transformers = [tagToNewTagMigrationTransformer];
+  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/esm/main.js

@@ -355,7 +355,7 @@ function _main() {
         case 4:
           _yield$parseArgs = _context6.sent;
           packages = _yield$parseArgs.packages;
-          _process$env$_PACKAGE = "0.32.1", _PACKAGE_VERSION_ = _process$env$_PACKAGE === void 0 ? '0.0.0-dev' : _process$env$_PACKAGE;
+          _process$env$_PACKAGE = "0.33.0", _PACKAGE_VERSION_ = _process$env$_PACKAGE === void 0 ? '0.0.0-dev' : _process$env$_PACKAGE;
           logger.log(chalk.bgBlue(chalk.black("\uD83D\uDCDA Atlassian-Frontend codemod library @ ".concat(_PACKAGE_VERSION_, " \uD83D\uDCDA"))));
           if (packages && packages.length > 0) {
             logger.log(chalk.gray("Searching for codemods for newer versions of the following packages: ".concat(packages.map(function (pkg) {

package/dist/esm/presets/index.js

@@ -15,7 +15,8 @@ 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';
-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) {
+import './tag-to-newTag-migration/tag-to-newTag-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', 'tag-to-newTag-migration'].map(function (preset) {
   return path.join(__dirname, preset, "".concat(preset, ".@(ts|js|tsx)"));
 });
 export default presets;