@planningcenter/tapestry-migration-cli 2.4.0-rc.8 → 2.4.0

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

@@ -0,0 +1,295 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./moveLinkImport"
+
+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("moveLinkImport transform", () => {
+  describe("basic transformations", () => {
+    it("should move Link import from tapestry-react to tapestry", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/test">Test</Link>
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry";
+
+export default function Test() {
+  return <Link href="/test">Test</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should handle multiple Link components", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/home">Home</Link>
+      <Link href="/about">About</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry";
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/home">Home</Link>
+      <Link href="/about">About</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should preserve other imports from tapestry-react", () => {
+      const input = `
+import { Link, Button, Input } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/test">Test</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button, Input } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { Link } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('<Link href="/test">Test</Link>')
+      expect(result).not.toContain(
+        'Link, Button } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+
+  describe("import conflict handling", () => {
+    it("should use alias when Link already imported from tapestry", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry"
+import { Link as ReactLink } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <ReactLink href="/test">Test</ReactLink>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Link } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('<Link href="/test">Test</Link>')
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+      expect(result).not.toContain("ReactLink")
+    })
+
+    it("should handle existing tapestry import with other components", () => {
+      const input = `
+import { Button, Input } from "@planningcenter/tapestry"
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/test">Test</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button, Input, Link } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('<Link href="/test">Test</Link>')
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not transform if Link is not imported from tapestry-react", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button>Test</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should handle Link with aliased import", () => {
+      const input = `
+import { Link as ReactLink } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <ReactLink href="/test">Test</ReactLink>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Link } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('<Link href="/test">Test</Link>')
+      expect(result).not.toContain("ReactLink")
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+    })
+
+    it("should handle self-closing Link components", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/test" />
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry";
+
+export default function Test() {
+  return <Link href="/test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should handle Link with props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/test" kind="primary" onClick={handleClick}>Test</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Link } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('kind="primary"')
+      expect(result).toContain("onClick={handleClick}")
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("should return null when no Link import exists", () => {
+      const input = `
+import React from "react"
+
+export default function Test() {
+  return <div>Hello</div>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when Link already imported from tapestry", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry"
+
+export default function Test() {
+  return <Link href="/test">Test</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null for empty file", () => {
+      const result = applyTransform("")
+      expect(result).toBe(null)
+    })
+  })
+
+  describe("complex scenarios", () => {
+    it("should handle mixed imports and multiple components", () => {
+      const input = `
+import React from "react"
+import { Link, Button } from "@planningcenter/tapestry-react"
+import { Input } from "@planningcenter/tapestry"
+
+export default function Test() {
+  return (
+    <form>
+      <Input name="email" />
+      <Button type="submit">Submit</Button>
+      <Link href="/cancel">Cancel</Link>
+    </form>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { Input, Link } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('<Button type="submit">Submit</Button>')
+      expect(result).toContain('<Link href="/cancel">Cancel</Link>')
+      expect(result).not.toContain(
+        'Link, Button } from "@planningcenter/tapestry-react"'
+      )
+    })
+
+    it("should handle Link usage in JSX expressions", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test({ showLink }) {
+  return (
+    <div>
+      {showLink && <Link href="/conditional">Conditional</Link>}
+      {items.map(item => <Link key={item.id} href={item.url}>{item.name}</Link>)}
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Link } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('<Link href="/conditional">Conditional</Link>')
+      expect(result).toContain(
+        "<Link key={item.id} href={item.url}>{item.name}</Link>"
+      )
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+    })
+  })
+})

package/src/components/{button/transforms/linkToButton.ts → link/transforms/moveLinkImport.ts}

@@ -1,15 +1,14 @@
 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",
+  condition: () => true,
+  conflictAlias: "TLink",
   fromComponent: "Link",
   fromPackage: "@planningcenter/tapestry-react",
-  toComponent: "Button",
-  toPackage: "@planningcenter/tapestry-react",
+  toComponent: "Link",
+  toPackage: "@planningcenter/tapestry",
 })
 
 export default transform

package/src/components/link/transforms/{inlineMemberToKind.test.ts → removeInlineMember.test.ts}

@@ -1,7 +1,7 @@
 import jscodeshift from "jscodeshift"
 import { describe, expect, it } from "vitest"
 
-import transform from "./inlineMemberToKind"
+import transform from "./removeInlineMember"
 
 const j = jscodeshift.withParser("tsx")
 
@@ -14,9 +14,9 @@ function applyTransform(source: string): string | null {
   ) as string | null
 }
 
-describe("inlineMemberToKind transform", () => {
+describe("removeInlineMember transform", () => {
   describe("basic transformations", () => {
-    it("should transform Link.Inline to Link with kind='inline-text'", () => {
+    it("should transform Link.Inline to Link", () => {
       const input = `
 import { Link } from "@planningcenter/tapestry-react"
 
@@ -29,7 +29,7 @@ export default function Test() {
 import { Link } from "@planningcenter/tapestry-react"
 
 export default function Test() {
-  return <Link href="/profile" kind="inline-text">Profile</Link>;
+  return <Link href="/profile">Profile</Link>;
 }
       `.trim()
 
@@ -57,13 +57,11 @@ export default function Test() {
       `.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")
     })
@@ -81,7 +79,7 @@ export default function Test() {
 import { Link } from "@planningcenter/tapestry-react"
 
 export default function Test() {
-  return <Link href="/dashboard" kind="inline-text" />;
+  return <Link href="/dashboard" />;
 }
       `.trim()
 
@@ -104,12 +102,8 @@ export default function Test() {
       `.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).toContain('<Link href="/home">Home</Link>')
+      expect(result).toContain('<Link href="/about">About</Link>')
       expect(result).not.toContain("Link.Inline")
     })
   })
@@ -132,9 +126,7 @@ export default function Test() {
 
       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 href="/profile">Profile</Link>')
       expect(result).toContain(
         '<Link as="button" href="/dashboard">Dashboard</Link>'
       )
@@ -152,7 +144,7 @@ export default function Test() {
 
       const result = applyTransform(input)
       expect(result).toContain(
-        '<TapestryLink href="/profile" kind="inline-text">Profile</TapestryLink>'
+        '<TapestryLink href="/profile">Profile</TapestryLink>'
       )
       expect(result).not.toContain("TapestryLink.Inline")
     })
@@ -175,11 +167,9 @@ export default function Test({ items, showInline }) {
 
       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>'
+        "<Link key={item.id} href={item.url}>{item.name}</Link>"
       )
+      expect(result).toContain('<Link href="/conditional">Conditional</Link>')
       expect(result).not.toContain("Link.Inline")
     })
   })
