@atlaskit/codemod-cli 0.29.2 → 0.31.0

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

@@ -0,0 +1,247 @@
+import { addCommentBefore } from '@atlaskit/codemod-utils';
+var transformer = function transformer(file, api) {
+  var j = api.jscodeshift;
+  var source = j(file.source);
+
+  // Check if file has Lozenge imports
+  var lozengeImports = source.find(j.ImportDeclaration).filter(function (path) {
+    return path.node.source.value === '@atlaskit/lozenge';
+  });
+  if (lozengeImports.length === 0) {
+    return file.source;
+  }
+
+  // Get the import name for Lozenge (could be renamed)
+  var lozengeImportName = 'Lozenge';
+  lozengeImports.forEach(function (importPath) {
+    var _importPath$node$spec;
+    (_importPath$node$spec = importPath.node.specifiers) === null || _importPath$node$spec === void 0 || _importPath$node$spec.forEach(function (specifier) {
+      if (j.ImportDefaultSpecifier.check(specifier)) {
+        var _specifier$local;
+        lozengeImportName = ((_specifier$local = specifier.local) === null || _specifier$local === void 0 ? void 0 : _specifier$local.name) || 'Lozenge';
+      } else if (j.ImportSpecifier.check(specifier)) {
+        // Handle { default as Badge } syntax
+        if (j.Identifier.check(specifier.imported) && specifier.imported.name === 'default') {
+          var _specifier$local2;
+          lozengeImportName = ((_specifier$local2 = specifier.local) === null || _specifier$local2 === void 0 ? void 0 : _specifier$local2.name) || 'Lozenge';
+        }
+      }
+    });
+  });
+
+  // Appearance to color mapping
+  var appearanceToColorMap = {
+    success: 'lime',
+    default: 'standard',
+    removed: 'red',
+    inprogress: 'blue',
+    new: 'purple',
+    moved: 'orange'
+  };
+  var hasTransformed = false;
+
+  // Find and transform Lozenge elements
+  source.find(j.JSXElement).forEach(function (elementPath) {
+    var _element$openingEleme, _element$openingEleme2;
+    var element = elementPath.node;
+    if (!j.JSXIdentifier.check(element.openingElement.name)) {
+      return;
+    }
+    if (element.openingElement.name.name !== lozengeImportName) {
+      return;
+    }
+
+    // Check isBold attribute
+    var isBoldAttr = (_element$openingEleme = element.openingElement.attributes) === null || _element$openingEleme === void 0 ? void 0 : _element$openingEleme.find(function (attr) {
+      return j.JSXAttribute.check(attr) && j.JSXIdentifier.check(attr.name) && attr.name.name === 'isBold';
+    });
+
+    // Don't transform if isBold is true or boolean prop without value
+    if (isBoldAttr) {
+      if (j.JSXExpressionContainer.check(isBoldAttr.value)) {
+        var expression = isBoldAttr.value.expression;
+
+        // If it's a boolean literal true, don't transform
+        if (j.BooleanLiteral.check(expression) && expression.value === true) {
+          return;
+        }
+
+        // If it's a boolean literal false, we can transform
+        if (j.BooleanLiteral.check(expression) && expression.value === false) {
+          // Continue with transformation
+        } else {
+          // If it's not a boolean literal (dynamic value), add warning and don't transform
+          addCommentBefore(j, j(elementPath), "FIXME: This Lozenge component uses a dynamic `isBold` prop. Please manually review if this should be migrated to Tag component.\nIf isBold is typically false, consider migrating to <Tag /> from '@atlaskit/tag'.");
+          return;
+        }
+      } else if (!isBoldAttr.value) {
+        // isBold prop without value (boolean shorthand) means true, don't transform
+        return;
+      }
+    }
+
+    // Create new Tag element
+    var newAttributes = [];
+    var otherAttributes = [];
+    var colorAttribute = null;
+    var textContent = '';
+    var hasComplexChildren = false;
+    var hasStyleProp = false;
+    var hasMaxWidthProp = false;
+    var hasUnknownAppearance = false;
+    var dynamicAppearance = false;
+    var unknownAppearanceValue = '';
+
+    // Process children to extract text
+    if (element.children && element.children.length > 0) {
+      if (element.children.length === 1) {
+        var child = element.children[0];
+        if (j.JSXText.check(child)) {
+          var text = child.value.trim();
+          if (text) {
+            textContent = text;
+          }
+        } else if (j.JSXExpressionContainer.check(child) && j.StringLiteral.check(child.expression)) {
+          textContent = child.expression.value;
+        } else {
+          hasComplexChildren = true;
+        }
+      } else {
+        // Multiple children or complex structure
+        hasComplexChildren = true;
+      }
+    }
+
+    // Process attributes
+    (_element$openingEleme2 = element.openingElement.attributes) === null || _element$openingEleme2 === void 0 || _element$openingEleme2.forEach(function (attr) {
+      if (!j.JSXAttribute.check(attr) || !j.JSXIdentifier.check(attr.name)) {
+        return;
+      }
+      var attrName = attr.name.name;
+      switch (attrName) {
+        case 'appearance':
+          var colorValue = 'standard';
+          if (j.StringLiteral.check(attr.value)) {
+            var appearanceValue = attr.value.value;
+            colorValue = appearanceToColorMap[appearanceValue] || appearanceValue;
+            if (!appearanceToColorMap[appearanceValue]) {
+              hasUnknownAppearance = true;
+              unknownAppearanceValue = appearanceValue;
+            }
+          } else if (j.JSXExpressionContainer.check(attr.value)) {
+            // Dynamic appearance
+            dynamicAppearance = true;
+            colorValue = attr.value;
+          }
+          colorAttribute = j.jsxAttribute(j.jsxIdentifier('color'), typeof colorValue === 'string' ? j.stringLiteral(colorValue) : colorValue);
+          break;
+        case 'isBold':
+          // Skip isBold, already handled above
+          break;
+        case 'maxWidth':
+          hasMaxWidthProp = true;
+          break;
+        case 'style':
+          hasStyleProp = true;
+          otherAttributes.push(attr);
+          break;
+        default:
+          // Keep other attributes (testId, etc.)
+          otherAttributes.push(attr);
+          break;
+      }
+    });
+
+    // Assemble attributes in correct order: text, other props, color
+    if (textContent && !hasComplexChildren) {
+      newAttributes.push(j.jsxAttribute(j.jsxIdentifier('text'), j.stringLiteral(textContent)));
+    }
+
+    // Add other attributes
+    newAttributes.push.apply(newAttributes, otherAttributes);
+
+    // Add color attribute last (default to 'standard' if no appearance was found)
+    if (colorAttribute) {
+      newAttributes.push(colorAttribute);
+    } else {
+      // Default color when no appearance is specified
+      newAttributes.push(j.jsxAttribute(j.jsxIdentifier('color'), j.stringLiteral('standard')));
+    }
+
+    // Create new Tag element
+    var newElement = j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier('Tag'), newAttributes, true), null, []);
+
+    // Add warning comments as needed
+    var warnings = [];
+    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 (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.');
+    }
+    if (hasStyleProp) {
+      warnings.push('FIXME: This Tag component has a style prop that was kept during migration.\nTag component has limited style support. Please review if custom styles are compatible.');
+    }
+    if (hasUnknownAppearance) {
+      warnings.push("FIXME: This Tag component uses an unknown appearance value \"".concat(unknownAppearanceValue, "\".\nPlease update to a valid Tag color: standard, green, lime, blue, red, purple, magenta, grey, teal, orange, yellow."));
+    }
+    if (dynamicAppearance) {
+      warnings.push('FIXME: This Tag component uses a dynamic `appearance` prop that has been renamed to `color`.\nPlease verify that the values being passed are valid color values (semantic: default, inprogress, moved, new, removed, success).');
+    }
+
+    // Replace the element first
+    elementPath.replace(newElement);
+
+    // Add warning comments using addCommentBefore if needed
+    if (warnings.length > 0) {
+      var commentText = warnings.join('\n');
+      addCommentBefore(j, j(elementPath), commentText);
+    }
+    hasTransformed = true;
+  });
+
+  // Add Tag import if we transformed any elements
+  if (hasTransformed) {
+    // Check if Tag import already exists
+    var tagImports = source.find(j.ImportDeclaration).filter(function (path) {
+      return path.node.source.value === '@atlaskit/tag';
+    });
+    if (tagImports.length === 0) {
+      // Add Tag import after Lozenge import
+      var lozengeImportPath = lozengeImports.at(0);
+      var tagImport = j.importDeclaration([j.importDefaultSpecifier(j.identifier('Tag'))], j.stringLiteral('@atlaskit/tag'));
+      lozengeImportPath.insertAfter(tagImport);
+    }
+
+    // Check if there are any remaining Lozenge usages
+    var remainingLozengeUsages = source.find(j.JSXElement).filter(function (elementPath) {
+      var element = elementPath.node;
+      if (!j.JSXIdentifier.check(element.openingElement.name)) {
+        return false;
+      }
+      return element.openingElement.name.name === lozengeImportName;
+    });
+
+    // Also check for other usages like function calls, type references, etc.
+    var remainingLozengeReferences = source.find(j.Identifier).filter(function (identifierPath) {
+      // Skip JSX element names as they're already checked above
+      if (j.JSXElement.check(identifierPath.parent.node) || j.JSXOpeningElement.check(identifierPath.parent.node) || j.JSXClosingElement.check(identifierPath.parent.node)) {
+        return false;
+      }
+
+      // Skip import declaration identifiers
+      if (j.ImportDeclaration.check(identifierPath.parent.node) || j.ImportDefaultSpecifier.check(identifierPath.parent.node) || j.ImportSpecifier.check(identifierPath.parent.node)) {
+        return false;
+      }
+      return identifierPath.node.name === lozengeImportName;
+    });
+
+    // If no remaining usages, remove the Lozenge import
+    if (remainingLozengeUsages.length === 0 && remainingLozengeReferences.length === 0) {
+      lozengeImports.remove();
+    }
+    return source.toSource();
+  }
+  return source.toSource();
+};
+export default transformer;

