@planningcenter/tapestry-migration-cli 2.4.0-rc.2 → 2.4.0-rc.21

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/removeAs.test.ts

@@ -0,0 +1,192 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import removeAs from "./removeAs"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  return removeAs(
+    { path: "test.tsx", source },
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("removeAs transform", () => {
+  describe("basic transformations", () => {
+    it("should remove as='a' attribute from Link", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/home" as="a">Home</Link>
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/home">Home</Link>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should only remove as='a' attribute, not other as values", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/home" as="a">Home</Link>
+      <Link href="/button" as="button">Button</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('href="/home"') // Should remain
+      expect(result).not.toContain('as="a"') // Should be removed
+      expect(result).toContain('as="button"') // Should remain
+    })
+
+    it("should preserve other attributes while removing as='a'", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Link 
+      href="/external" 
+      as="a" 
+      className="nav-link"
+      target="_blank"
+      rel="noopener"
+    >
+      External Link
+    </Link>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('href="/external"')
+      expect(result).toContain('className="nav-link"')
+      expect(result).toContain('target="_blank"')
+      expect(result).toContain('rel="noopener"')
+      expect(result).not.toContain('as="a"')
+    })
+
+    it("should handle Links without as attribute", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/internal">Internal Link</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull() // No changes should be made
+    })
+
+    it("should handle Links with as attribute but different value", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/button" as="button">Button Link</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull() // No changes should be made
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle multiple Link components", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/page1" as="a">Page 1</Link>
+      <Link href="/page2" as="a">Page 2</Link>
+      <Link href="/page3">Page 3</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain('as="a"') // Should be removed from both
+      expect(result).toContain('href="/page1"')
+      expect(result).toContain('href="/page2"')
+      expect(result).toContain('href="/page3"') // Should remain unchanged
+    })
+
+    it("should handle self-closing Link components", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/external" as="a" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('href="/external"')
+      expect(result).not.toContain('as="a"')
+    })
+
+    it("should handle dynamic as values", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/external" as={isExternal ? "a" : "button"}>Link</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull() // No changes should be made for dynamic values
+    })
+  })
+
+  describe("import handling", () => {
+    it("should only transform when Link is imported from correct package", () => {
+      const input = `
+import { Link } from "react-router-dom"
+
+export default function Test() {
+  return <Link to="/external" as="a">External Link</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull() // No changes should be made
+    })
+
+    it("should handle aliased imports", () => {
+      const input = `
+import { Link as TapestryLink } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <TapestryLink href="/external" as="a">External Link</TapestryLink>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('href="/external"')
+      expect(result).not.toContain('as="a"')
+    })
+  })
+})

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

@@ -0,0 +1,17 @@
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { hasAttributeValue } from "../../shared/conditions/hasAttributeValue"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform = attributeTransformFactory({
+  condition: hasAttributeValue("as", "a"),
+  targetComponent: "Link",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    // Remove as attribute
+    removeAttribute("as", { element, j, source })
+
+    return true
+  },
+})
+
+export default transform

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

@@ -1,7 +1,7 @@
 import jscodeshift from "jscodeshift"
 import { describe, expect, it } from "vitest"
 
-import transform from "./inlineToKind"
+import transform from "./removeInlineMember"
 
 const j = jscodeshift.withParser("tsx")
 
@@ -14,9 +14,9 @@ function applyTransform(source: string): string | null {
   ) as string | null
 }
 
-describe("inlineToKind 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