@@ -216,7 +206,6 @@ export default function Test({ url, isExternal }) {
       `.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"}')
@@ -245,12 +234,8 @@ export default function Test() {
       `.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).toContain('<Link href="/about">about page</Link>')
+      expect(result).toContain('<Link href="/help">help section</Link>')
       expect(result).not.toContain("Link.Inline")
     })
   })

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

@@ -0,0 +1,11 @@
+import { componentTransformFactory } from "../../shared/transformFactories/componentTransformFactory"
+
+const transform = componentTransformFactory({
+  condition: () => true, // Transform all Link.Inline elements
+  fromComponent: "Link.Inline",
+  fromPackage: "@planningcenter/tapestry-react",
+  toComponent: "Link",
+  toPackage: "@planningcenter/tapestry-react",
+})
+
+export default transform

package/src/components/link/transforms/{inlinePropToKind.test.ts → removeInlineProp.test.ts}

@@ -1,7 +1,7 @@
 import jscodeshift from "jscodeshift"
 import { describe, expect, it } from "vitest"
 
-import transform from "./inlinePropToKind"
+import transform from "./removeInlineProp"
 
 const j = jscodeshift.withParser("tsx")
 
@@ -14,9 +14,9 @@ function applyTransform(source: string): string | null {
   ) as string | null
 }
 
