@planningcenter/tapestry-migration-cli 2.2.0 → 2.3.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "2.2.0",
+  "version": "2.3.0-rc.1",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -47,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "65b1a550ddf347739d284170699cecfabb0c38b8"
+  "gitHead": "6e606540c9f564f579c3e56e2c3f844823be15c6"
 }

package/src/components/button/index.ts

@@ -1,5 +1,7 @@
 import { Transform } from "jscodeshift"
 
+import iconLeftToPrefix from "./transforms/iconLeftToPrefix"
+import iconRightToSuffix from "./transforms/iconRightToSuffix"
 import linkToButton from "./transforms/linkToButton"
 import moveButtonImport from "./transforms/moveButtonImport"
 import removeToTransform from "./transforms/removeTo"
@@ -14,6 +16,8 @@ const transform: Transform = (fileInfo, api, options) => {
     linkToButton,
     titleToLabel,
     tooltipToWrapper,
+    iconRightToSuffix,
+    iconLeftToPrefix,
     removeToTransform,
     moveButtonImport,
   ]

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

@@ -0,0 +1,432 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./iconLeftToPrefix"
+
+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("iconLeftToPrefix transform", () => {
+  describe("basic transformations", () => {
+    it("should convert iconLeft to prefix with Icon component", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button iconLeft={{name: "check"}}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button, Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('prefix={<Icon {...{name: "check"}} />}')
+      expect(result).toContain("<Button")
+      expect(result).toContain("Save</Button>")
+      expect(result).not.toContain("iconLeft=")
+    })
+
+    it("should handle complex icon props", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button iconLeft={{name: "save", size: "sm", color: "blue"}}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button, Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'prefix={<Icon {...{name: "save", size: "sm", color: "blue"}} />}'
+      )
+      expect(result).not.toContain("iconLeft=")
+    })
+
+    it("should preserve other Button attributes", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button iconLeft={{name: "check"}} variant="primary" onClick={handleClick} disabled>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('prefix={<Icon {...{name: "check"}} />}')
+      expect(result).toContain(
+        'variant="primary" onClick={handleClick} disabled'
+      )
+      expect(result).not.toContain("iconLeft=")
+    })
+
+    it("should handle self-closing Button with iconLeft", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button iconLeft={{name: "check"}} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button, Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('prefix={<Icon {...{name: "check"}} />}')
+      expect(result).not.toContain("iconLeft=")
+    })
+
+    it("should handle variable expressions", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button iconLeft={iconProps}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button, Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain("prefix={<Icon {...iconProps} />}")
+      expect(result).not.toContain("iconLeft=")
+    })
+  })
+
+  describe("import conflict handling", () => {
+    it("should use TRIcon alias when Icon already imported from another package", () => {
+      const input = `
+import { Icon } from "react-feather"
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button iconLeft={{name: "check"}}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('import { Icon } from "react-feather"')
+      expect(result).toContain(
+        'import { Button, Icon as TRIcon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('prefix={<TRIcon {...{name: "check"}} />}')
+      expect(result).not.toContain("iconLeft=")
+    })
+
+    it("should use TRIcon alias when Icon is default import from another package", () => {
+      const input = `
+import Icon from "heroicons"
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button iconLeft={{name: "save"}}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('import Icon from "heroicons"')
+      expect(result).toContain(
+        'import { Button, Icon as TRIcon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('prefix={<TRIcon {...{name: "save"}} />}')
+      expect(result).not.toContain("iconLeft=")
+    })
+
+    it("should not conflict with existing tapestry-react Icon import", () => {
+      const input = `
+import { Button, Icon } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button iconLeft={{name: "check"}}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button, Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('prefix={<Icon {...{name: "check"}} />}')
+      expect(result).not.toContain("TRIcon")
+      expect(result).not.toContain("iconLeft=")
+    })
+
+    it("should handle existing tapestry-react import without Icon", () => {
+      const input = `
+import { Button, Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button iconLeft={{name: "settings"}}>Settings</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button, Link, Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('prefix={<Icon {...{name: "settings"}} />}')
+      expect(result).not.toContain("iconLeft=")
+    })
+
+    it("should create new tapestry-react import when none exists", () => {
+      const input = `
+import React from "react"
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button iconLeft={{name: "home"}}>Home</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button, Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('prefix={<Icon {...{name: "home"}} />}')
+    })
+  })
+
+  describe("multiple elements", () => {
+    it("should handle multiple Buttons with iconLeft", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Button iconLeft={{name: "save"}}>Save</Button>
+      <Button iconLeft={{name: "cancel"}}>Cancel</Button>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button, Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('prefix={<Icon {...{name: "save"}} />}')
+      expect(result).toContain('prefix={<Icon {...{name: "cancel"}} />}')
+      expect(result).not.toContain("iconLeft=")
+    })
+
+    it("should only transform Buttons with iconLeft attribute", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Button iconLeft={{name: "check"}}>With Icon</Button>
+      <Button>Without Icon</Button>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('prefix={<Icon {...{name: "check"}} />}')
+      expect(result).toContain("<Button>Without Icon</Button>")
+      // Only one prefix should be created
+      const prefixCount = (result?.match(/prefix=/g) || []).length
+      expect(prefixCount).toBe(1)
+    })
+
+    it("should handle mixed import conflicts", () => {
+      const input = `
+import { Icon } from "lucide-react"
+import { Button, Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Button iconLeft={{name: "save"}}>Save</Button>
+      <Button iconLeft={{name: "delete", color: "red"}}>Delete</Button>
+      <Link>Cancel</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('import { Icon } from "lucide-react"')
+      expect(result).toContain(
+        'import { Button, Link, Icon as TRIcon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('prefix={<TRIcon {...{name: "save"}} />}')
+      expect(result).toContain(
+        'prefix={<TRIcon {...{name: "delete", color: "red"}} />}'
+      )
+      expect(result).toContain("<Link>Cancel</Link>")
+      expect(result).not.toContain("iconLeft=")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should return null when Button is not imported from tapestry-react", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+import { Button } from "other-library"
+
+export default function Test() {
+  return <Button iconLeft={{name: "check"}}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when no Button is imported", () => {
+      const input = `
+import React from "react"
+
+export default function Test() {
+  return <div>No buttons here</div>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when no iconLeft attributes are present", () => {
+      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 handle aliased Button import", () => {
+      const input = `
+import { Button as TapestryButton } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <TapestryButton iconLeft={{name: "settings"}}>Settings</TapestryButton>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button as TapestryButton, Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('prefix={<Icon {...{name: "settings"}} />}')
+      expect(result).toContain("<TapestryButton")
+      expect(result).not.toContain("iconLeft=")
+    })
+
+    it("should handle empty iconLeft attribute", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button iconLeft>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      // Should not transform empty iconLeft attribute
+      expect(result).toBe(null)
+    })
+  })
+
+  describe("complex scenarios", () => {
+    it("should handle nested JSX and multiple import conflicts", () => {
+      const input = `
+import React from "react"
+import { Icon as FeatherIcon } from "react-feather"
+import Icon from "heroicons"
+import { Button, Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Button iconLeft={{name: "save", size: "lg"}} variant="primary">
+        Save Document
+      </Button>
+      <Button iconLeft={{name: "trash", color: "danger"}} variant="outline">
+        Delete
+      </Button>
+      <Link href="/cancel">Cancel</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Icon as FeatherIcon } from "react-feather"'
+      )
+      expect(result).toContain('import Icon from "heroicons"')
+      expect(result).toContain(
+        'import { Button, Link, Icon as TRIcon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'prefix={<TRIcon {...{name: "save", size: "lg"}} />}'
+      )
+      expect(result).toContain(
+        'prefix={<TRIcon {...{name: "trash", color: "danger"}} />}'
+      )
+      expect(result).toContain('<Link href="/cancel">Cancel</Link>')
+      expect(result).not.toContain("iconLeft=")
+    })
+  })
+
+  it('converts string values to {{ name: "value" }}', () => {
+    const input = `
+import React from "react"
+import { Button} from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Button iconLeft="save" variant="primary">
+        Save Document
+      </Button>
+    </div>
+  )
+}`.trim()
+
+    const result = applyTransform(input)
+
+    expect(result).not.toBeNull()
+    expect(result).toContain(`prefix={<Icon
+        {...{
+          name: "save"
+        }} />}`)
+    expect(result).not.toContain("iconLeft=")
+  })
+})

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

@@ -0,0 +1,33 @@
+import { convertAttributeFromObjectToJSXElement } from "../../shared/actions/convertAttributeFromObjectToJSXElement"
+import { transformAttributeName } from "../../shared/actions/transformAttributeName"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { addImport } from "../../shared/transformFactories/helpers/manageImports"
+
+const transform = attributeTransformFactory({
+  condition: hasAttribute("iconLeft"),
+  targetComponent: "Button",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const name = addImport({
+      component: "Icon",
+      conflictAlias: "TRIcon",
+      j,
+      pkg: "@planningcenter/tapestry-react",
+      source,
+    })
+    const updatedElement = convertAttributeFromObjectToJSXElement({
+      attributeName: "iconLeft",
+      element,
+      elementName: name,
+      j,
+      stringValueKey: "name",
+    })
+    if (!updatedElement) return false
+
+    transformAttributeName("iconLeft", "prefix", { element })
+    return true
+  },
+})
+
+export default transform

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

@@ -0,0 +1,407 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./iconRightToSuffix"
+
+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("iconRightToSuffix transform", () => {
+  describe("basic transformations", () => {
+    it("should convert iconRight to suffix with Icon component", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button iconRight={{name: "check"}}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button, Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('suffix={<Icon {...{name: "check"}} />}')
+      expect(result).toContain("<Button")
+      expect(result).toContain("Save</Button>")
+      expect(result).not.toContain("iconRight=")
+    })
+
+    it("should handle complex icon props", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button iconRight={{name: "save", size: "sm", color: "blue"}}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button, Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'suffix={<Icon {...{name: "save", size: "sm", color: "blue"}} />}'
+      )
+      expect(result).not.toContain("iconRight=")
+    })
+
+    it("should preserve other Button attributes", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button iconRight={{name: "check"}} variant="primary" onClick={handleClick} disabled>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('suffix={<Icon {...{name: "check"}} />}')
+      expect(result).toContain(
+        'variant="primary" onClick={handleClick} disabled'
+      )
+      expect(result).not.toContain("iconRight=")
+    })
+
+    it("should handle self-closing Button with iconRight", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button iconRight={{name: "check"}} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button, Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('suffix={<Icon {...{name: "check"}} />}')
+      expect(result).not.toContain("iconRight=")
+    })
+
+    it("should handle variable expressions", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button iconRight={iconProps}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button, Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain("suffix={<Icon {...iconProps} />}")
+      expect(result).not.toContain("iconRight=")
+    })
+  })
+
+  describe("import conflict handling", () => {
+    it("should use TRIcon alias when Icon already imported from another package", () => {
+      const input = `
+import { Icon } from "react-feather"
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button iconRight={{name: "check"}}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('import { Icon } from "react-feather"')
+      expect(result).toContain(
+        'import { Button, Icon as TRIcon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('suffix={<TRIcon {...{name: "check"}} />}')
+      expect(result).not.toContain("iconRight=")
+    })
+
+    it("should use TRIcon alias when Icon is default import from another package", () => {
+      const input = `
+import Icon from "heroicons"
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button iconRight={{name: "save"}}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('import Icon from "heroicons"')
+      expect(result).toContain(
+        'import { Button, Icon as TRIcon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('suffix={<TRIcon {...{name: "save"}} />}')
+      expect(result).not.toContain("iconRight=")
+    })
+
+    it("should not conflict with existing tapestry-react Icon import", () => {
+      const input = `
+import { Button, Icon } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button iconRight={{name: "check"}}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button, Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('suffix={<Icon {...{name: "check"}} />}')
+      expect(result).not.toContain("TRIcon")
+      expect(result).not.toContain("iconRight=")
+    })
+
+    it("should handle existing tapestry-react import without Icon", () => {
+      const input = `
+import { Button, Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button iconRight={{name: "settings"}}>Settings</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button, Link, Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('suffix={<Icon {...{name: "settings"}} />}')
+      expect(result).not.toContain("iconRight=")
+    })
+
+    it("should create new tapestry-react import when none exists", () => {
+      const input = `
+import React from "react"
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button iconRight={{name: "home"}}>Home</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button, Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('suffix={<Icon {...{name: "home"}} />}')
+    })
+  })
+
+  describe("multiple elements", () => {
+    it("should handle multiple Buttons with iconRight", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Button iconRight={{name: "save"}}>Save</Button>
+      <Button iconRight={{name: "cancel"}}>Cancel</Button>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button, Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('suffix={<Icon {...{name: "save"}} />}')
+      expect(result).toContain('suffix={<Icon {...{name: "cancel"}} />}')
+      expect(result).not.toContain("iconRight=")
+    })
+
+    it("should only transform Buttons with iconRight attribute", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Button iconRight={{name: "check"}}>With Icon</Button>
+      <Button>Without Icon</Button>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('suffix={<Icon {...{name: "check"}} />}')
+      expect(result).toContain("<Button>Without Icon</Button>")
+      // Only one suffix should be created
+      const prefixCount = (result?.match(/suffix=/g) || []).length
+      expect(prefixCount).toBe(1)
+    })
+
+    it("should handle mixed import conflicts", () => {
+      const input = `
+import { Icon } from "lucide-react"
+import { Button, Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Button iconRight={{name: "save"}}>Save</Button>
+      <Button iconRight={{name: "delete", color: "red"}}>Delete</Button>
+      <Link>Cancel</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('import { Icon } from "lucide-react"')
+      expect(result).toContain(
+        'import { Button, Link, Icon as TRIcon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('suffix={<TRIcon {...{name: "save"}} />}')
+      expect(result).toContain(
+        'suffix={<TRIcon {...{name: "delete", color: "red"}} />}'
+      )
+      expect(result).toContain("<Link>Cancel</Link>")
+      expect(result).not.toContain("iconRight=")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should return null when Button is not imported from tapestry-react", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+import { Button } from "other-library"
+
+export default function Test() {
+  return <Button iconRight={{name: "check"}}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when no Button is imported", () => {
+      const input = `
+import React from "react"
+
+export default function Test() {
+  return <div>No buttons here</div>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when no iconRight attributes are present", () => {
+      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 handle aliased Button import", () => {
+      const input = `
+import { Button as TapestryButton } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <TapestryButton iconRight={{name: "settings"}}>Settings</TapestryButton>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button as TapestryButton, Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('suffix={<Icon {...{name: "settings"}} />}')
+      expect(result).toContain("<TapestryButton")
+      expect(result).not.toContain("iconRight=")
+    })
+
+    it("should handle empty iconRight attribute", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button iconRight>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      // Should not transform empty iconRight attribute
+      expect(result).toBe(null)
+    })
+  })
+
+  describe("complex scenarios", () => {
+    it("should handle nested JSX and multiple import conflicts", () => {
+      const input = `
+import React from "react"
+import { Icon as FeatherIcon } from "react-feather"
+import Icon from "heroicons"
+import { Button, Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Button iconRight={{name: "save", size: "lg"}} variant="primary">
+        Save Document
+      </Button>
+      <Button iconRight={{name: "trash", color: "danger"}} variant="outline">
+        Delete
+      </Button>
+      <Link href="/cancel">Cancel</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Icon as FeatherIcon } from "react-feather"'
+      )
+      expect(result).toContain('import Icon from "heroicons"')
+      expect(result).toContain(
+        'import { Button, Link, Icon as TRIcon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'suffix={<TRIcon {...{name: "save", size: "lg"}} />}'
+      )
+      expect(result).toContain(
+        'suffix={<TRIcon {...{name: "trash", color: "danger"}} />}'
+      )
+      expect(result).toContain('<Link href="/cancel">Cancel</Link>')
+      expect(result).not.toContain("iconRight=")
+    })
+  })
+})

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