package/dist/esm/presets/lozenge-to-tag-migration/lozenge-to-tag-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 lozengeToTagMigrationTransformer from './codemods/lozenge-to-tag-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 = [lozengeToTagMigrationTransformer];
+          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

@@ -10,5 +10,7 @@ import './migrate-icon-object-to-object/migrate-icon-object-to-object';
 import './upgrade-pragmatic-drag-and-drop-to-stable/upgrade-pragmatic-drag-and-drop-to-stable';
 import './remove-dark-theme-vr-options/remove-dark-theme-vr-options';
 import './remove-token-fallbacks/remove-token-fallbacks';
+import './lozenge-appearance-to-color/lozenge-appearance-to-color';
+import './lozenge-to-tag-migration/lozenge-to-tag-migration';
 declare const presets: string[];
 export default presets;

package/dist/types/presets/lozenge-appearance-to-color/codemods/lozenge-appearance-to-color.d.ts

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

package/dist/types/presets/lozenge-appearance-to-color/lozenge-appearance-to-color.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/lozenge-to-tag-migration/codemods/lozenge-to-tag-migration.d.ts

@@ -0,0 +1,3 @@
+import type { API, FileInfo } from 'jscodeshift';
+declare const transformer: (file: FileInfo, api: API) => string | undefined;
+export default transformer;

