@planningcenter/tapestry-migration-cli 2.2.0-rc.2 → 2.2.0-rc.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "2.2.0-rc.2",
+  "version": "2.2.0-rc.4",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -47,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7f90b9957e693f9cd1e601ea0e74ab4d087eeb91"
+  "gitHead": "71a24313f6632525d4608b8b2d107eb6ddcb67f6"
 }

package/src/components/button/index.ts

@@ -2,13 +2,19 @@ import { Transform } from "jscodeshift"
 
 import linkToButton from "./transforms/linkToButton"
 import moveButtonImport from "./transforms/moveButtonImport"
+import removeToTransform from "./transforms/removeTo"
 import titleToLabel from "./transforms/titleToLabel"
 
 const transform: Transform = (fileInfo, api, options) => {
   let currentSource = fileInfo.source
   let hasAnyChanges = false
 
-  const transforms: Transform[] = [linkToButton, titleToLabel, moveButtonImport]
+  const transforms: Transform[] = [
+    linkToButton,
+    titleToLabel,
+    removeToTransform,
+    moveButtonImport,
+  ]
 
   for (const individualTransform of transforms) {
     const result = individualTransform(

package/src/components/button/transforms/removeTo.test.ts

@@ -0,0 +1,370 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./removeTo"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("removeTo transform", () => {
+  describe("basic transformations", () => {
+    it("should remove 'to' attribute with empty string value", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button to="">Save</Button>
+}
+      `.trim()
+
+      const expected = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button>Save</Button>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should remove 'to' attribute with hash value", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button to="#">Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<Button>Save</Button>")
+      expect(result).not.toContain('to="#"')
+    })
+
+    it("should remove 'to' attribute with expression containing empty string", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button to={""}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<Button>Save</Button>")
+      expect(result).not.toContain('to={""}')
+    })
+
+    it("should remove 'to' attribute with expression containing hash", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button to={"#"}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<Button>Save</Button>")
+      expect(result).not.toContain('to={"#"}')
+    })
+  })
+
+  describe("comment generation for non-empty values", () => {
+    it("should remove 'to' attribute with string value and add TODO comment", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button to="/users">Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<Button>Save</Button>")
+      expect(result).not.toContain('Button to="/users"')
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain('removed: to="/users"')
+    })
+
+    it("should remove 'to' attribute with expression value and add TODO comment", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button to={"/profile"}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<Button>Save</Button>")
+      expect(result).not.toContain('to={"/profile"}')
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain('removed: to="/profile"')
+    })
+
+    it("should handle complex string values in comments", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button to="/users?tab=active&sort=name">View Users</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<Button>View Users</Button>")
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain('removed: to="/users?tab=active&sort=name"')
+    })
+  })
+
+  describe("multiple Button components", () => {
+    it("should handle multiple Button components with different 'to' values", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Button to="">Empty</Button>
+      <Button to="/users">Users</Button>
+      <Button to="#">Hash</Button>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<Button>Empty</Button>")
+      expect(result).toContain("<Button>Hash</Button>")
+      expect(result).toContain("<Button>Users</Button>")
+      expect(result).not.toContain('Button to=""')
+      expect(result).not.toContain('Button to="#"')
+      expect(result).not.toContain('Button to="/users"')
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain('removed: to="/users"')
+    })
+
+    it("should preserve other attributes", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button to="/test" variant="primary" onClick={handleClick} disabled>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('variant="primary"')
+      expect(result).toContain("onClick={handleClick}")
+      expect(result).toContain("disabled")
+      expect(result).not.toContain('Button to="/test"')
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain('removed: to="/test"')
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not transform Button without 'to' attribute", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button variant="primary">Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should not transform if Button is not imported from tapestry-react", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry"
+
+export default function Test() {
+  return <Button to="/test">Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should handle Button with aliased import", () => {
+      const input = `
+import { Button as TapestryButton } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <TapestryButton to="/users">Save</TapestryButton>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<TapestryButton>Save</TapestryButton>")
+      expect(result).not.toContain('TapestryButton to="/users"')
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain('removed: to="/users"')
+    })
+
+    it("should handle self-closing Button components", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button to="/test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<Button />")
+      expect(result).not.toContain('Button to="/test"')
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain('removed: to="/test"')
+    })
+
+    it("should handle Button components with complex children", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Button to="/dashboard">
+      <span>Go to</span>
+      <strong>Dashboard</strong>
+    </Button>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<Button>")
+      expect(result).toContain("<span>Go to</span>")
+      expect(result).toContain("<strong>Dashboard</strong>")
+      expect(result).toContain("</Button>")
+      expect(result).not.toContain('Button to="/dashboard"')
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain('removed: to="/dashboard"')
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("should return null when no Button import exists", () => {
+      const input = `
+import React from "react"
+
+export default function Test() {
+  return <div>Hello</div>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when no Button components with 'to' exist", () => {
+      const input = `
+import { Button, Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Button>Save</Button>
+      <Link to="/users">Users</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null for empty file", () => {
+      const result = applyTransform("")
+      expect(result).toBe(null)
+    })
+  })
+
+  describe("complex scenarios", () => {
+    it("should handle mixed imports and multiple components", () => {
+      const input = `
+import React from "react"
+import { Button, Link } from "@planningcenter/tapestry-react"
+import { Input } from "@planningcenter/tapestry"
+
+export default function Test() {
+  return (
+    <form>
+      <Input name="email" />
+      <Button to="/submit" type="submit">Submit</Button>
+      <Link to="/cancel">Cancel</Link>
+      <Button to="">Reset</Button>
+    </form>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Button type="submit">Submit</Button>')
+      expect(result).toContain("<Button>Reset</Button>")
+      expect(result).toContain('<Link to="/cancel">Cancel</Link>') // Link should be unchanged
+      expect(result).not.toContain('Button to="/submit"')
+      expect(result).not.toContain('Button to=""')
+      expect(result).toContain(
+        '/* TODO: tapestry-migration (to): prop is not supported. If needed, use Link instead - removed: to="/submit" */'
+      )
+    })
+
+    it("should handle Button usage in JSX expressions", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test({ showButton, items }) {
+  return (
+    <div>
+      {showButton && <Button to="/conditional">Conditional</Button>}
+      {items.map(item => <Button key={item.id} to={item.url}>{item.name}</Button>)}
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<Button>Conditional</Button>")
+      expect(result).toContain("<Button key={item.id}>{item.name}</Button>")
+      expect(result).not.toContain('Button to="/conditional"')
+      expect(result).not.toContain("} to={item.url}")
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain('removed: to="/conditional"')
+    })
+  })
+
+  describe("comment placement and format", () => {
+    it("should add comments with correct format", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button href="/test">Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        '/* TODO: tapestry-migration (href): prop is not supported. If needed, use Link instead - removed: href="/test" */'
+      )
+    })
+  })
+})

package/src/components/button/transforms/removeTo.ts

@@ -0,0 +1,25 @@
+import { Transform } from "jscodeshift"
+
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { orConditions } from "../../shared/conditions/orConditions"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+function buildComment(propName: string, formattedValue: string) {
+  if (formattedValue === '""' || formattedValue === '"#"') return
+  return `prop is not supported. If needed, use Link instead - removed: ${propName}=${formattedValue}`
+}
+
+const transform: Transform = attributeTransformFactory({
+  condition: orConditions(hasAttribute("to"), hasAttribute("href")),
+  targetComponent: "Button",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const options = { buildComment, element, j, source }
+    const toRemoved = removeAttribute("to", options)
+    const hrefRemoved = removeAttribute("href", options)
+    return toRemoved || hrefRemoved
+  },
+})
+
+export default transform

package/src/components/shared/actions/addComment.test.ts

@@ -0,0 +1,243 @@
+import jscodeshift, { JSXElement, JSXIdentifier } from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import { addComment } from "./addComment"
+
+const j = jscodeshift.withParser("tsx")
+
+function createElementFromCode(code: string): JSXElement {
+  const source = j(`<div>${code}</div>`)
+  return source.find(j.JSXElement).at(0).get().value.children?.[0] as JSXElement
+}
+
+function createTopLevelElementFromCode(code: string): JSXElement {
+  const source = j(code)
+  return source.find(j.JSXElement).at(0).get().value as JSXElement
+}
+
+describe("addComment", () => {
+  it("should add comment to element", () => {
+    const element = createElementFromCode("<Button>Save</Button>")
+    const commentText = "TODO: This needs to be updated"
+
+    addComment({ element, j, scope: "test", source: j(""), text: commentText })
+
+    expect(element.comments).toHaveLength(1)
+    expect(element.comments?.[0].type).toBe("CommentBlock")
+    expect(element.comments?.[0].value).toBe(
+      ` TODO: tapestry-migration (test): ${commentText} `
+    )
+  })
+
+  it("should add multiple comments to element", () => {
+    const element = createElementFromCode("<Button>Save</Button>")
+    const firstComment = "TODO: First comment"
+    const secondComment = "TODO: Second comment"
+
+    addComment({ element, j, scope: "test", source: j(""), text: firstComment })
+    addComment({
+      element,
+      j,
+      scope: "test",
+      source: j(""),
+      text: secondComment,
+    })
+
+    expect(element.comments).toHaveLength(2)
+    expect(element.comments?.[0].value).toBe(
+      ` TODO: tapestry-migration (test): ${firstComment} `
+    )
+    expect(element.comments?.[1].value).toBe(
+      ` TODO: tapestry-migration (test): ${secondComment} `
+    )
+  })
+
+  it("should render comment above top-level element", () => {
+    const element = createTopLevelElementFromCode("<Button>Save</Button>")
+    const commentText = "TODO: Update this button"
+
+    addComment({ element, j, scope: "test", source: j(""), text: commentText })
+
+    const source = j.withParser("tsx")("").find(j.Program).get()
+    source.value.body = [j.expressionStatement(element)]
+    const result = j(source).toSource()
+
+    expect(result).toContain(
+      `/* TODO: tapestry-migration (test): ${commentText} */`
+    )
+    expect(result).toContain("<Button>Save</Button>")
+  })
+
+  it("should render comment above nested element (current JSCodeshift limitation)", () => {
+    const outerCode = `
+      <div>
+        <Button>Save</Button>
+      </div>
+    `
+    const source = j(outerCode)
+    const buttonElement = source
+      .find(j.JSXElement)
+      .filter(
+        (path) =>
+          (path.value.openingElement.name as JSXIdentifier)?.name === "Button"
+      )
+      .at(0)
+      .get().value as JSXElement
+
+    const commentText = "TODO: Update this nested button"
+    addComment({
+      element: buttonElement,
+      j,
+      scope: "test",
+      source,
+      text: commentText,
+    })
+
+    const result = source.toSource()
+
+    // Current JSCodeshift limitation: comments are rendered as regular block comments
+    // This is a known issue - comments in JSX context should ideally be {/* */}
+    expect(result).toContain(
+      `/* TODO: tapestry-migration (test): ${commentText} */`
+    )
+    expect(result).toContain("<Button>Save</Button>")
+  })
+
+  it("should handle empty comment text", () => {
+    const element = createElementFromCode("<Button>Save</Button>")
+    const commentText = ""
+
+    addComment({ element, j, scope: "test", source: j(""), text: commentText })
+
+    expect(element.comments).toHaveLength(1)
+    expect(element.comments?.[0].value).toBe(
+      ` TODO: tapestry-migration (test): ${commentText} `
+    )
+  })
+
+  it("should handle comment text with special characters", () => {
+    const element = createElementFromCode("<Button>Save</Button>")
+    const commentText = "TODO: Handle 'quotes' and \"double quotes\" and <tags>"
+
+    addComment({ element, j, scope: "test", source: j(""), text: commentText })
+
+    expect(element.comments).toHaveLength(1)
+    expect(element.comments?.[0].value).toBe(
+      ` TODO: tapestry-migration (test): ${commentText} `
+    )
+  })
+
+  it("should handle multiline comment text", () => {
+    const element = createElementFromCode("<Button>Save</Button>")
+    const commentText =
+      "TODO: This is a long comment\nthat spans multiple lines"
+
+    addComment({ element, j, scope: "test", source: j(""), text: commentText })
+
+    expect(element.comments).toHaveLength(1)
+    expect(element.comments?.[0].value).toBe(
+      ` TODO: tapestry-migration (test): ${commentText} `
+    )
+  })
+
+  describe("JSX context formatting (current limitations)", () => {
+    it("should format comments in JSX children context (JSCodeshift limitation)", () => {
+      const outerCode = `
+        <div>
+          <span>Before</span>
+          <Button>Save</Button>
+          <span>After</span>
+        </div>
+      `
+      const source = j(outerCode)
+      const buttonElement = source
+        .find(j.JSXElement)
+        .filter(
+          (path) =>
+            (path.value.openingElement.name as JSXIdentifier)?.name === "Button"
+        )
+        .at(0)
+        .get().value as JSXElement
+
+      addComment({
+        element: buttonElement,
+        j,
+        scope: "test",
+        source,
+        text: "Fix this button",
+      })
+
+      const result = source.toSource()
+
+      expect(result).toContain(
+        "/* TODO: tapestry-migration (test): Fix this button */"
+      )
+    })
+
+    it("should format comments in JSX attribute context (JSCodeshift limitation)", () => {
+      const outerCode = `
+        <div>
+          <Button iconLeft={<Icon name="star" />}>Save</Button>
+        </div>
+      `
+      const source = j(outerCode)
+      const iconElement = source
+        .find(j.JSXElement)
+        .filter(
+          (path) =>
+            (path.value.openingElement.name as JSXIdentifier)?.name === "Icon"
+        )
+        .at(0)
+        .get().value as JSXElement
+
+      addComment({
+        element: iconElement,
+        j,
+        scope: "test",
+        source,
+        text: "Update icon",
+      })
+
+      const result = source.toSource()
+
+      expect(result).toContain(
+        "/* TODO: tapestry-migration (test): Update icon */"
+      )
+    })
+
+    it("should format comments for deeply nested elements with JSX expression", () => {
+      const outerCode = `
+        <div>
+          <section>
+            <article>
+              <Button>Deep Button</Button>
+            </article>
+          </section>
+        </div>
+      `
+      const source = j(outerCode)
+      const buttonElement = source
+        .find(j.JSXElement)
+        .filter(
+          (path) =>
+            (path.value.openingElement.name as JSXIdentifier)?.name === "Button"
+        )
+        .at(0)
+        .get().value as JSXElement
+
+      addComment({
+        element: buttonElement,
+        j,
+        scope: "test",
+        source,
+        text: "Deeply nested comment",
+      })
+
+      const result = source.toSource()
+
+      expect(result.replace(/\n/gm, "")).toMatch(
+        /\{\/\*\sTODO:\stapestry-migration\s\(test\):\sDeeply\snested\scomment\s\*\/\s*}/
+      )
+    })
+  })
+})

package/src/components/shared/actions/addComment.ts

@@ -0,0 +1,69 @@
+import { ASTPath, Collection, JSCodeshift, JSXElement } from "jscodeshift"
+
+/**
+ * Adds a comment to a JSX element.
+ *
+ * For JSX contexts, creates a proper JSX expression comment by embedding
+ * the comment in a JSX expression container that renders properly.
+ */
+export function addComment({
+  text,
+  element,
+  j,
+  source,
+  scope,
+}: {
+  element: JSXElement
+  j: JSCodeshift
+  scope: string
+  source: Collection
+  text: string
+}) {
+  const commentText = formatComment(text, scope)
+  if (tryInsertJSXComment(source, element, commentText, j)) {
+    return
+  }
+
+  const comment = j.commentBlock(commentText, true, false)
+
+  if (element.comments) {
+    element.comments.push(comment)
+  } else {
+    element.comments = [comment]
+  }
+}
+
+function createJSXExpressionComment(text: string, j: JSCodeshift) {
+  const comment = j.commentBlock(text, true, false)
+  const emptyExpr = j.jsxEmptyExpression()
+  emptyExpr.comments = [comment]
+  return j.jsxExpressionContainer(emptyExpr)
+}
+
+function tryInsertJSXComment(
+  source: Collection,
+  element: JSXElement,
+  text: string,
+  j: JSCodeshift
+): boolean {
+  let found = false
+
+  source.find(j.JSXElement).forEach((path: ASTPath<JSXElement>) => {
+    if (path.value === element && path.parent && path.parent.value.children) {
+      const parent = path.parent.value
+      const childIndex = parent.children.indexOf(element)
+
+      if (childIndex >= 0) {
+        const jsxComment = createJSXExpressionComment(text, j)
+        parent.children.splice(childIndex, 0, jsxComment)
+        found = true
+      }
+    }
+  })
+
+  return found
+}
+
+export function formatComment(text: string, scope: string): string {
+  return ` TODO: tapestry-migration (${scope}): ${text} `
+}

package/src/components/shared/actions/getPrintableAttributeValue.test.ts

@@ -0,0 +1,202 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import { getPrintableAttributeValue } from "./getPrintableAttributeValue"
+
+const j = jscodeshift.withParser("tsx")
+
+// Helper to create JSX attributes for testing
+function createAttribute(code: string) {
+  const source = j(`<div ${code} />`)
+  const element = source.find(j.JSXElement).at(0)
+  const attributes = element.get().value.openingElement.attributes
+  return attributes?.[0] || null
+}
+
+describe("getPrintableAttributeValue", () => {
+  describe("null/undefined handling", () => {
+    it("should return null for null attribute", () => {
+      const result = getPrintableAttributeValue(null, j)
+      expect(result).toBe(null)
+    })
+
+    it("should return null for undefined attribute", () => {
+      const result = getPrintableAttributeValue(undefined, j)
+      expect(result).toBe(null)
+    })
+
+    it("should return null for attribute with no value", () => {
+      const attribute = createAttribute("disabled")
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe(null)
+    })
+  })
+
+  describe("string literal values", () => {
+    it("should format empty string literal", () => {
+      const attribute = createAttribute('to=""')
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe('""')
+    })
+
+    it("should format simple string literal", () => {
+      const attribute = createAttribute('to="/users"')
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe('"/users"')
+    })
+
+    it("should format hash string literal", () => {
+      const attribute = createAttribute('to="#"')
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe('"#"')
+    })
+
+    it("should handle string with special characters", () => {
+      const attribute = createAttribute('to="/users?tab=active&sort=name"')
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe('"/users?tab=active&sort=name"')
+    })
+
+    it("should handle string with quotes inside", () => {
+      const attribute = createAttribute(
+        "aria-label='Click \"here\" to continue'"
+      )
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe('"Click "here" to continue"')
+    })
+  })
+
+  describe("JSX expression containers with string literals", () => {
+    it("should normalize empty string expression to string literal format", () => {
+      const attribute = createAttribute('to={""}')
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe('""')
+    })
+
+    it("should normalize simple string expression to string literal format", () => {
+      const attribute = createAttribute('to={"/profile"}')
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe('"/profile"')
+    })
+
+    it("should normalize hash string expression to string literal format", () => {
+      const attribute = createAttribute('to={"#"}')
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe('"#"')
+    })
+
+    it("should handle complex string in expression", () => {
+      const attribute = createAttribute(
+        'to={"/dashboard?user=123&tab=settings"}'
+      )
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe('"/dashboard?user=123&tab=settings"')
+    })
+  })
+
+  describe("JSX expression containers with complex expressions", () => {
+    it("should return full source for variable expression", () => {
+      const attribute = createAttribute("to={url}")
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe("{url}")
+    })
+
+    it("should return full source for template literal expression", () => {
+      const attribute = createAttribute("to={`/users/${userId}`}")
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe("{`/users/${userId}`}")
+    })
+
+    it("should return full source for function call expression", () => {
+      const attribute = createAttribute("to={getUrl()}")
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe("{getUrl()}")
+    })
+
+    it("should return full source for conditional expression", () => {
+      const attribute = createAttribute(
+        'to={isActive ? "/dashboard" : "/login"}'
+      )
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe('{isActive ? "/dashboard" : "/login"}')
+    })
+
+    it("should return full source for object property access", () => {
+      const attribute = createAttribute("to={config.baseUrl}")
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe("{config.baseUrl}")
+    })
+
+    it("should return full source for array access", () => {
+      const attribute = createAttribute("to={routes[0]}")
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe("{routes[0]}")
+    })
+
+    it("should return full source for complex nested expression", () => {
+      const attribute = createAttribute(
+        "onClick={() => navigate(getUrl(userId))}"
+      )
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe("{() => navigate(getUrl(userId))}")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle boolean attribute (no value)", () => {
+      const attribute = createAttribute("disabled")
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe(null)
+    })
+
+    it("should handle numeric literal in expression", () => {
+      const attribute = createAttribute("tabIndex={0}")
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe("{0}")
+    })
+
+    it("should handle boolean literal in expression", () => {
+      const attribute = createAttribute("disabled={true}")
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe("{true}")
+    })
+
+    it("should handle null literal in expression", () => {
+      const attribute = createAttribute("value={null}")
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe("{null}")
+    })
+
+    it("should handle undefined literal in expression", () => {
+      const attribute = createAttribute("value={undefined}")
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe("{undefined}")
+    })
+  })
+
+  describe("string escaping and special characters", () => {
+    it("should handle strings with newlines", () => {
+      const attribute = createAttribute('to={"line1\\nline2"}')
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe('"line1\nline2"')
+    })
+
+    it("should handle strings with tabs", () => {
+      const attribute = createAttribute('to={"col1\\tcol2"}')
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe('"col1\tcol2"')
+    })
+
+    it("should handle strings with backslashes", () => {
+      const attribute = createAttribute('to={"C:\\\\Users\\\\file.txt"}')
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe('"C:\\Users\\file.txt"')
+    })
+
+    it("should handle unicode characters", () => {
+      const attribute = createAttribute('to={"🚀 rocket"}')
+      const result = getPrintableAttributeValue(attribute, j)
+      expect(result).toBe('"🚀 rocket"')
+    })
+  })
+})

package/src/components/shared/actions/getPrintableAttributeValue.ts

@@ -0,0 +1,23 @@
+import { JSCodeshift, JSXAttribute } from "jscodeshift"
+
+export function getPrintableAttributeValue(
+  attribute: JSXAttribute | null | undefined,
+  j: JSCodeshift
+): string | null {
+  if (!attribute) return null
+
+  const value = attribute.value
+
+  if (!value) return null
+  if (value.type === "StringLiteral") return `"${value.value}"`
+  if (value.type === "JSXExpressionContainer") {
+    // Check if the expression is a simple string literal
+    if (value.expression.type === "StringLiteral") {
+      return `"${value.expression.value}"`
+    }
+    // For complex expressions, return the full source
+    return j(value).toSource()
+  }
+
+  return null
+}

package/src/components/shared/actions/removeAttribute.test.ts

@@ -0,0 +1,343 @@
+import jscodeshift, { JSXAttribute } from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import { removeAttribute } from "./removeAttribute"
+
+const j = jscodeshift.withParser("tsx")
+
+// Helper to create JSX elements for testing
+function createElement(code: string) {
+  const source = j(`<div>${code}</div>`)
+  const element = source.find(j.JSXElement).at(0).get().value.children?.[0]
+  return element
+}
+
+describe("removeAttribute", () => {
+  describe("basic attribute removal", () => {
+    it("should remove existing string attribute", () => {
+      const element = createElement('<Button to="/users">Save</Button>')
+      const result = removeAttribute("to", { element, j, source: j("") })
+
+      expect(result).toBe(true)
+      expect(element.openingElement.attributes).toHaveLength(0)
+    })
+
+    it("should remove existing expression attribute", () => {
+      const element = createElement("<Button to={url}>Save</Button>")
+      const result = removeAttribute("to", { element, j, source: j("") })
+
+      expect(result).toBe(true)
+      expect(element.openingElement.attributes).toHaveLength(0)
+    })
+
+    it("should remove boolean attribute", () => {
+      const element = createElement("<Button disabled>Save</Button>")
+      const result = removeAttribute("disabled", { element, j, source: j("") })
+
+      expect(result).toBe(true)
+      expect(element.openingElement.attributes).toHaveLength(0)
+    })
+
+    it("should return false when attribute does not exist", () => {
+      const element = createElement('<Button variant="primary">Save</Button>')
+      const result = removeAttribute("to", { element, j, source: j("") })
+
+      expect(result).toBe(false)
+      expect(element.openingElement.attributes).toHaveLength(1)
+    })
+
+    it("should return false when element has no attributes", () => {
+      const element = createElement("<Button>Save</Button>")
+      const result = removeAttribute("to", { element, j, source: j("") })
+
+      expect(result).toBe(false)
+    })
+  })
+
+  describe("partial attribute removal", () => {
+    it("should remove target attribute while preserving others", () => {
+      const element = createElement(
+        '<Button to="/users" variant="primary" disabled>Save</Button>'
+      )
+      const result = removeAttribute("to", { element, j, source: j("") })
+
+      expect(result).toBe(true)
+      expect(element.openingElement.attributes).toHaveLength(2)
+
+      // Check that other attributes remain
+      const remainingAttrs = element.openingElement.attributes || []
+      const variantAttr = remainingAttrs.find(
+        (attr: JSXAttribute) =>
+          attr.type === "JSXAttribute" && attr.name?.name === "variant"
+      )
+      const disabledAttr = remainingAttrs.find(
+        (attr: JSXAttribute) =>
+          attr.type === "JSXAttribute" && attr.name?.name === "disabled"
+      )
+
+      expect(variantAttr).toBeTruthy()
+      expect(disabledAttr).toBeTruthy()
+    })
+
+    it("should handle removal of first attribute", () => {
+      const element = createElement(
+        '<Button to="/users" variant="primary">Save</Button>'
+      )
+      const result = removeAttribute("to", { element, j, source: j("") })
+
+      expect(result).toBe(true)
+      expect(element.openingElement.attributes).toHaveLength(1)
+      expect(
+        (element.openingElement.attributes?.[0] as JSXAttribute)?.name?.name
+      ).toBe("variant")
+    })
+
+    it("should handle removal of last attribute", () => {
+      const element = createElement(
+        '<Button variant="primary" to="/users">Save</Button>'
+      )
+      const result = removeAttribute("to", { element, j, source: j("") })
+
+      expect(result).toBe(true)
+      expect(element.openingElement.attributes).toHaveLength(1)
+      expect(
+        (element.openingElement.attributes?.[0] as JSXAttribute)?.name?.name
+      ).toBe("variant")
+    })
+
+    it("should handle removal of middle attribute", () => {
+      const element = createElement(
+        '<Button variant="primary" to="/users" disabled>Save</Button>'
+      )
+      const result = removeAttribute("to", { element, j, source: j("") })
+
+      expect(result).toBe(true)
+      expect(element.openingElement.attributes).toHaveLength(2)
+
+      const names = element.openingElement.attributes?.map(
+        (attr: JSXAttribute) =>
+          attr.type === "JSXAttribute" ? attr.name?.name : null
+      )
+      expect(names).toEqual(["variant", "disabled"])
+    })
+  })
+
+  describe("comment generation", () => {
+    it("should add comment when buildComment function is provided", () => {
+      const element = createElement('<Button to="/users">Save</Button>')
+      const buildComment = (propName: string, formattedValue: string) =>
+        `Removed ${propName}=${formattedValue}`
+
+      const result = removeAttribute("to", {
+        buildComment,
+        element,
+        j,
+        source: j(""),
+      })
+
+      expect(result).toBe(true)
+      expect(element.comments).toBeDefined()
+      expect(element.comments).toHaveLength(1)
+      expect(element.comments?.[0].value).toContain('Removed to="/users"')
+    })
+
+    it("should add multiple comments when called multiple times", () => {
+      const element = createElement(
+        '<Button to="/users" href="/users">Save</Button>'
+      )
+      const buildComment = (propName: string, formattedValue: string) =>
+        `Removed ${propName}=${formattedValue}`
+
+      removeAttribute("to", { buildComment, element, j, source: j("") })
+      removeAttribute("href", { buildComment, element, j, source: j("") })
+
+      expect(element.comments).toHaveLength(2)
+      expect(element.comments?.[0].value).toContain('Removed to="/users"')
+      expect(element.comments?.[1].value).toContain('Removed href="/users"')
+    })
+
+    it("should not add comment when buildComment returns undefined", () => {
+      const element = createElement('<Button to="">Save</Button>')
+      const buildComment = (propName: string, formattedValue: string) => {
+        if (formattedValue === '""') return undefined
+        return `Removed ${propName}=${formattedValue}`
+      }
+
+      const result = removeAttribute("to", {
+        buildComment,
+        element,
+        j,
+        source: j(""),
+      })
+
+      expect(result).toBe(true)
+      expect(element.comments).toBeUndefined()
+    })
+
+    it("should not add comment when buildComment returns empty string", () => {
+      const element = createElement('<Button to="">Save</Button>')
+      const buildComment = () => ""
+
+      const result = removeAttribute("to", {
+        buildComment,
+        element,
+        j,
+        source: j(""),
+      })
+
+      expect(result).toBe(true)
+      expect(element.comments).toBeUndefined()
+    })
+
+    it("should handle comment generation with expression attributes", () => {
+      const element = createElement("<Button to={url}>Save</Button>")
+      const buildComment = (propName: string, formattedValue: string) =>
+        `Removed ${propName}=${formattedValue}`
+
+      const result = removeAttribute("to", {
+        buildComment,
+        element,
+        j,
+        source: j(""),
+      })
+
+      expect(result).toBe(true)
+      expect(element.comments?.[0].value).toContain("Removed to={url}")
+    })
+
+    it("should handle comment generation with boolean attributes", () => {
+      const element = createElement("<Button disabled>Save</Button>")
+      const buildComment = (propName: string, formattedValue: string) =>
+        `Removed ${propName}=${formattedValue || "true"}`
+
+      const result = removeAttribute("disabled", {
+        buildComment,
+        element,
+        j,
+        source: j(""),
+      })
+
+      expect(result).toBe(true)
+      expect(element.comments?.[0].value).toContain("Removed disabled=true")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle element with null attributes", () => {
+      const element = createElement("<Button>Save</Button>")
+      element.openingElement.attributes = null
+
+      const result = removeAttribute("to", { element, j, source: j("") })
+
+      expect(result).toBe(false)
+    })
+
+    it("should handle element with undefined attributes", () => {
+      const element = createElement("<Button>Save</Button>")
+      element.openingElement.attributes = undefined
+
+      const result = removeAttribute("to", { element, j, source: j("") })
+
+      expect(result).toBe(false)
+    })
+
+    it("should handle JSX spread attributes", () => {
+      const element = createElement(
+        '<Button {...props} to="/users">Save</Button>'
+      )
+      const result = removeAttribute("to", { element, j, source: j("") })
+
+      expect(result).toBe(true)
+      expect(element.openingElement.attributes).toHaveLength(1)
+      expect(element.openingElement.attributes?.[0].type).toBe(
+        "JSXSpreadAttribute"
+      )
+    })
+
+    it("should not remove JSX spread attributes when looking for named attribute", () => {
+      const element = createElement("<Button {...props}>Save</Button>")
+      const result = removeAttribute("to", { element, j, source: j("") })
+
+      expect(result).toBe(false)
+      expect(element.openingElement.attributes).toHaveLength(1)
+    })
+
+    it("should handle self-closing elements", () => {
+      const element = createElement('<Button to="/users" />')
+      const result = removeAttribute("to", { element, j, source: j("") })
+
+      expect(result).toBe(true)
+      expect(element.openingElement.attributes).toHaveLength(0)
+    })
+
+    it("should work with different JSX element types", () => {
+      const element = createElement('<Link to="/users">Go</Link>')
+      const result = removeAttribute("to", { element, j, source: j("") })
+
+      expect(result).toBe(true)
+      expect(element.openingElement.attributes).toHaveLength(0)
+    })
+  })
+
+  describe("complex attribute values", () => {
+    it("should handle complex object expression", () => {
+      const element = createElement(
+        '<Button style={{ color: "red", fontSize: 14 }}>Save</Button>'
+      )
+      const buildComment = (propName: string, formattedValue: string) =>
+        `Removed ${propName}=${formattedValue}`
+
+      const result = removeAttribute("style", {
+        buildComment,
+        element,
+        j,
+        source: j(""),
+      })
+
+      expect(result).toBe(true)
+      expect(element.comments?.[0].value).toContain("Removed style={{")
+      expect(element.comments?.[0].value).toContain('color: "red"')
+      expect(element.comments?.[0].value).toContain("fontSize: 14")
+    })
+
+    it("should handle arrow function expression", () => {
+      const element = createElement(
+        "<Button onClick={() => doSomething()}>Save</Button>"
+      )
+      const buildComment = (propName: string, formattedValue: string) =>
+        `Removed ${propName}=${formattedValue}`
+
+      const result = removeAttribute("onClick", {
+        buildComment,
+        element,
+        j,
+        source: j(""),
+      })
+
+      expect(result).toBe(true)
+      expect(element.comments?.[0].value).toContain(
+        "Removed onClick={() => doSomething()}"
+      )
+    })
+
+    it("should handle template literal expression", () => {
+      const element = createElement(
+        "<Button to={`/users/${userId}`}>Save</Button>"
+      )
+      const buildComment = (propName: string, formattedValue: string) =>
+        `Removed ${propName}=${formattedValue}`
+
+      const result = removeAttribute("to", {
+        buildComment,
+        element,
+        j,
+        source: j(""),
+      })
+
+      expect(result).toBe(true)
+      expect(element.comments?.[0].value).toContain(
+        "Removed to={`/users/${userId}`}"
+      )
+    })
+  })
+})

package/src/components/shared/actions/removeAttribute.ts

@@ -0,0 +1,37 @@
+import { Collection, JSCodeshift, JSXElement } from "jscodeshift"
+
+import { findAttribute } from "../findAttribute"
+import { addComment } from "./addComment"
+import { getPrintableAttributeValue } from "./getPrintableAttributeValue"
+
+type RemoveAttributeConfig = {
+  /** Function to build comment text given the prop name and formatted value */
+  buildComment?: (propName: string, formattedValue: string) => string | void
+  element: JSXElement
+  j: JSCodeshift
+  source: Collection
+}
+
+export function removeAttribute(
+  name: string,
+  { element, buildComment, j, source }: RemoveAttributeConfig
+): boolean {
+  const attributes = element.openingElement.attributes || []
+  const attribute = findAttribute(attributes, name)
+
+  if (!attribute) return false
+
+  const index = attributes?.indexOf(attribute)
+
+  if (buildComment) {
+    const printableValue = getPrintableAttributeValue(attribute, j)
+    const commentText = buildComment(name, printableValue || "")
+
+    if (commentText) {
+      addComment({ element, j, scope: name, source, text: commentText })
+    }
+  }
+
+  attributes.splice(index, 1)
+  return true
+}

package/src/components/shared/transformFactories/attributeTransformFactory.ts

@@ -1,4 +1,4 @@
-import { JSCodeshift, JSXElement, Transform } from "jscodeshift"
+import { Collection, JSCodeshift, JSXElement, Transform } from "jscodeshift"
 
 import { TransformCondition } from "../types"
 import { getImportName } from "./helpers/manageImports"
@@ -14,7 +14,10 @@ export function attributeTransformFactory(config: {
   /** Package the target component is imported from */
   targetPackage: string
   /** Function that performs the actual attribute transformation */
-  transform: (element: JSXElement, j: JSCodeshift) => boolean
+  transform: (
+    element: JSXElement,
+    resources: { j: JSCodeshift; source: Collection }
+  ) => boolean
 }): Transform {
   return (fileInfo, api) => {
     const j = api.jscodeshift
@@ -40,7 +43,7 @@ export function attributeTransformFactory(config: {
         const element = path.parent.value
 
         if (config.condition(element)) {
-          if (config.transform(element, j)) {
+          if (config.transform(element, { j, source })) {
             hasChanges = true
           }
         }