@planningcenter/tapestry-migration-cli 2.4.0-rc.16 → 2.4.0-rc.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "2.4.0-rc.16",
+  "version": "2.4.0-rc.18",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -51,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0e96826315b0c9ea498251b38bfaee707774599a"
+  "gitHead": "922acdf4288f78cac0cc72aecfe179e40810cc01"
 }

package/src/components/button/index.ts

@@ -9,7 +9,6 @@ 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"
 import removeDuplicateKeys from "./transforms/removeDuplicateKeys"
@@ -48,7 +47,6 @@ const transform: Transform = async (fileInfo, api, options) => {
   }
 
   const transforms = [
-    linkToButton,
     tooltipToWrapper,
     iconRightToSuffix,
     iconLeftToPrefix,

package/src/components/link/index.ts

@@ -1,5 +1,6 @@
 import { Transform } from "jscodeshift"
 
+import auditSpreadProps from "./transforms/auditSpreadProps"
 import childrenToLabel from "./transforms/childrenToLabel"
 import convertStyleProps from "./transforms/convertStyleProps"
 import inlineMemberToKind from "./transforms/inlineMemberToKind"
@@ -26,6 +27,7 @@ const transform: Transform = (fileInfo, api, options) => {
     innerRefToRef,
     removeAs,
     childrenToLabel,
+    auditSpreadProps,
     reviewStyles,
     convertStyleProps,
     unsupportedProps,

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

@@ -0,0 +1,351 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./auditSpreadProps"
+
+const j = jscodeshift.withParser("tsx")
+
+const AUDIT_COMMENT =
+  "TODO: tapestry-migration (spreadAttribute): Spread props can contain unsupported props, please explore usages and migrate as needed."
+
+function applyTransform(source: string) {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("auditSpreadProps transform", () => {
+  describe("basic transformations", () => {
+    it("should add comment to Link with single spread prop", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { href: "/test" }
+  return <Link {...props}>Go</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+    })
+
+    it("should add comment to Link with multiple spread props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const baseProps = { href: "/test" }
+  const styleProps = { className: "link" }
+  return <Link {...baseProps} {...styleProps}>Go</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...baseProps}")
+      expect(result).toContain("{...styleProps}")
+    })
+
+    it("should handle Link with spread props and regular attributes", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { href: "/test" }
+  return <Link label="Go" {...props} external />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain('label="Go"')
+      expect(result).toContain("{...props}")
+      expect(result).toContain("external")
+    })
+
+    it("should handle multiple Link components with spread props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props1 = { href: "/test1" }
+  const props2 = { href: "/test2" }
+  return (
+    <div>
+      <Link {...props1}>Go 1</Link>
+      <Link {...props2}>Go 2</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props1}")
+      expect(result).toContain("{...props2}")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not transform Link without spread props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/test">Go</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should not transform if Link is not imported from @planningcenter/tapestry-react", () => {
+      const input = `
+import { Link } from "other-library"
+
+export default function Test() {
+  const props = { href: "/test" }
+  return <Link {...props}>Go</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should handle Link with alias import", () => {
+      const input = `
+import { Link as TapestryLink } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { href: "/test" }
+  return <TapestryLink {...props}>Go</TapestryLink>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+    })
+
+    it("should handle mixed Link components (with and without spread props)", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { href: "/test" }
+  return (
+    <div>
+      <Link {...props}>Go</Link>
+      <Link href="/static">Static</Link>
+      <Link href="/dynamic" external>External</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+      expect(result).toContain('<Link href="/static">Static</Link>')
+      expect(result).toContain('href="/dynamic"')
+      expect(result).toContain("external")
+    })
+  })
+
+  describe("complex spread prop scenarios", () => {
+    it("should handle Link with complex spread expression", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const baseProps = { className: "link" }
+  const additionalProps = isExternal ? { external: true } : {}
+  return <Link {...baseProps} {...additionalProps} href="/test">Go</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...baseProps}")
+      expect(result).toContain("{...additionalProps}")
+    })
+
+    it("should handle Link with spread props in different positions", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { className: "link" }
+  return (
+    <Link
+      label="Go"
+      {...props}
+      href="/test"
+      external={false}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain('label="Go"')
+      expect(result).toContain("{...props}")
+      expect(result).toContain('href="/test"')
+      expect(result).toContain("external={false}")
+    })
+
+    it("should handle spread props with object expressions", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link {...{ href: "/test", className: "link" }}>Go</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain('{...{ href: "/test", className: "link" }}')
+    })
+
+    it("should handle spread props with function calls", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link {...getLinkProps()} {...getStyleProps()}>Go</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...getLinkProps()}")
+      expect(result).toContain("{...getStyleProps()}")
+    })
+  })
+
+  describe("self-closing Link components", () => {
+    it("should handle self-closing Link with spread props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { label: "Go", href: "/test" }
+  return <Link {...props} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+    })
+
+    it("should handle self-closing Link with multiple spread props and attributes", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const baseProps = { href: "/test" }
+  const styleProps = { className: "link" }
+  return <Link label="Go" {...baseProps} {...styleProps} external />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain('label="Go"')
+      expect(result).toContain("{...baseProps}")
+      expect(result).toContain("{...styleProps}")
+      expect(result).toContain("external")
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("should return null when no Link components have spread props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/test">Go</Link>
+      <Link label="Static" href="/static" />
+      <Link href="/dynamic" external>External</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when no Link imports exist", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onClick: handleClick }
+  return <Button {...props}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null for empty file", () => {
+      const result = applyTransform("")
+      expect(result).toBe(null)
+    })
+
+    it("should return null when file has no JSX", () => {
+      const input = `
+export function handleClick() {
+  console.log("clicked")
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+  })
+
+  describe("different import scenarios", () => {
+    it("should handle default import with spread props", () => {
+      const input = `
+import Link from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { href: "/test" }
+  return <Link {...props}>Go</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should handle namespace import", () => {
+      const input = `
+import * as Tapestry from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { href: "/test" }
+  return <Tapestry.Link {...props}>Go</Tapestry.Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+  })
+})

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

@@ -0,0 +1,24 @@
+import { Transform } from "jscodeshift"
+
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { getSpreadProps } from "../../shared/actions/getSpreadProps"
+import { hasSpreadProps } from "../../shared/actions/hasSpreadProps"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const COMMENT =
+  "Spread props can contain unsupported props, please explore usages and migrate as needed."
+
+const transform: Transform = attributeTransformFactory({
+  condition: hasSpreadProps,
+  targetComponent: "Link",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const spreadProps = getSpreadProps(element)
+    spreadProps.forEach((prop) =>
+      addCommentToAttribute({ attribute: prop, j, text: COMMENT })
+    )
+    return spreadProps.length > 0
+  },
+})
+
+export default transform

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

@@ -1,426 +0,0 @@
-import jscodeshift from "jscodeshift"
-import { describe, expect, it } from "vitest"
-
-import transform from "./linkToButton"
-
-const j = jscodeshift.withParser("tsx")
-
-// Helper to run transform and get result
-function runTransform(input: string): string | null {
-  const fileInfo = { path: "test.tsx", source: input }
-  const api = {
-    j,
-    jscodeshift: j,
-    report: () => {},
-    stats: () => {},
-  }
-  const result = transform(fileInfo, api, {})
-  return result as string | null
-}
-
-describe("linkToButton transform", () => {
-  describe("basic transformation", () => {
-    it("should transform Link with onClick to Button", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return <Link onClick={handleClick}>Click me</Link>
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain(
-        "<Button onClick={handleClick}>Click me</Button>"
-      )
-      expect(result).toContain(
-        'import { Button } from "@planningcenter/tapestry-react"'
-      )
-      expect(result).not.toContain("Link")
-    })
-
-    it("should preserve Link without onClick", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return <Link href="/test">Go to test</Link>
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toBeNull()
-    })
-
-    it("should handle mixed Link usage", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return (
-            <div>
-              <Link onClick={handleClick}>Click me</Link>
-              <Link href="/home">Home</Link>
-              <Link onClick={handleOther}>Other action</Link>
-            </div>
-          )
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain(
-        "<Button onClick={handleClick}>Click me</Button>"
-      )
-      expect(result).toContain('<Link href="/home">Home</Link>')
-      expect(result).toContain(
-        "<Button onClick={handleOther}>Other action</Button>"
-      )
-      expect(result).toContain(
-        'import { Link, Button } from "@planningcenter/tapestry-react"'
-      )
-    })
-  })
-
-  describe("import management", () => {
-    it("should remove Link import when no longer used", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return <Link onClick={handleClick}>Button</Link>
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain(
-        'import { Button } from "@planningcenter/tapestry-react"'
-      )
-      expect(result).not.toContain("Link")
-    })
-
-    it("should keep Link import when still used", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return (
-            <div>
-              <Link onClick={handleClick}>Button</Link>
-              <Link href="/test">Link</Link>
-            </div>
-          )
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain(
-        'import { Link, Button } from "@planningcenter/tapestry-react"'
-      )
-    })
-
-    it("should add Button to existing imports", () => {
-      const input = `
-        import { Link, Input } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return (
-            <div>
-              <Input />
-              <Link onClick={handleClick}>Button</Link>
-            </div>
-          )
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain(
-        'import { Input, Button } from "@planningcenter/tapestry-react"'
-      )
-      expect(result).not.toContain("Link")
-    })
-
-    it("should handle existing Button import", () => {
-      const input = `
-        import { Link, Button } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return (
-            <div>
-              <Button type="submit">Submit</Button>
-              <Link onClick={handleClick}>Clickable</Link>
-            </div>
-          )
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain('<Button type="submit">Submit</Button>')
-      expect(result).toContain(
-        "<Button onClick={handleClick}>Clickable</Button>"
-      )
-      expect(result).toContain(
-        'import { Button } from "@planningcenter/tapestry-react"'
-      )
-      expect(result).not.toContain("Link")
-    })
-  })
-
-  describe("component attributes", () => {
-    it("should preserve all attributes", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return (
-            <Link
-              onClick={handleClick}
-              className="link-button"
-              disabled
-              data-testid="clickable-link"
-              role="button"
-            >
-              Click me
-            </Link>
-          )
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain("onClick={handleClick}")
-      expect(result).toContain('className="link-button"')
-      expect(result).toContain("disabled")
-      expect(result).toContain('data-testid="clickable-link"')
-      expect(result).toContain('role="button"')
-      expect(result).toContain("<Button")
-      expect(result).toContain("</Button>")
-    })
-
-    it("should handle self-closing tags", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return <Link onClick={handleClick} />
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain("<Button onClick={handleClick} />")
-      expect(result).not.toContain("Link")
-    })
-
-    it("should handle complex onClick expressions", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return <Link onClick={() => handleAction(id, 'delete')}>Delete</Link>
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain("onClick={() => handleAction(id, 'delete')}")
-      expect(result).toContain("<Button")
-      expect(result).toContain("Delete</Button>")
-    })
-  })
-
-  describe("edge cases", () => {
-    it("should return null when no Link imported from tapestry-react", () => {
-      const input = `
-        import { Link } from "react-router-dom"
-
-        function Component() {
-          return <Link onClick={handleClick}>Button</Link>
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toBeNull()
-    })
-
-    it("should return null when no Link with onClick found", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return <Link href="/test">Go to test</Link>
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toBeNull()
-    })
-
-    it("should handle aliased Link import", () => {
-      const input = `
-        import { Link as TapestryLink } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return <TapestryLink onClick={handleClick}>Button</TapestryLink>
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain("<Button onClick={handleClick}>Button</Button>")
-      expect(result).toContain(
-        'import { Button } from "@planningcenter/tapestry-react"'
-      )
-      expect(result).not.toContain("TapestryLink")
-      expect(result).not.toContain("Link")
-    })
-
-    it("should handle nested JSX structures", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return (
-            <div className="container">
-              <Link onClick={handleDelete}>
-                <span className="icon">🗑️</span>
-                <span>Delete</span>
-              </Link>
-            </div>
-          )
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain("<Button onClick={handleDelete}>")
-      expect(result).toContain('<span className="icon">🗑️</span>')
-      expect(result).toContain("<span>Delete</span>")
-      expect(result).toContain("</Button>")
-      expect(result).not.toContain("Link")
-    })
-
-    it("should handle multiple onClick links in same component", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Actions() {
-          return (
-            <div>
-              <Link onClick={handleSave}>Save</Link>
-              <Link onClick={handleCancel}>Cancel</Link>
-              <Link onClick={handleDelete}>Delete</Link>
-            </div>
-          )
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain("<Button onClick={handleSave}>Save</Button>")
-      expect(result).toContain("<Button onClick={handleCancel}>Cancel</Button>")
-      expect(result).toContain("<Button onClick={handleDelete}>Delete</Button>")
-      expect(result).toContain(
-        'import { Button } from "@planningcenter/tapestry-react"'
-      )
-      expect(result).not.toContain("Link")
-    })
-
-    it("should handle Link with both href and onClick (should transform)", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return <Link href="/test" onClick={handleClick}>Link with both</Link>
-        }
-      `
-
-      const result = runTransform(input)
-
-      // Should transform because it has onClick (href is ignored for this transform)
-      expect(result).toContain(
-        '<Button href="/test" onClick={handleClick}>Link with both</Button>'
-      )
-      expect(result).toContain(
-        'import { Button } from "@planningcenter/tapestry-react"'
-      )
-      expect(result).not.toContain("import { Link }")
-      expect(result).not.toContain("<Link")
-    })
-
-    it("should not transform Link without onClick even if it has other handlers", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return <Link href="/test" onMouseOver={handleHover}>Hover me</Link>
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toBeNull()
-    })
-  })
-
-  describe("conflict resolution", () => {
-    it("should use TRButton alias when Button conflicts with existing import", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-        import { Button } from "other-ui-lib"
-
-        function Component() {
-          return (
-            <div>
-              <Link onClick={handleClick}>Tapestry Button</Link>
-              <Button variant="primary">Other Button</Button>
-            </div>
-          )
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain(
-        "<TRButton onClick={handleClick}>Tapestry Button</TRButton>"
-      )
-      expect(result).toContain(
-        '<Button variant="primary">Other Button</Button>'
-      )
-      expect(result).toContain('import { Button } from "other-ui-lib"')
-      expect(result).toContain(
-        'import { Button as TRButton } from "@planningcenter/tapestry-react"'
-      )
-      expect(result).not.toContain("import { Link }")
-    })
-  })
-
-  describe("detecting renamed import of Link", () => {
-    it("should handle renamed Link import", () => {
-      const input = `
-        import { Link as TapestryLink } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return <TapestryLink onClick={handleClick}>Button</TapestryLink>
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain("<Button onClick={handleClick}>Button</Button>")
-      expect(result).toContain(
-        'import { Button } from "@planningcenter/tapestry-react"'
-      )
-      expect(result).not.toContain("TapestryLink")
-      expect(result).not.toContain("Link")
-    })
-  })
-})

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

@@ -1,15 +0,0 @@
-import { Transform } from "jscodeshift"
-
-import { hasAttribute } from "../../shared/conditions/hasAttribute"
-import { componentTransformFactory } from "../../shared/transformFactories/componentTransformFactory"
-
-const transform: Transform = componentTransformFactory({
-  condition: hasAttribute("onClick"),
-  conflictAlias: "TRButton",
-  fromComponent: "Link",
-  fromPackage: "@planningcenter/tapestry-react",
-  toComponent: "Button",
-  toPackage: "@planningcenter/tapestry-react",
-})
-
-export default transform