@@ -0,0 +1,33 @@
+import { convertAttributeFromObjectToJSXElement } from "../../shared/actions/convertAttributeFromObjectToJSXElement"
+import { transformAttributeName } from "../../shared/actions/transformAttributeName"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { addImport } from "../../shared/transformFactories/helpers/manageImports"
+
+const transform = attributeTransformFactory({
+  condition: hasAttribute("iconRight"),
+  targetComponent: "Button",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const name = addImport({
+      component: "Icon",
+      conflictAlias: "TRIcon",
+      j,
+      pkg: "@planningcenter/tapestry-react",
+      source,
+    })
+    const updatedElement = convertAttributeFromObjectToJSXElement({
+      attributeName: "iconRight",
+      element,
+      elementName: name,
+      j,
+      stringValueKey: "name",
+    })
+    if (!updatedElement) return false
+
+    transformAttributeName("iconRight", "suffix", { element })
+    return true
+  },
+})
+
+export default transform

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

@@ -0,0 +1,139 @@
+import jscodeshift, {
+  JSXAttribute,
+  JSXElement,
+  JSXExpressionContainer,
+  JSXIdentifier,
+} from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import { convertAttributeFromObjectToJSXElement } from "./convertAttributeFromObjectToJSXElement"
+
+const j = jscodeshift.withParser("tsx")
+
+function createSource(code: string) {
+  return j(code)
+}
+
+function createElementFromCode(code: string): JSXElement {
+  const source = createSource(`<div>${code}</div>`)
+  return source.find(j.JSXElement).at(0).get().value.children?.[0] as JSXElement
+}
+
+describe("convertAttributeFromObjectToJSXElement", () => {
+  it("should convert object attribute to JSX element", () => {
+    const element = createElementFromCode(
+      '<Button iconLeft={{ name: "star", size: 16 }} />'
+    )
+
+    const result = convertAttributeFromObjectToJSXElement({
+      attributeName: "iconLeft",
+      element,
+      elementName: "Icon",
+      j,
+    })
+
+    expect(result).not.toBeNull()
+    expect(result?.type).toBe("JSXElement")
+    expect((result?.openingElement.name as JSXIdentifier).name).toBe("Icon")
+    expect(result?.openingElement.selfClosing).toBe(true)
+    expect(result?.openingElement.attributes).toHaveLength(1)
+    expect(result?.openingElement.attributes?.[0].type).toBe(
+      "JSXSpreadAttribute"
+    )
+
+    // Check that the attribute still exists but now has JSX element value
+    const iconLeftAttr = element.openingElement.attributes?.find(
+      (attr) => attr.type === "JSXAttribute" && attr.name?.name === "iconLeft"
+    ) as JSXAttribute
+    expect(iconLeftAttr).toBeDefined()
+    expect(iconLeftAttr?.value?.type).toBe("JSXExpressionContainer")
+    expect(
+      (iconLeftAttr?.value as JSXExpressionContainer)?.expression?.type
+    ).toBe("JSXElement")
+  })
+
+  it("should handle expression container attributes", () => {
+    const element = createElementFromCode("<Button iconLeft={iconProps} />")
+
+    const result = convertAttributeFromObjectToJSXElement({
+      attributeName: "iconLeft",
+      element,
+      elementName: "Icon",
+      j,
+    })
+
+    expect(result).not.toBeNull()
+    expect(result?.openingElement.attributes).toHaveLength(1)
+    expect(result?.openingElement.attributes?.[0].type).toBe(
+      "JSXSpreadAttribute"
+    )
+
+    // Check that the attribute still exists but now has JSX element value
+    const iconLeftAttr = element.openingElement.attributes?.find(
+      (attr) => attr.type === "JSXAttribute" && attr.name?.name === "iconLeft"
+    ) as JSXAttribute
+    expect(iconLeftAttr).toBeDefined()
+    expect(iconLeftAttr?.value?.type).toBe("JSXExpressionContainer")
+    expect(
+      (iconLeftAttr?.value as JSXExpressionContainer)?.expression?.type
+    ).toBe("JSXElement")
+  })
+
+  it("should return null for empty expression container", () => {
+    const element = createElementFromCode("<Button iconLeft={{}} />")
+
+    const result = convertAttributeFromObjectToJSXElement({
+      attributeName: "iconLeft",
+      element,
+      elementName: "Icon",
+      j,
+    })
+
+    // Should return null since empty object has no props to spread
+    expect(result).toBeNull()
+
+    // Check that the attribute was not modified since no conversion occurred
+    const iconLeftAttr = element.openingElement.attributes?.find(
+      (attr) => attr.type === "JSXAttribute" && attr.name?.name === "iconLeft"
+    ) as JSXAttribute
+    expect(iconLeftAttr).toBeDefined()
+    expect(iconLeftAttr?.value?.type).toBe("JSXExpressionContainer")
+    expect(
+      (iconLeftAttr?.value as JSXExpressionContainer)?.expression?.type
+    ).toBe("ObjectExpression")
+  })
+
+  it("should return null for missing attribute", () => {
+    const element = createElementFromCode("<Button>Save</Button>")
+
+    const result = convertAttributeFromObjectToJSXElement({
+      attributeName: "iconLeft",
+      element,
+      elementName: "Icon",
+      j,
+    })
+
+    expect(result).toBeNull()
+  })
+
+  it("should return null for attribute with no value", () => {
+    const element = j.jsxElement(
+      j.jsxOpeningElement(
+        j.jsxIdentifier("Button"),
+        [j.jsxAttribute(j.jsxIdentifier("iconLeft"), null)],
+        false
+      ),
+      j.jsxClosingElement(j.jsxIdentifier("Button")),
+      [j.jsxText("Save")]
+    )
+
+    const result = convertAttributeFromObjectToJSXElement({
+      attributeName: "iconLeft",
+      element,
+      elementName: "Icon",
+      j,
+    })
+
+    expect(result).toBeNull()
+  })
+})

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

