@planningcenter/tapestry-migration-cli 2.4.0-rc.11 → 2.4.0-rc.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "2.4.0-rc.11",
+  "version": "2.4.0-rc.13",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -51,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "284e43162c5ec8403699fbfec99ae235a380a7dc"
+  "gitHead": "275d9583901bea8ef0d121ef25eff0a1fdf309b4"
 }

package/src/components/button/index.ts

@@ -8,6 +8,7 @@ import convertStyleProps from "./transforms/convertStyleProps"
 import iconLeftToPrefix from "./transforms/iconLeftToPrefix"
 import iconRightToSuffix from "./transforms/iconRightToSuffix"
 import iconToIconButton from "./transforms/iconToIconButton"
+import innerRefToRef from "./transforms/innerRefToRef"
 import linkToButton from "./transforms/linkToButton"
 import moveButtonImport from "./transforms/moveButtonImport"
 import removeAsButton from "./transforms/removeAsButton"
@@ -55,6 +56,7 @@ const transform: Transform = async (fileInfo, api, options) => {
     themeVariantToKind,
     titleToLabel,
     childrenToLabel,
+    innerRefToRef,
     removeToTransform,
     removeDuplicateKeys,
     removeAsButton,

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

@@ -0,0 +1,170 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./innerRefToRef"
+
+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("innerRefToRef transform", () => {
+  describe("basic transformations", () => {
+    it("should transform Button 'innerRef' prop to 'ref' prop", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button innerRef={buttonRef}>Click me</Button>
+}
+      `.trim()
+
+      const expected = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button ref={buttonRef}>Click me</Button>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(expected)
+    })
+
+    it("should transform Button 'innerRef' prop to 'ref' prop with function", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button innerRef={(el) => setButtonRef(el)}>Click me</Button>
+}
+      `.trim()
+
+      const expected = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button ref={(el) => setButtonRef(el)}>Click me</Button>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(expected)
+    })
+
+    it("should transform Button 'innerRef' prop to 'ref' prop with useRef", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+import { useRef } from "react"
+
+export default function Test() {
+  const buttonRef = useRef(null)
+  return <Button innerRef={buttonRef}>Click me</Button>
+}
+      `.trim()
+
+      const expected = `
+import { Button } from "@planningcenter/tapestry-react"
+import { useRef } from "react"
+
+export default function Test() {
+  const buttonRef = useRef(null)
+  return <Button ref={buttonRef}>Click me</Button>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(expected)
+    })
+  })
+
+  describe("multiple components", () => {
+    it("should transform multiple Button components with innerRef", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Button innerRef={buttonRef1}>First</Button>
+      <Button innerRef={buttonRef2}>Second</Button>
+    </div>
+  )
+}
+      `.trim()
+
+      const expected = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Button ref={buttonRef1}>First</Button>
+      <Button ref={buttonRef2}>Second</Button>
+    </div>
+  );
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(expected)
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not transform Button without innerRef", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button onClick={handleClick}>Click me</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should not transform other components with innerRef", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link innerRef={linkRef}>Go somewhere</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should preserve other props when transforming innerRef", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const buttonRef = null
+  return <Button innerRef={buttonRef} onClick={() => {}} disabled>Click me</Button>
+}
+      `.trim()
+
+      const expected = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const buttonRef = null
+  return <Button ref={buttonRef} onClick={() => {}} disabled>Click me</Button>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(expected)
+    })
+  })
+})

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

@@ -0,0 +1,14 @@
+import { transformAttributeName } from "../../shared/actions/transformAttributeName"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform = attributeTransformFactory({
+  condition: hasAttribute("innerRef"),
+  targetComponent: "Button",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element) => {
+    return transformAttributeName("innerRef", "ref", { element })
+  },
+})
+
+export default transform

package/src/components/link/index.ts

