@planningcenter/tapestry-migration-cli 2.3.0-rc.10 → 2.3.0-rc.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "2.3.0-rc.10",
+  "version": "2.3.0-rc.12",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -51,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1678bc122b829577e18df6b6daf3c8f86f1a443f"
+  "gitHead": "6da3662a1766ecb928eaa3ba24c347ab1a37e6e7"
 }

package/src/components/link/index.ts

@@ -0,0 +1,27 @@
+import { Transform } from "jscodeshift"
+
+import inlineToKind from "./transforms/inlineToKind"
+import toToHref from "./transforms/toToHref"
+
+const transform: Transform = (fileInfo, api, options) => {
+  let currentSource = fileInfo.source
+  let hasAnyChanges = false
+
+  const transforms: Transform[] = [inlineToKind, toToHref]
+
+  for (const individualTransform of transforms) {
+    const result = individualTransform(
+      { ...fileInfo, source: currentSource },
+      api,
+      options
+    )
+    if (result && result !== currentSource) {
+      currentSource = result as string
+      hasAnyChanges = true
+    }
+  }
+
+  return hasAnyChanges ? currentSource : null
+}
+
+export default transform

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

@@ -0,0 +1,308 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./inlineToKind"
+
+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("inlineToKind transform", () => {
+  describe("basic transformations", () => {
+    it("should transform Link.Inline to Link with kind='inline-text'", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link.Inline href="/profile">Profile</Link.Inline>
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/profile" kind="inline-text">Profile</Link>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should preserve all existing props when transforming Link.Inline", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Link.Inline 
+      href="/dashboard" 
+      className="nav-link" 
+      target="_blank"
+      rel="noopener"
+      data-testid="profile-link"
+    >
+      Dashboard
+    </Link.Inline>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('kind="inline-text"')
+      expect(result).toContain('href="/dashboard"')
+      expect(result).toContain('className="nav-link"')
+      expect(result).toContain('target="_blank"')
+      expect(result).toContain('rel="noopener"')
+      expect(result).toContain('data-testid="profile-link"')
+      expect(result).toContain('kind="inline-text"')
+      expect(result).toContain("<Link")
+      expect(result).not.toContain("Link.Inline")
+    })
+
+    it("should handle self-closing Link.Inline tags", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link.Inline href="/dashboard" />
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/dashboard" kind="inline-text" />;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should handle multiple Link.Inline components", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link.Inline href="/home">Home</Link.Inline>
+      <Link.Inline href="/about">About</Link.Inline>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        '<Link href="/home" kind="inline-text">Home</Link>'
+      )
+      expect(result).toContain(
+        '<Link href="/about" kind="inline-text">About</Link>'
+      )
+      expect(result).not.toContain("Link.Inline")
+    })
+  })
+
+  describe("mixed scenarios", () => {
+    it("should only transform Link.Inline and leave regular Link unchanged", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <nav>
+      <Link href="/home">Home</Link>
+      <Link.Inline href="/profile">Profile</Link.Inline>
+      <Link as="button" href="/dashboard">Dashboard</Link>
+    </nav>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Link href="/home">Home</Link>')
+      expect(result).toContain(
+        '<Link href="/profile" kind="inline-text">Profile</Link>'
+      )
+      expect(result).toContain(
+        '<Link as="button" href="/dashboard">Dashboard</Link>'
+      )
+      expect(result).not.toContain("Link.Inline")
+    })
+
+    it("should handle aliased Link import", () => {
+      const input = `
+import { Link as TapestryLink } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <TapestryLink.Inline href="/profile">Profile</TapestryLink.Inline>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        '<TapestryLink href="/profile" kind="inline-text">Profile</TapestryLink>'
+      )
+      expect(result).not.toContain("TapestryLink.Inline")
+    })
+
+    it("should handle complex JSX expressions", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test({ items, showInline }) {
+  return (
+    <div>
+      {items.map(item => (
+        <Link.Inline key={item.id} href={item.url}>{item.name}</Link.Inline>
+      ))}
+      {showInline && <Link.Inline href="/conditional">Conditional</Link.Inline>}
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        '<Link key={item.id} href={item.url} kind="inline-text">{item.name}</Link>'
+      )
+      expect(result).toContain(
+        '<Link href="/conditional" kind="inline-text">Conditional</Link>'
+      )
+      expect(result).not.toContain("Link.Inline")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not transform if Link is not imported from tapestry-react", () => {
+      const input = `
+import { Link } from "react-router-dom"
+
+export default function Test() {
+  return <Link.Inline to="/profile">Profile</Link.Inline>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null) // No changes needed
+    })
+
+    it("should handle Link.Inline with dynamic props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test({ url, isExternal }) {
+  return (
+    <Link.Inline 
+      href={url} 
+      target={isExternal ? "_blank" : "_self"}
+      className={\`link-\${isExternal ? 'external' : 'internal'}\`}
+    >
+      Dynamic Link
+    </Link.Inline>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('kind="inline-text"')
+      expect(result).toContain("<Link")
+      expect(result).toContain("href={url}")
+      expect(result).toContain('target={isExternal ? "_blank" : "_self"}')
+      expect(result).toContain(
+        "className={`link-${isExternal ? 'external' : 'internal'}`}"
+      )
+      expect(result).not.toContain("Link.Inline")
+    })
+
+    it("should handle nested Link.Inline components", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <p>
+        Visit our <Link.Inline href="/about">about page</Link.Inline> for more info.
+      </p>
+      <span>
+        Or check the <Link.Inline href="/help">help section</Link.Inline>.
+      </span>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        '<Link href="/about" kind="inline-text">about page</Link>'
+      )
+      expect(result).toContain(
+        '<Link href="/help" kind="inline-text">help section</Link>'
+      )
+      expect(result).not.toContain("Link.Inline")
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("should return null when no Link.Inline components exist", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/home">Home</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when no tapestry-react imports exist", () => {
+      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 for empty file", () => {
+      const result = applyTransform("")
+      expect(result).toBe(null)
+    })
+
+    it("should return null when Link is imported but no Link.Inline used", () => {
+      const input = `
+import { Link, Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/home">Home</Link>
+      <Button>Click me</Button>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+  })
+})

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

@@ -0,0 +1,51 @@
+import { Transform } from "jscodeshift"
+
+import { addAttribute } from "../../shared/actions/addAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { componentTransformFactory } from "../../shared/transformFactories/componentTransformFactory"
+
+// Step 1: Add kind="inline-text" attribute to Link.Inline elements
+const addKindAttribute = attributeTransformFactory({
+  condition: () => true, // Add to all Link.Inline elements
+  targetComponent: "Link.Inline",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    addAttribute({
+      element,
+      j,
+      name: "kind",
+      value: "inline-text",
+    })
+    return true
+  },
+})
+
+// Step 2: Transform Link.Inline to Link (preserving original component name)
+const transformComponent = componentTransformFactory({
+  condition: () => true, // Transform all Link.Inline elements
+  fromComponent: "Link.Inline",
+  fromPackage: "@planningcenter/tapestry-react",
+  toComponent: "Link",
+  toPackage: "@planningcenter/tapestry-react",
+})
+
+// Combined transform that runs both steps
+const transform: Transform = (fileInfo, api, options) => {
+  // Step 1: Add kind attribute to Link.Inline elements
+  const result1 = addKindAttribute(fileInfo, api, options)
+
+  if (!result1) {
+    return null
+  }
+
+  // Step 2: Transform Link.Inline to Link
+  const result2 = transformComponent(
+    { ...fileInfo, source: result1 as string },
+    api,
+    options
+  )
+
+  return result2 || result1
+}
+
+export default transform

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