@@ -0,0 +1,81 @@
+import {
+  JSCodeshift,
+  JSXAttribute,
+  JSXElement,
+  JSXSpreadAttribute,
+} from "jscodeshift"
+
+import { getAttribute } from "./getAttribute"
+
+export function convertAttributeFromObjectToJSXElement({
+  attributeName,
+  element,
+  elementName,
+  j,
+  stringValueKey,
+}: {
+  attributeName: string
+  element: JSXElement
+  elementName: string
+  j: JSCodeshift
+  stringValueKey?: string
+}): JSXElement | null {
+  const attribute = getAttribute({ element, name: attributeName })
+  if (!attribute || !attribute.value) return null
+
+  const elementProps = buildProps({ attribute, j, stringValueKey })
+  if (!elementProps) return null
+
+  const newElement = j.jsxElement(
+    j.jsxOpeningElement(j.jsxIdentifier(elementName), elementProps, true),
+    null,
+    []
+  )
+
+  attribute.value = j.jsxExpressionContainer(newElement)
+
+  return newElement
+}
+
+function buildProps({
+  attribute,
+  j,
+  stringValueKey,
+}: {
+  attribute: JSXAttribute
+  j: JSCodeshift
+  stringValueKey?: string
+}): JSXSpreadAttribute[] | null {
+  if (!attribute.value) return null
+  if (attribute.value.type == "StringLiteral")
+    return stringToProps({ attribute, j, stringValueKey })
+  if (attribute.value.type !== "JSXExpressionContainer") return null
+  if (attribute.value.expression.type === "JSXEmptyExpression") return null
+  if (
+    attribute.value.expression.type === "ObjectExpression" &&
+    attribute.value.expression.properties.length === 0
+  )
+    return null
+  return [j.jsxSpreadAttribute(attribute.value.expression)]
+}
+
+function stringToProps({
+  attribute,
+  j,
+  stringValueKey,
+}: {
+  attribute: JSXAttribute
+  j: JSCodeshift
+  stringValueKey?: string
+}): JSXSpreadAttribute[] | null {
+  if (!attribute.value) return null
+  if (stringValueKey === undefined) return null
+
+  return [
+    j.jsxSpreadAttribute(
+      j.objectExpression([
+        j.objectProperty(j.identifier(stringValueKey), attribute.value),
+      ])
+    ),
+  ]
+}