@@ -4,10 +4,12 @@ import childrenToLabel from "./transforms/childrenToLabel"
 import convertStyleProps from "./transforms/convertStyleProps"
 import inlineMemberToKind from "./transforms/inlineMemberToKind"
 import inlinePropToKind from "./transforms/inlinePropToKind"
+import innerRefToRef from "./transforms/innerRefToRef"
 import moveLinkImport from "./transforms/moveLinkImport"
 import removeAs from "./transforms/removeAs"
 import reviewStyles from "./transforms/reviewStyles"
 import targetBlankToExternal from "./transforms/targetBlankToExternal"
+import tooltipToWrapper from "./transforms/tooltipToWrapper"
 import toToHref from "./transforms/toToHref"
 import unsupportedProps from "./transforms/unsupportedProps"
 
@@ -18,8 +20,10 @@ const transform: Transform = (fileInfo, api, options) => {
   const transforms: Transform[] = [
     inlineMemberToKind,
     inlinePropToKind,
+    tooltipToWrapper,
     toToHref,
     targetBlankToExternal,
+    innerRefToRef,
     removeAs,
     childrenToLabel,
     reviewStyles,

package/src/components/link/transforms/innerRefToRef.test.ts

@@ -0,0 +1,170 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./innerRefToRef"
+
+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("innerRefToRef transform", () => {
+  describe("basic transformations", () => {
+    it("should transform Link 'innerRef' prop to 'ref' prop", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link innerRef={linkRef}>Go somewhere</Link>
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link ref={linkRef}>Go somewhere</Link>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(expected)
+    })
+
+    it("should transform Link 'innerRef' prop to 'ref' prop with function", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link innerRef={(el) => setLinkRef(el)}>Go somewhere</Link>
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link ref={(el) => setLinkRef(el)}>Go somewhere</Link>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(expected)
+    })
+
+    it("should transform Link 'innerRef' prop to 'ref' prop with useRef", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+import { useRef } from "react"
+
+export default function Test() {
+  const linkRef = useRef(null)
+  return <Link innerRef={linkRef}>Go somewhere</Link>
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry-react"
+import { useRef } from "react"
+
+export default function Test() {
+  const linkRef = useRef(null)
+  return <Link ref={linkRef}>Go somewhere</Link>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(expected)
+    })
+  })
+
+  describe("multiple components", () => {
+    it("should transform multiple Link components with innerRef", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link innerRef={linkRef1}>First</Link>
+      <Link innerRef={linkRef2}>Second</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link ref={linkRef1}>First</Link>
+      <Link ref={linkRef2}>Second</Link>
+    </div>
+  );
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(expected)
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not transform Link without innerRef", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/dashboard">Go to dashboard</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should not transform other components with innerRef", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button innerRef={buttonRef}>Click me</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should preserve other props when transforming innerRef", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const linkRef = null
+  return <Link innerRef={linkRef} href="/dashboard" onClick={() => {}}>Go to dashboard</Link>
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const linkRef = null
+  return <Link ref={linkRef} href="/dashboard" onClick={() => {}}>Go to dashboard</Link>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(expected)
+    })
+  })
+})

package/src/components/link/transforms/innerRefToRef.ts

@@ -0,0 +1,14 @@
+import { transformAttributeName } from "../../shared/actions/transformAttributeName"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform = attributeTransformFactory({
+  condition: hasAttribute("innerRef"),
+  targetComponent: "Link",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element) => {
+    return transformAttributeName("innerRef", "ref", { element })
+  },
+})
+
+export default transform

package/src/components/link/transforms/tooltipToWrapper.test.ts