-describe("inlinePropToKind transform", () => {
+describe("removeInlineProp transform", () => {
   describe("basic transformations", () => {
-    it("should transform Link with inline prop to kind='inline-text'", () => {
+    it("should remove inline prop from Link", () => {
       const input = `
 import { Link } from "@planningcenter/tapestry-react"
 
@@ -26,14 +26,14 @@ export default function Test() {
       `.trim()
 
       const result = applyTransform(input)
-      expect(result).toContain('kind="inline-text"')
       expect(result).not.toContain("inline>")
       expect(result).not.toContain("inline />")
       expect(result).not.toContain("inline=")
       expect(result).toContain('href="/profile"')
+      expect(result).toContain('<Link href="/profile">Profile</Link>')
     })
 
-    it("should transform Link with inline={true} to kind='inline-text'", () => {
+    it("should remove inline={true} from Link", () => {
       const input = `
 import { Link } from "@planningcenter/tapestry-react"
 
@@ -43,7 +43,6 @@ export default function Test() {
       `.trim()
 
       const result = applyTransform(input)
-      expect(result).toContain('kind="inline-text"')
       expect(result).not.toContain("inline>")
       expect(result).not.toContain("inline />")
       expect(result).not.toContain("inline=")
@@ -69,7 +68,6 @@ export default function Test() {
       `.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('data-testid="profile-link"')
@@ -88,7 +86,6 @@ export default function Test() {
       `.trim()
 
       const result = applyTransform(input)
-      expect(result).toContain('kind="inline-text"')
       expect(result).toContain('href="/dashboard"')
       expect(result).not.toContain("inline>")
       expect(result).not.toContain("inline />")
@@ -110,12 +107,8 @@ export default function Test() {
       `.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).toContain('<Link href="/home">Home</Link>')
+      expect(result).toContain('<Link href="/about">About</Link>')
       expect(result).not.toContain("inline>")
       expect(result).not.toContain("inline />")
       expect(result).not.toContain("inline=")
@@ -140,9 +133,7 @@ export default function Test() {
 
       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 href="/profile">Profile</Link>')
       expect(result).toContain(
         '<Link href="/dashboard" kind="primary">Dashboard</Link>'
       )
@@ -161,7 +152,6 @@ export default function Test() {
       `.trim()
 
       const result = applyTransform(input)
-      expect(result).toContain('kind="inline-text"')
       expect(result).not.toContain("inline>")
       expect(result).not.toContain("inline />")
       expect(result).not.toContain("inline=")
@@ -193,7 +183,6 @@ export default function Test({ linkProps }) {
       `.trim()
 
       const result = applyTransform(input)
-      expect(result).toContain('kind="inline-text"')
       expect(result).toContain("{...linkProps}")
       expect(result).not.toContain("inline>")
       expect(result).not.toContain("inline />")
@@ -218,11 +207,9 @@ export default function Test({ items, showInline }) {
 
       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>'
+        "<Link key={item.id} href={item.url}>{item.name}</Link>"
       )
+      expect(result).toContain('<Link href="/conditional">Conditional</Link>')
       expect(result).not.toContain("inline>")
       expect(result).not.toContain("inline />")
       expect(result).not.toContain("inline=")
@@ -247,12 +234,8 @@ export default function Test() {
       `.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).toContain('<Link href="/about">about page</Link>')
+      expect(result).toContain('<Link href="/help">help section</Link>')
       expect(result).not.toContain("inline>")
       expect(result).not.toContain("inline />")
       expect(result).not.toContain("inline=")

package/src/components/link/transforms/{inlinePropToKind.ts → removeInlineProp.ts}

@@ -1,4 +1,3 @@
-import { addAttribute } from "../../shared/actions/addAttribute"
 import { removeAttribute } from "../../shared/actions/removeAttribute"
 import { hasAttribute } from "../../shared/conditions/hasAttribute"
 import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
@@ -9,14 +8,6 @@ const transform = attributeTransformFactory({
   targetPackage: "@planningcenter/tapestry-react",
   transform: (element, { j, source }) => {
     removeAttribute("inline", { element, j, source })
-
-    addAttribute({
-      element,
-      j,
-      name: "kind",
-      value: "inline-text",
-    })
-
     return true
   },
 })