@sproutsocial/seeds-react-badge 1.0.6 → 2.0.1

package/codemods/badge-1.x-to-2.x.ts

@@ -0,0 +1,489 @@
+import type { API, FileInfo, Options, Collection } from "jscodeshift";
+
+// Type to badgeColor mapping
+const TYPE_TO_BADGE_COLOR = {
+  passive: "neutral",
+  default: "purple",
+  primary: "blue",
+  secondary: "yellow",
+  approval: "orange",
+  suggestion: "blue",
+  common: "aqua", // Note: colors.container.background.decorative.aqua does not match colors.aqua.600
+} as const;
+
+type BadgeType = keyof typeof TYPE_TO_BADGE_COLOR;
+type BadgeColor = (typeof TYPE_TO_BADGE_COLOR)[BadgeType];
+
+// Map type value to badgeColor value
+function mapTypeToBadgeColor(typeValue: string): BadgeColor | undefined {
+  if (typeValue in TYPE_TO_BADGE_COLOR) {
+    return TYPE_TO_BADGE_COLOR[typeValue as BadgeType];
+  }
+  // Invalid type value - should not happen in practice
+  return undefined;
+}
+
+// Check if Badge is imported from racine or seeds-react-badge
+function isBadgeComponent(
+  jsxElement: { value: { name: unknown } },
+  j: API["jscodeshift"]
+): boolean {
+  const name = jsxElement.value.name;
+  if (!name || typeof name !== "object") return false;
+
+  // Handle direct usage: <Badge />
+  if ("name" in name && (name as { name: string }).name === "Badge") {
+    return true;
+  }
+
+  // Handle member expressions: <Some.Badge />
+  if (
+    "type" in name &&
+    (name as { type: string }).type === "JSXMemberExpression" &&
+    "property" in name &&
+    (name as { property?: { name?: string } }).property?.name === "Badge"
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
+// Find Badge import from racine or seeds-react-badge
+function findBadgeImport(
+  root: Collection<any>,
+  j: API["jscodeshift"]
+): boolean {
+  const imports = root.find(j.ImportDeclaration);
+  let hasBadgeImport = false;
+
+  imports.forEach((path) => {
+    const source = path.value.source.value;
+    if (
+      source === "@sproutsocial/racine" ||
+      source === "@sproutsocial/seeds-react-badge"
+    ) {
+      const specifiers = path.value.specifiers || [];
+      specifiers.forEach((spec) => {
+        if (
+          (spec.type === "ImportSpecifier" &&
+            spec.imported?.name === "Badge") ||
+          spec.local?.name === "Badge"
+        ) {
+          hasBadgeImport = true;
+        }
+      });
+    }
+  });
+
+  return hasBadgeImport;
+}
+
+// Add TODO comment for data attribute references
+function addDataAttributeTodo(
+  ast: Collection<any>,
+  j: API["jscodeshift"],
+  originalSource: string
+): boolean {
+  let hasModifications = false;
+
+  // Patterns to search for (case-insensitive, handle both single and double quotes)
+  const patterns = [
+    /data-qa-badge-type/i,
+    /data-qa-badge-tip/i,
+    /data-tip.*badge/i,
+    /badge-type/i,
+    /badge-tip/i,
+    /getByDataQaLabel\(['"]badge-type['"]/i,
+    /getByDataQaLabel\(['"]badge-tip['"]/i,
+    /queryByDataQaLabel\(['"]badge-type['"]/i,
+    /queryByDataQaLabel\(['"]badge-tip['"]/i,
+    /\.attr\(['"]data-tip['"]/i,
+    /\.attr\(['"]data-qa-badge/i,
+    /\[data-qa-badge-type\]/i,
+    /\[data-qa-badge-tip\]/i,
+  ];
+
+  // Check if any pattern matches
+  const hasMatch = patterns.some((pattern) => pattern.test(originalSource));
+
+  if (hasMatch) {
+    // Find the Program node to add comment
+    const program = ast.find(j.Program).paths()[0];
+    if (program) {
+      // Check if TODO comment already exists
+      const programBody = program.value.body;
+      const firstStatement = programBody[0];
+      const statementWithComments = firstStatement as {
+        leadingComments?: Array<{ value?: string }>;
+      };
+      const existingComment =
+        statementWithComments?.leadingComments?.some(
+          (comment: { value?: string }) =>
+            comment.value && comment.value.includes("badge-1.x-to-2.x codemod")
+        ) ||
+        program.value.comments?.some(
+          (comment) =>
+            comment.value && comment.value.includes("badge-1.x-to-2.x codemod")
+        );
+
+      if (!existingComment && firstStatement) {
+        const todoComment = j.commentBlock(
+          ` TODO (badge-1.x-to-2.x codemod): Data attributes data-qa-badge-type, data-qa-badge-tip, and data-tip have been removed from Badge component. Update test selectors and data attribute references. `,
+          true
+        );
+
+        // Add comment before the first statement using comments property (like icon-library codemod)
+        const statementWithComments = firstStatement as {
+          comments?: Array<{ value?: string }>;
+        };
+        statementWithComments.comments = statementWithComments.comments
+          ? [todoComment, ...statementWithComments.comments]
+          : [todoComment];
+        hasModifications = true;
+      }
+    }
+  }
+
+  return hasModifications;
+}
+
+function transformer(
+  file: FileInfo,
+  api: API,
+  options: Options
+): string | null {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasModifications = false;
+
+  // Add TODO comments for data attribute references (check regardless of Badge imports)
+  // Use original file source for pattern matching
+  const dataAttrModifications = addDataAttributeTodo(root, j, file.source);
+  if (dataAttrModifications) {
+    hasModifications = true;
+  }
+
+  // Only process files that import Badge from racine or seeds-react-badge
+  const hasBadgeImport = findBadgeImport(root, j);
+
+  // If no Badge import, return unchanged (don't transform other Badge components)
+  if (!hasBadgeImport) {
+    return hasModifications ? root.toSource(options) : file.source;
+  }
+
+  // Find Badge JSX elements (find JSXElement, not just opening element)
+  const badgeElements = root.find(j.JSXElement).filter((path) => {
+    const openingElement = path.value.openingElement;
+    return openingElement && isBadgeComponent({ value: openingElement }, j);
+  });
+
+  // Transform Badge JSX elements
+  badgeElements.forEach((path) => {
+    const openingElement = path.value.openingElement;
+    if (!openingElement || !isBadgeComponent({ value: openingElement }, j))
+      return;
+
+    const attrs = openingElement.attributes || [];
+    const newAttrs: Array<(typeof attrs)[number]> = [];
+    let hasText = false;
+    let textValue: unknown = null;
+    let hasType = false;
+    let typeIsDynamic = false;
+    let typeStr: string | null = null; // Store extracted type value
+
+    // Process all attributes
+    attrs.forEach((attr) => {
+      if (attr.type === "JSXSpreadAttribute") {
+        // Keep spread attributes
+        newAttrs.push(attr);
+        return;
+      }
+
+      const attrName = attr.name.name;
+
+      // Handle size="default" -> size="large"
+      if (attrName === "size") {
+        let sizeValue: string | null = null;
+
+        if (
+          attr.value &&
+          (attr.value.type === "Literal" ||
+            attr.value.type === "StringLiteral") &&
+          typeof attr.value.value === "string"
+        ) {
+          sizeValue = attr.value.value;
+        } else if (
+          attr.value &&
+          attr.value.type === "JSXExpressionContainer" &&
+          attr.value.expression &&
+          (attr.value.expression.type === "Literal" ||
+            attr.value.expression.type === "StringLiteral") &&
+          typeof attr.value.expression.value === "string"
+        ) {
+          sizeValue = attr.value.expression.value;
+        }
+
+        if (sizeValue === "default") {
+          newAttrs.push(
+            j.jsxAttribute(j.jsxIdentifier("size"), j.literal("large"))
+          );
+          hasModifications = true;
+        } else {
+          newAttrs.push(attr);
+        }
+        return;
+      }
+
+      // Handle type prop
+      if (attrName === "type") {
+        hasType = true;
+
+        // Check if it's a dynamic value (variable or function call)
+        if (attr.value) {
+          if (attr.value.type === "JSXExpressionContainer") {
+            const expr = attr.value.expression;
+            if (
+              expr &&
+              expr.type !== "Literal" &&
+              expr.type !== "StringLiteral"
+            ) {
+              typeIsDynamic = true;
+            }
+          } else if (
+            attr.value.type !== "Literal" &&
+            attr.value.type !== "StringLiteral"
+          ) {
+            typeIsDynamic = true;
+          }
+        }
+
+        // Map static type values - extract typeStr but don't add badgeColor yet
+        if (!typeIsDynamic && attr.value) {
+          if (
+            (attr.value.type === "Literal" ||
+              attr.value.type === "StringLiteral") &&
+            typeof attr.value.value === "string"
+          ) {
+            typeStr = attr.value.value;
+          } else if (
+            attr.value.type === "JSXExpressionContainer" &&
+            attr.value.expression &&
+            (attr.value.expression.type === "Literal" ||
+              attr.value.expression.type === "StringLiteral") &&
+            typeof attr.value.expression.value === "string"
+          ) {
+            typeStr = attr.value.expression.value;
+          }
+        }
+
+        // Don't add type prop to newAttrs - it's being removed
+        // Mark as modified since we're removing the type prop
+        hasModifications = true;
+        return;
+      }
+
+      // Handle badgeColor - keep it if it exists
+      if (attrName === "badgeColor") {
+        newAttrs.push(attr);
+        return;
+      }
+
+      // Handle tip prop - remove it
+      if (attrName === "tip") {
+        hasModifications = true;
+        return; // Don't add to newAttrs
+      }
+
+      // Handle text prop
+      if (attrName === "text") {
+        hasText = true;
+        textValue = attr.value;
+        hasModifications = true;
+        // Don't add text prop to newAttrs - we'll convert to children
+        return;
+      }
+
+      // Keep all other attributes
+      newAttrs.push(attr);
+    });
+
+    // After processing all attributes, add badgeColor if needed
+    if (hasType && !typeIsDynamic && typeStr) {
+      const badgeColor = mapTypeToBadgeColor(typeStr);
+
+      if (badgeColor !== undefined) {
+        // Check if badgeColor already exists in newAttrs
+        const existingBadgeColor = newAttrs.find(
+          (a) => a.type !== "JSXSpreadAttribute" && a.name.name === "badgeColor"
+        );
+
+        if (!existingBadgeColor) {
+          newAttrs.push(
+            j.jsxAttribute(j.jsxIdentifier("badgeColor"), j.literal(badgeColor))
+          );
+          hasModifications = true;
+        }
+
+        // Special handling for "common" type - add TODO comment
+        if (typeStr === "common") {
+          const parentPath = path.parentPath;
+          if (parentPath && parentPath.value) {
+            const parentNode = parentPath.value as {
+              comments?: Array<{ value?: string }>;
+            };
+            const todoComment = j.commentBlock(
+              ` TODO (badge-1.x-to-2.x codemod): type="common" mapped to badgeColor="aqua", but colors.container.background.decorative.aqua does not match original colors.aqua.600. Verify color match. `,
+              true
+            );
+            parentNode.comments = parentNode.comments
+              ? [todoComment, ...parentNode.comments]
+              : [todoComment];
+            hasModifications = true;
+          }
+        }
+      } else {
+        // Add TODO comment for unmapped static type values
+        const parentPath = path.parentPath;
+        if (parentPath && parentPath.value) {
+          const parentNode = parentPath.value as {
+            comments?: Array<{ value?: string }>;
+          };
+          const todoComment = j.commentBlock(
+            ` TODO (badge-1.x-to-2.x codemod): Unmapped static type value "${typeStr}". Manually update to a valid badgeColor. `,
+            true
+          );
+          parentNode.comments = parentNode.comments
+            ? [todoComment, ...parentNode.comments]
+            : [todoComment];
+          hasModifications = true;
+        }
+      }
+    }
+
+    // Update attributes
+    openingElement.attributes = newAttrs;
+
+    // Handle dynamic type - add TODO comment
+    if (hasType && typeIsDynamic) {
+      // Traverse up to find the containing statement (not just immediate parent)
+      let currentPath = path.parentPath;
+      let statementNode: { comments?: Array<{ value?: string }> } | null = null;
+
+      // Keep traversing up until we find a statement or reach the Program
+      while (currentPath) {
+        const node = currentPath.value;
+        // Check if this is a statement (not JSX)
+        if (
+          node &&
+          typeof node === "object" &&
+          "type" in node &&
+          node.type !== "JSXElement" &&
+          node.type !== "JSXFragment" &&
+          node.type !== "JSXExpressionContainer"
+        ) {
+          statementNode = node as { comments?: Array<{ value?: string }> };
+          break;
+        }
+        currentPath = currentPath.parentPath;
+      }
+
+      // If we didn't find a statement, try to add to the JSXElement's parent
+      if (!statementNode) {
+        const parentPath = path.parentPath;
+        if (parentPath && parentPath.value) {
+          statementNode = parentPath.value as {
+            comments?: Array<{ value?: string }>;
+          };
+        }
+      }
+
+      if (statementNode) {
+        const todoComment = j.commentBlock(
+          ` TODO (badge-1.x-to-2.x codemod): Update function/variable to return badgeColor values instead of type values. See type-to-badgeColor mapping: passive→neutral, default→purple, primary→blue, secondary→yellow, approval→orange, suggestion→blue, common→aqua. `,
+          true
+        );
+        statementNode.comments = statementNode.comments
+          ? [todoComment, ...statementNode.comments]
+          : [todoComment];
+        hasModifications = true;
+      }
+    }
+
+    // Handle text prop -> children conversion
+    if (hasText) {
+      // path is already the JSXElement
+      // Only convert if there are no existing children
+      if (!path.value.children || path.value.children.length === 0) {
+        if (textValue) {
+          let childNodes: unknown[] = [];
+
+          // Handle different text value types
+          if (
+            textValue &&
+            typeof textValue === "object" &&
+            "type" in textValue
+          ) {
+            const textValueWithType = textValue as {
+              type: string;
+              expression?: unknown;
+              value?: unknown;
+            };
+            if (textValueWithType.type === "Literal") {
+              childNodes = [j.jsxText(String(textValueWithType.value))];
+            } else if (textValueWithType.type === "JSXExpressionContainer") {
+              // Extract the expression from the container
+              if (textValueWithType.expression) {
+                if (
+                  typeof textValueWithType.expression === "object" &&
+                  "type" in textValueWithType.expression &&
+                  (textValueWithType.expression as { type: string }).type ===
+                    "JSXElement"
+                ) {
+                  // JSX element inside expression container - extract it
+                  childNodes = [textValueWithType.expression];
+                } else {
+                  // Keep the expression container
+                  childNodes = [textValue];
+                }
+              } else {
+                childNodes = [textValue];
+              }
+            } else if (textValueWithType.type === "JSXElement") {
+              // Direct JSX element
+              childNodes = [textValue];
+            } else {
+              // Wrap in expression container
+              childNodes = [j.jsxExpressionContainer(textValue as any)];
+            }
+          } else {
+            // Wrap in expression container
+            childNodes = [j.jsxExpressionContainer(textValue as any)];
+          }
+
+          // Create a new opening element with updated attributes
+          const newOpeningElement = j.jsxOpeningElement(
+            openingElement.name,
+            newAttrs
+          );
+
+          // Create a new JSXElement with children and closing element
+          const newJSXElement = j.jsxElement(
+            newOpeningElement,
+            j.jsxClosingElement(openingElement.name),
+            childNodes as Parameters<typeof j.jsxElement>[2]
+          );
+
+          // Replace the old element with the new one
+          path.replace(newJSXElement);
+
+          hasModifications = true;
+        }
+      }
+    }
+  });
+
+  return hasModifications ? root.toSource(options) : file.source;
+}
+
+module.exports = transformer;

package/dist/codemods/badge-1.x-to-2.x.d.ts

@@ -0,0 +1,2 @@
+
+export {  }