@@ -0,0 +1,392 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./tooltipToWrapper"
+
+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("tooltipToWrapper transform", () => {
+  describe("basic transformations", () => {
+    it("should wrap Link with tooltip string in Tooltip component", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/save" tooltip={{ title: "Save this item" }}>Save</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Link, Tooltip } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('<Tooltip {...{ title: "Save this item" }}>')
+      expect(result).toContain('<Link href="/save">Save</Link>')
+      expect(result).toContain("</Tooltip>")
+      expect(result).not.toContain("tooltip=")
+    })
+
+    it("should handle tooltip with JSX expression containing string literal", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/save" tooltip={{ title: "Save this item" }}>Save</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('<Tooltip {...{ title: "Save this item" }}>')
+      expect(result).toContain('<Link href="/save">Save</Link>')
+      expect(result).not.toContain("tooltip=")
+    })
+
+    it("should handle tooltip with object expression as spread", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/save" tooltip={{text: "Save", placement: "top"}}>Save</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        '<Tooltip {...{text: "Save", placement: "top"}}>'
+      )
+      expect(result).toContain('<Link href="/save">Save</Link>')
+      expect(result).not.toContain("tooltip=")
+    })
+
+    it("should preserve other Link attributes", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/help" tooltip={{title: "Help"}} kind="primary" onClick={handler}>Help</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('<Tooltip {...{title: "Help"}}>')
+      expect(result).toContain(
+        '<Link href="/help" kind="primary" onClick={handler}>Help</Link>'
+      )
+      expect(result).not.toContain("tooltip=")
+    })
+
+    it("should handle self-closing Link with tooltip", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/icon" tooltip={{title: "Icon link"}} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('<Tooltip {...{title: "Icon link"}}>')
+      expect(result).toContain('<Link href="/icon" />')
+      expect(result).toContain("</Tooltip>")
+      expect(result).not.toContain("tooltip=")
+    })
+  })
+
+  describe("import management", () => {
+    it("should add Tooltip to existing tapestry-react import", () => {
+      const input = `
+import { Link, Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/save" tooltip={{title: "Save"}}>Save</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Link, Button, Tooltip } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('<Tooltip {...{title: "Save"}}>')
+    })
+
+    it("should not add duplicate Tooltip import", () => {
+      const input = `
+import { Link, Tooltip } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/save" tooltip={{title: "Save"}}>Save</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      const tooltipImports = (result?.match(/import.*Tooltip.*from/g) || [])
+        .length
+      expect(tooltipImports).toBe(1)
+      expect(result).toContain(
+        'import { Link, Tooltip } from "@planningcenter/tapestry-react"'
+      )
+    })
+
+    it("should create new tapestry-react import when none exists", () => {
+      const input = `
+import React from "react"
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/save" tooltip={{title: "Save"}}>Save</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Link, Tooltip } from "@planningcenter/tapestry-react"'
+      )
+    })
+
+    it("should handle empty imports scenario", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <Link href="/save" tooltip={{title: "Save"}}>Save</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Link, Tooltip } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+
+  describe("multiple elements", () => {
+    it("should handle multiple Links with tooltips", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/save" tooltip={{title: "Save the document"}}>Save</Link>
+      <Link href="/cancel" tooltip={{title: "Cancel operation"}}>Cancel</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Link, Tooltip } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('<Tooltip {...{title: "Save the document"}}>')
+      expect(result).toContain('<Tooltip {...{title: "Cancel operation"}}>')
+      expect(result).not.toContain("tooltip=")
+    })
+
+    it("should only transform Links with tooltip attribute", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/with" tooltip={{title: "Has tooltip"}}>With Tooltip</Link>
+      <Link href="/without">Without Tooltip</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('<Tooltip {...{title: "Has tooltip"}}>')
+      expect(result).toContain('<Link href="/with">With Tooltip</Link>')
+      expect(result).toContain('<Link href="/without">Without Tooltip</Link>')
+      const tooltipCount = (result?.match(/<Tooltip/g) || []).length
+      expect(tooltipCount).toBe(1)
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should return null when Link is not imported from tapestry-react", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+import { Link } from "other-library"
+
+export default function Test() {
+  return <Link href="/save" tooltip={{title: "Save"}}>Save</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when no Link is imported", () => {
+      const input = `
+import React from "react"
+
+export default function Test() {
+  return <div>No links here</div>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when no tooltips are present", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/primary" kind="primary">Save</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should handle aliased Link import", () => {
+      const input = `
+import { Link as TapestryLink } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <TapestryLink href="/save" tooltip={{title: "Save item"}}>Save</TapestryLink>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Link as TapestryLink, Tooltip } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('<Tooltip {...{title: "Save item"}}>')
+      expect(result).toContain('<TapestryLink href="/save">Save</TapestryLink>')
+      expect(result).not.toContain("tooltip=")
+    })
+
+    it("should handle complex JSX expressions", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test({ items }) {
+  return (
+    <div>
+      {items.map(item => (
+        <Link key={item.id} href={item.url} tooltip={\`Save \${item.name}\`} onClick={() => save(item)}>
+          {item.name}
+        </Link>
+      ))}
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        "<Tooltip key={item.id} {...`Save ${item.name}`}>"
+      )
+      expect(result).toContain(
+        "<Link href={item.url} onClick={() => save(item)}>"
+      )
+      expect(result).not.toContain("tooltip=")
+    })
+
+    it("should handle empty tooltip attribute", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/save" tooltip>Save</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Tooltip>")
+      expect(result).toContain('<Link href="/save">Save</Link>')
+      expect(result).toContain("</Tooltip>")
+      expect(result).not.toContain("tooltip")
+    })
+  })
+
+  describe("complex scenarios", () => {
+    it("should handle nested JSX and mixed components", () => {
+      const input = `
+import React from "react"
+import { Link, Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <form>
+      <div className="actions">
+        <Link href="/submit" tooltip={{title: "Submit the form"}} kind="primary">
+          Submit
+        </Link>
+        <Button onClick={cancel}>Cancel</Button>
+        <Link href="/reset" tooltip={{text: "Reset form", placement: "bottom"}}>
+          Reset
+        </Link>
+      </div>
+    </form>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Link, Button, Tooltip } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('<Tooltip {...{title: "Submit the form"}}>')
+      expect(result).toContain('href="/submit" kind="primary"')
+      expect(result).toContain("Submit")
+      expect(result).toContain(
+        '<Tooltip {...{text: "Reset form", placement: "bottom"}}>'
+      )
+      expect(result).toContain('href="/reset"')
+      expect(result).toContain("Reset")
+      expect(result).toContain("<Button onClick={cancel}>Cancel</Button>")
+      expect(result).not.toContain("tooltip=")
+    })
+  })
+
+  it("converts tooltip with string literal to title prop", () => {
+    const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/click" tooltip="Click me">Click</Link>
+}
+    `.trim()
+
+    const result = applyTransform(input)!
+
+    expect(result.replace(/(\s*)?\n(\s*)?/gm, " ")).toContain(
+      '<Tooltip {...{ title: "Click me" }}>'
+    )
+    expect(result).toContain('<Link href="/click">Click</Link>')
+    expect(result).not.toContain("tooltip=")
+  })
+})

package/src/components/link/transforms/tooltipToWrapper.ts

@@ -0,0 +1,35 @@
+import { createWrapper } from "../../shared/actions/createWrapper"
+import { getAttributeValueAsProps } from "../../shared/actions/getAttributeValueAsProps"
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform = attributeTransformFactory({
+  condition: hasAttribute("tooltip"),
+  targetComponent: "Link",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const wrapperProps = getAttributeValueAsProps({
+      element,
+      j,
+      name: "tooltip",
+      stringValueKey: "title",
+    })
+
+    removeAttribute("tooltip", { element, j, source })
+
+    createWrapper({
+      conflictAlias: "TRTooltip",
+      element,
+      j,
+      source,
+      wrapperName: "Tooltip",
+      wrapperPackage: "@planningcenter/tapestry-react",
+      wrapperProps,
+    })
+
+    return true
+  },
+})
+
+export default transform