package/dist/types/presets/lozenge-to-tag-migration/lozenge-to-tag-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

@@ -10,5 +10,7 @@ import './migrate-icon-object-to-object/migrate-icon-object-to-object';
 import './upgrade-pragmatic-drag-and-drop-to-stable/upgrade-pragmatic-drag-and-drop-to-stable';
 import './remove-dark-theme-vr-options/remove-dark-theme-vr-options';
 import './remove-token-fallbacks/remove-token-fallbacks';
+import './lozenge-appearance-to-color/lozenge-appearance-to-color';
+import './lozenge-to-tag-migration/lozenge-to-tag-migration';
 declare const presets: string[];
 export default presets;

package/dist/types-ts4.5/presets/lozenge-appearance-to-color/codemods/lozenge-appearance-to-color.d.ts

@@ -0,0 +1,10 @@
+import { type API, type FileInfo } from 'jscodeshift';
+/**
+ * Codemod to migrate Lozenge component from `appearance` prop to `color` prop.
+ *
+ * This codemod:
+ * 1. Renames `appearance` prop to `color` for semantic values
+ * 2. Maps existing semantic values directly (e.g. success → success)
+ * 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/lozenge-appearance-to-color/lozenge-appearance-to-color.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/lozenge-to-tag-migration/codemods/lozenge-to-tag-migration.d.ts

@@ -0,0 +1,3 @@
+import type { API, FileInfo } from 'jscodeshift';
+declare const transformer: (file: FileInfo, api: API) => string | undefined;
+export default transformer;

package/dist/types-ts4.5/presets/lozenge-to-tag-migration/lozenge-to-tag-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.29.2",
+	"version": "0.31.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": "^7.0.0",
+		"@atlaskit/tokens": "^7.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@codeshift/utils": "^0.2.4",
 		"@hypermod/utils": "^0.4.2",