@@ -0,0 +1,245 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./toToHref"
+
+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("toToHref transform", () => {
+  describe("basic transformations", () => {
+    it("should transform Link 'to' prop to 'href' prop", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link to="/dashboard">Dashboard</Link>
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/dashboard">Dashboard</Link>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should handle multiple Link components with 'to' props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link to="/home">Home</Link>
+      <Link to="/about">About</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('href="/home"')
+      expect(result).toContain('href="/about"')
+      expect(result).not.toContain('to="/home"')
+      expect(result).not.toContain('to="/about"')
+    })
+
+    it("should preserve other props while transforming 'to' to 'href'", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Link 
+      to="/dashboard" 
+      className="nav-link" 
+      target="_blank"
+      rel="noopener"
+    >
+      Dashboard
+    </Link>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('href="/dashboard"')
+      expect(result).toContain('className="nav-link"')
+      expect(result).toContain('target="_blank"')
+      expect(result).toContain('rel="noopener"')
+      expect(result).not.toContain('to="/dashboard"')
+    })
+
+    it("should handle dynamic 'to' prop values", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test({ userId }) {
+  return <Link to={\`/user/\${userId}\`}>User Profile</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("href={`/user/${userId}`}")
+      expect(result).not.toContain("to={`/user/${userId}`}")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not transform Links without 'to' prop", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/already-href">Already has href</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null) // No changes needed
+    })
+
+    it("should not transform if Link is not imported from tapestry-react", () => {
+      const input = `
+import { Link } from "react-router-dom"
+
+export default function Test() {
+  return <Link to="/dashboard">Dashboard</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null) // No changes needed
+    })
+
+    it("should handle aliased Link import", () => {
+      const input = `
+import { Link as TapestryLink } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <TapestryLink to="/dashboard">Dashboard</TapestryLink>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('href="/dashboard"')
+      expect(result).not.toContain('to="/dashboard"')
+    })
+
+    it("should handle self-closing Link tags", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link to="/dashboard" />
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/dashboard" />;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+  })
+
+  describe("mixed scenarios", () => {
+    it("should handle mixed Link elements with various props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <nav>
+      <Link to="/home" className="home-link">Home</Link>
+      <Link to="/profile" target="_blank">Profile</Link>
+      <Link href="/already-href">Already Good</Link>
+    </nav>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('href="/home"')
+      expect(result).toContain('href="/profile"')
+      expect(result).toContain('href="/already-href"')
+      expect(result).not.toContain('to="/home"')
+      expect(result).not.toContain('to="/profile"')
+    })
+
+    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} to={item.url}>{item.name}</Link>
+      ))}
+      {showConditional && <Link to="/conditional">Conditional</Link>}
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("href={item.url}")
+      expect(result).toContain('href="/conditional"')
+      expect(result).not.toContain("to={item.url}")
+      expect(result).not.toContain('to="/conditional"')
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("should return null when no tapestry-react Links exist", () => {
+      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 Links have 'to' prop", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/already-good">Already Good</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null for empty file", () => {
+      const result = applyTransform("")
+      expect(result).toBe(null)
+    })
+  })
+})

package/src/components/link/transforms/toToHref.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("to"),
+  targetComponent: "Link",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element) => {
+    return transformAttributeName("to", "href", { element })
+  },
+})
+
+export default transform

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

@@ -1,7 +1,8 @@
-import { JSXElement } from "jscodeshift"
+import { JSXElement, jsxIdentifier } from "jscodeshift"
 
 /**
  * Transforms JSX element names (both opening and closing tags)
+ * Supports both JSXIdentifier and JSXMemberExpression
  */
 export function transformElementName({
   element,
@@ -10,15 +11,28 @@ export function transformElementName({
   element: JSXElement
   name: string
 }): boolean {
-  if (element?.openingElement?.name?.type === "JSXIdentifier") {
-    element.openingElement.name.name = name
+  const openingName = element?.openingElement?.name
+  if (!openingName) return false
 
-    if (element.closingElement) {
-      if (element.closingElement.name.type === "JSXIdentifier") {
-        element.closingElement.name.name = name
-      }
+  // Transform opening element
+  if (openingName.type === "JSXIdentifier") {
+    openingName.name = name
+  } else if (openingName.type === "JSXMemberExpression") {
+    // Transform JSXMemberExpression (e.g., Link.Inline) to JSXIdentifier (e.g., Link)
+    element.openingElement.name = jsxIdentifier(name)
+  } else {
+    return false
+  }
+
+  // Transform closing element if it exists
+  if (element.closingElement) {
+    const closingName = element.closingElement.name
+    if (closingName.type === "JSXIdentifier") {
+      closingName.name = name
+    } else if (closingName.type === "JSXMemberExpression") {
+      element.closingElement.name = jsxIdentifier(name)
     }
-    return true
   }
-  return false
+
+  return true
 }

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

@@ -85,4 +85,87 @@ describe("attributeTransformFactory", () => {
     const result = transform(fileInfo, api, {})
     expect(result).toBe(null)
   })
+
+  describe("member expression support", () => {
+    it("should transform attributes on Link.Inline elements", () => {
+      const transform = attributeTransformFactory({
+        condition: () => true,
+        targetComponent: "Link.Inline",
+        targetPackage: "@planningcenter/tapestry-react",
+        transform: (element, { j }) => {
+          const attributes = element.openingElement.attributes || []
+          const kindAttr = j.jsxAttribute(
+            j.jsxIdentifier("kind"),
+            j.stringLiteral("inline-text")
+          )
+          attributes.push(kindAttr)
+          return true
+        },
+      })
+      const fileInfo = {
+        path: "test.tsx",
+        source: `import { Link } from "@planningcenter/tapestry-react";<Link.Inline>Test</Link.Inline>`,
+      }
+      const api = { j, jscodeshift: j, report: () => {}, stats: () => {} }
+
+      const result = transform(fileInfo, api, {})
+      expect(result).toContain('kind="inline-text"')
+      expect(result).toContain("<Link.Inline")
+    })
+
+    it("should not transform other member expressions", () => {
+      const transform = attributeTransformFactory({
+        condition: () => true,
+        targetComponent: "Link.Inline",
+        targetPackage: "@planningcenter/tapestry-react",
+        transform: (element, { j }) => {
+          const attributes = element.openingElement.attributes || []
+          const kindAttr = j.jsxAttribute(
+            j.jsxIdentifier("kind"),
+            j.stringLiteral("inline-text")
+          )
+          attributes.push(kindAttr)
+          return true
+        },
+      })
+      const fileInfo = {
+        path: "test.tsx",
+        source: `import { Link } from "@planningcenter/tapestry-react";<div><Link.Inline>Inline</Link.Inline><Link.Primary>Primary</Link.Primary></div>`,
+      }
+      const api = { j, jscodeshift: j, report: () => {}, stats: () => {} }
+
+      const result = transform(fileInfo, api, {})
+      expect(result).toContain(
+        '<Link.Inline kind="inline-text">Inline</Link.Inline>'
+      )
+      expect(result).toContain("<Link.Primary>Primary</Link.Primary>")
+      expect(result).not.toContain('<Link.Primary kind="inline-text">')
+    })
+
+    it("should handle aliased imports with member expressions", () => {
+      const transform = attributeTransformFactory({
+        condition: () => true,
+        targetComponent: "Link.Inline",
+        targetPackage: "@planningcenter/tapestry-react",
+        transform: (element, { j }) => {
+          const attributes = element.openingElement.attributes || []
+          const kindAttr = j.jsxAttribute(
+            j.jsxIdentifier("kind"),
+            j.stringLiteral("inline-text")
+          )
+          attributes.push(kindAttr)
+          return true
+        },
+      })
+      const fileInfo = {
+        path: "test.tsx",
+        source: `import { Link as TapestryLink } from "@planningcenter/tapestry-react";<TapestryLink.Inline>Test</TapestryLink.Inline>`,
+      }
+      const api = { j, jscodeshift: j, report: () => {}, stats: () => {} }
+
+      const result = transform(fileInfo, api, {})
+      expect(result).toContain('kind="inline-text"')
+      expect(result).toContain("<TapestryLink.Inline")
+    })
+  })
 })

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

@@ -7,6 +7,7 @@ import {
 } from "jscodeshift"
 
 import { TransformCondition } from "../types"
+import { findJSXElements } from "./helpers/findJSXElements"
 import { getImportName } from "./helpers/manageImports"
 
 /**
@@ -15,7 +16,7 @@ import { getImportName } from "./helpers/manageImports"
 export function attributeTransformFactory(config: {
   /** Condition that must be met for the transform to occur */
   condition?: TransformCondition
-  /** Component to target for attribute transformation */
+  /** Component to target for attribute transformation (supports member expressions like "Link.Inline") */
   targetComponent: string
   /** Package the target component is imported from */
   targetPackage: string
@@ -30,32 +31,38 @@ export function attributeTransformFactory(config: {
     const source = j(fileInfo.source)
     let hasChanges = false
 
+    // Parse the targetComponent to handle member expressions
+    const [targetComponentName] = config.targetComponent.split(".")
+
     // Get the local name of the target component
-    const targetComponentName = getImportName(
-      config.targetComponent,
+    const targetComponentLocalName = getImportName(
+      targetComponentName,
       config.targetPackage,
       { j, source }
     )
 
     // Only proceed if target component is imported
-    if (!targetComponentName) {
+    if (!targetComponentLocalName) {
       return null
     }
 
     const { condition = () => true, transform } = config
 
     // Find and transform matching JSX elements
-    source
-      .find(j.JSXOpeningElement, { name: { name: targetComponentName } })
-      .forEach((path) => {
-        const element = path.parent.value
-
-        if (condition(element)) {
-          if (transform(element, { j, options, source })) {
-            hasChanges = true
-          }
+    findJSXElements(
+      source,
+      j,
+      config.targetComponent,
+      targetComponentLocalName
+    ).forEach((path) => {
+      const element = path.parent.value
+
+      if (condition(element)) {
+        if (transform(element, { j, options, source })) {
+          hasChanges = true
         }
-      })
+      }
+    })
 
     return hasChanges ? source.toSource() : null
   }

package/src/components/shared/transformFactories/componentTransformFactory.test.ts

@@ -1,7 +1,90 @@
+import jscodeshift from "jscodeshift"
 import { describe, expect, it } from "vitest"
 
+import { componentTransformFactory } from "./componentTransformFactory"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  return componentTransformFactory({
+    condition: () => true,
+    fromComponent: "Link.Inline",
+    fromPackage: "@planningcenter/tapestry-react",
+    toComponent: "Link",
+    toPackage: "@planningcenter/tapestry-react",
+  })(fileInfo, { j, jscodeshift: j, report: () => {}, stats: () => {} }, {}) as
+    | string
+    | null
+}
+
 describe("componentTransformFactory", () => {
-  it("is a placeholder test", () => {
-    expect(true).toBe(true)
+  it("should transform Link.Inline to Link", () => {
+    const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link.Inline>Test</Link.Inline>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("<Link>Test</Link>")
+    expect(result).not.toContain("<Link.Inline>")
+  })
+
+  it("should handle multiple Link.Inline elements", () => {
+    const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link.Inline>First</Link.Inline>
+      <Link.Inline>Second</Link.Inline>
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("<Link>First</Link>")
+    expect(result).toContain("<Link>Second</Link>")
+    expect(result).not.toContain("<Link.Inline>")
+  })
+
+  it("should not transform other member expressions", () => {
+    const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link.Inline>Inline</Link.Inline>
+      <Link.Primary>Primary</Link.Primary>
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("<Link>Inline</Link>")
+    expect(result).toContain("<Link.Primary>Primary</Link.Primary>")
+    expect(result).not.toContain("<Link.Inline>")
+  })
+
+  it("should preserve original component name when removing member expressions", () => {
+    const input = `
+import { Link as TapestryLink } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <TapestryLink.Inline>Test</TapestryLink.Inline>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("<TapestryLink>Test</TapestryLink>")
+    expect(result).not.toContain("<TapestryLink.Inline>")
+    expect(result).not.toContain("<Link>")
   })
 })

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

@@ -2,6 +2,7 @@ import { Transform } from "jscodeshift"
 
 import { transformElementName } from "../actions/transformElementName"
 import { TransformCondition } from "../types"
+import { findJSXElements } from "./helpers/findJSXElements"
 import {
   getImportName,
   hasConflictingImport,
@@ -17,7 +18,7 @@ export function componentTransformFactory(config: {
   condition: TransformCondition
   /** Optional alias to use if target component conflicts with existing imports */
   conflictAlias?: string
-  /** The source component name to transform from */
+  /** The source component name to transform from (supports member expressions like "Link.Inline") */
   fromComponent: string
   /** The package to import the source component from */
   fromPackage: string
@@ -31,44 +32,62 @@ export function componentTransformFactory(config: {
     const source = j(fileInfo.source)
     let hasChanges = false
 
+    // Parse the fromComponent to handle member expressions
+    const [fromComponentName, fromComponentExpression] =
+      config.fromComponent.split(".")
+
     // Get the local name of the source component
-    const sourceComponentName = getImportName(
-      config.fromComponent,
+    const sourceComponentLocalName = getImportName(
+      fromComponentName,
       config.fromPackage,
       { j, source }
     )
 
     // Only proceed if source component is imported
-    if (!sourceComponentName) {
+    if (!sourceComponentLocalName) {
       return null
     }
 
-    const hasConflict = hasConflictingImport(
-      config.toComponent,
-      [config.fromPackage, config.toPackage],
-      { j, source }
-    )
+    // Determine the target component name
+    // If we're removing a member expression (same base name), preserve the original component name
+    const isRemovingMemberExpression =
+      fromComponentExpression && fromComponentName === config.toComponent
 
-    const targetComponentName = hasConflict
-      ? config.conflictAlias || `T${config.toComponent}`
-      : config.toComponent
+    let targetComponentName: string
+    if (isRemovingMemberExpression) {
+      // Preserve the original component name (e.g., TapestryLink.Inline → TapestryLink)
+      targetComponentName = sourceComponentLocalName
+    } else {
+      // Use the specified toComponent (e.g., Button → TapestryButton)
+      const hasConflict = hasConflictingImport(
+        config.toComponent,
+        [config.fromPackage, config.toPackage],
+        { j, source }
+      )
+      targetComponentName = hasConflict
+        ? config.conflictAlias || `T${config.toComponent}`
+        : config.toComponent
+    }
 
     // Transform matching JSX elements
-    source
-      .find(j.JSXOpeningElement, { name: { name: sourceComponentName } })
-      .forEach((path) => {
-        const element = path.parent.value
+    findJSXElements(
+      source,
+      j,
+      config.fromComponent,
+      sourceComponentLocalName
+    ).forEach((path) => {
+      const element = path.parent.value
 
-        if (config.condition(element)) {
-          if (transformElementName({ element, name: targetComponentName })) {
-            hasChanges = true
-          }
+      if (config.condition(element)) {
+        if (transformElementName({ element, name: targetComponentName })) {
+          hasChanges = true
         }
-      })
+      }
+    })
 
     if (hasChanges) {
       // Handle import management
-      manageImports(source, config, sourceComponentName, targetComponentName, j)
+      manageImports(source, config, fromComponentName, targetComponentName, j)
     }
 
     return hasChanges ? source.toSource() : null

package/src/components/shared/transformFactories/helpers/findJSXElements.ts

@@ -0,0 +1,37 @@
+import { Collection, JSCodeshift, JSXElement } from "jscodeshift"
+
+/**
+ * Helper function to find JSX elements, supporting both regular components and member expressions
+ */
+export function findJSXElements(
+  source: Collection,
+  j: JSCodeshift,
+  componentName: string,
+  localComponentName: string
+) {
+  // Parse the component name to handle member expressions
+  const [, memberExpression] = componentName.split(".")
+
+  if (memberExpression) {
+    // Find member expressions (e.g., Link.Inline)
+    return source
+      .find(j.JSXOpeningElement, {
+        name: {
+          object: { name: localComponentName },
+          type: "JSXMemberExpression",
+        },
+      })
+      .filter((path) => {
+        const element = path.parent.value as JSXElement
+        return (
+          element.openingElement.name.type === "JSXMemberExpression" &&
+          element.openingElement.name.property.name === memberExpression
+        )
+      })
+  } else {
+    // Find regular components (e.g., Link)
+    return source.find(j.JSXOpeningElement, {
+      name: { name: localComponentName },
+    })
+  }
+}

package/src/components/shared/types.ts

@@ -1,6 +1,24 @@
-import { JSXElement } from "jscodeshift"
+import {
+  ASTPath,
+  Collection,
+  JSCodeshift,
+  JSXElement,
+  JSXOpeningElement,
+} from "jscodeshift"
 
 /**
  * Condition function that determines whether a JSX element should be transformed
  */
 export type TransformCondition = (element: JSXElement) => boolean
+
+/**
+ * Transform function for JSX elements
+ */
+export type TransformFunction = (
+  element: JSXElement,
+  resources: {
+    j: JSCodeshift
+    path: ASTPath<JSXOpeningElement>
+    source: Collection
+  }
+) => boolean

package/src/index.ts

@@ -10,7 +10,7 @@ program
   .name("tapestry-migration-cli")
   .description("CLI tool for Tapestry migrations")
 
-const COMPONENTS = ["button"]
+const COMPONENTS = ["button", "link"]
 
 program
   .command("run")