@planningcenter/tapestry-migration-cli 2.3.0-rc.9 → 2.4.0-rc.0

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

@@ -0,0 +1,191 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import targetBlankToExternal from "./targetBlankToExternal"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  return targetBlankToExternal(
+    { path: "test.tsx", source },
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("targetBlankToExternal transform", () => {
+  describe("basic transformations", () => {
+    it("should transform Link with target='_blank' to external", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/external" target="_blank">External Link</Link>
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/external" external>External Link</Link>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should remove target and rel attributes while adding external", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Link 
+      href="/external" 
+      target="_blank" 
+      rel="noopener noreferrer"
+      className="external-link"
+    >
+      External Link
+    </Link>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("external")
+      expect(result).toContain('className="external-link"')
+      expect(result).not.toContain('target="_blank"')
+      expect(result).not.toContain('rel="noopener noreferrer"')
+    })
+
+    it("should only transform Links with target='_blank'", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/internal" target="_self">Internal Link</Link>
+      <Link href="/external" target="_blank">External Link</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('target="_self"') // Should remain
+      expect(result).toContain("external") // Should be added
+      expect(result).not.toContain('target="_blank"') // Should be removed
+    })
+
+    it("should handle Links without rel attribute", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/external" target="_blank">External Link</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("external")
+      expect(result).not.toContain('target="_blank"')
+    })
+
+    it("should handle Links with only rel attribute (no target)", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/internal" rel="noopener">Internal Link</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull() // No changes should be made, transform returns null
+    })
+  })
+
+  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" target="_blank">Page 1</Link>
+      <Link href="/page2" target="_blank" rel="noopener">Page 2</Link>
+      <Link href="/page3">Page 3</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("external") // Should appear twice
+      expect(result).not.toContain('target="_blank"')
+      expect(result).not.toContain('rel="noopener"')
+      expect(result).toContain('href="/page3"') // Should remain unchanged
+    })
+
+    it("should handle dynamic target values", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/external" target={isExternal ? "_blank" : "_self"}>Link</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull() // No changes should be made for dynamic values
+    })
+
+    it("should handle self-closing Link components", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/external" target="_blank" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("external")
+      expect(result).not.toContain('target="_blank"')
+    })
+  })
+
+  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" target="_blank">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" target="_blank">External Link</TapestryLink>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("external")
+      expect(result).not.toContain('target="_blank"')
+    })
+  })
+})

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

@@ -0,0 +1,30 @@
+import { addAttribute } from "../../shared/actions/addAttribute"
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { hasAttributeValue } from "../../shared/conditions/hasAttributeValue"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform = attributeTransformFactory({
+  condition: hasAttributeValue("target", "_blank"),
+  targetComponent: "Link",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    // Remove target attribute
+    removeAttribute("target", { element, j, source })
+
+    // Remove rel attribute if it exists
+    removeAttribute("rel", { element, j, source })
+
+    // Add external attribute as shorthand boolean
+    addAttribute({
+      booleanAsShorthand: true,
+      element,
+      j,
+      name: "external",
+      value: true, // This will create just "external" not "external={true}"
+    })
+
+    return true
+  },
+})
+
+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/addAttribute.test.ts

@@ -266,6 +266,94 @@ describe("addAttribute", () => {
     })
   })
 
+  describe("boolean shorthand values", () => {
+    it("should add boolean true attribute as shorthand", () => {
+      const element = createElementFromCode("<Button>Save</Button>")
+
+      addAttribute({
+        booleanAsShorthand: true,
+        element,
+        j,
+        name: "external",
+        value: true,
+      })
+
+      const externalAttr = getAttributeFromElement(element, "external")
+      expect(externalAttr).not.toBeNull()
+      expect(externalAttr?.value).toBeNull() // Shorthand boolean has no value
+    })
+
+    it("should not add boolean false attribute as shorthand", () => {
+      const element = createElementFromCode("<Button>Save</Button>")
+      const initialAttrCount = (element.openingElement.attributes || []).length
+
+      addAttribute({
+        booleanAsShorthand: true,
+        element,
+        j,
+        name: "external",
+        value: false,
+      })
+
+      const finalAttrCount = (element.openingElement.attributes || []).length
+      expect(finalAttrCount).toBe(initialAttrCount)
+
+      const externalAttr = getAttributeFromElement(element, "external")
+      expect(externalAttr).toBeNull()
+    })
+
+    it("should render shorthand boolean correctly in source", () => {
+      const source = j("<Button>Save</Button>")
+      const element = source.find(j.JSXElement).at(0).get().value as JSXElement
+
+      addAttribute({
+        booleanAsShorthand: true,
+        element,
+        j,
+        name: "external",
+        value: true,
+      })
+
+      const result = source.toSource()
+      expect(result).toContain("external") // Should be just "external", not "external={true}"
+      expect(result).not.toContain("external={true}")
+    })
+
+    it("should handle multiple shorthand boolean attributes", () => {
+      const element = createElementFromCode("<Button>Save</Button>")
+
+      addAttribute({
+        booleanAsShorthand: true,
+        element,
+        j,
+        name: "external",
+        value: true,
+      })
+      addAttribute({
+        booleanAsShorthand: true,
+        element,
+        j,
+        name: "loading",
+        value: false,
+      })
+      addAttribute({
+        booleanAsShorthand: true,
+        element,
+        j,
+        name: "disabled",
+        value: true,
+      })
+
+      const externalAttr = getAttributeFromElement(element, "external")
+      const loadingAttr = getAttributeFromElement(element, "loading")
+      const disabledAttr = getAttributeFromElement(element, "disabled")
+
+      expect(externalAttr).not.toBeNull()
+      expect(loadingAttr).toBeNull() // false values should not be added
+      expect(disabledAttr).not.toBeNull()
+    })
+  })
+
   describe("integration with JSCodeshift", () => {
     it("should render correctly in transformed source", () => {
       const source = j("<Button>Save</Button>")
@@ -296,5 +384,25 @@ describe("addAttribute", () => {
       expect((testIdAttr?.value as StringLiteral)?.value).toBe("save-button")
       expect((ariaAttr?.value as StringLiteral)?.value).toBe("help-text")
     })
+
+    it("should render shorthand boolean attributes correctly in source", () => {
+      const source = j("<Button>Save</Button>")
+      const element = source.find(j.JSXElement).at(0).get().value as JSXElement
+
+      addAttribute({
+        booleanAsShorthand: true,
+        element,
+        j,
+        name: "external",
+        value: true,
+      })
+      addAttribute({ element, j, name: "disabled", value: true }) // Regular boolean
+
+      const result = source.toSource()
+
+      expect(result).toContain("external") // Shorthand boolean
+      expect(result).toContain("disabled={true}") // Regular boolean
+      expect(result).not.toContain("external={true}")
+    })
   })
 })

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

@@ -21,7 +21,9 @@ export function addAttribute({
   name,
   j,
   value,
+  booleanAsShorthand = false,
 }: {
+  booleanAsShorthand?: boolean
   element: JSXElement
   j: JSCodeshift
   name: string
@@ -40,6 +42,18 @@ export function addAttribute({
     return
   }
 
+  // Handle boolean shorthand
+  // booleanAsShorthand is a temporary flag to allow for boolean attributes to be added as shorthand
+  // This will be removed in a follow-up PR for button[disabled]
+  if (typeof value === "boolean" && booleanAsShorthand) {
+    if (value === true) {
+      // Add as shorthand boolean attribute (just "external")
+      attributes.push(j.jsxAttribute(j.jsxIdentifier(name), null))
+    }
+    // For false, don't add the attribute at all
+    return
+  }
+
   const formattedValue = formatValue(value, j)
   attributes.push(j.jsxAttribute(j.jsxIdentifier(name), formattedValue))
 }

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

@@ -7,6 +7,7 @@ import { getPrintableAttributeValue } from "./getPrintableAttributeValue"
 type RemoveAttributeConfig = {
   /** Function to build comment text given the prop name and formatted value */
   buildComment?: (propName: string, formattedValue: string) => string | void
+  commentScope?: string
   element: JSXElement
   j: JSCodeshift
   source: Collection
@@ -14,7 +15,7 @@ type RemoveAttributeConfig = {
 
 export function removeAttribute(
   name: string,
-  { element, buildComment, j, source }: RemoveAttributeConfig
+  { element, buildComment, j, source, commentScope }: RemoveAttributeConfig
 ): boolean {
   const attributes = element.openingElement.attributes || []
   const attribute = findAttribute(attributes, name)
@@ -28,7 +29,13 @@ export function removeAttribute(
     const commentText = buildComment(name, printableValue || "")
 
     if (commentText) {
-      addComment({ element, j, scope: name, source, text: commentText })
+      addComment({
+        element,
+        j,
+        scope: commentScope || name,
+        source,
+        text: commentText,
+      })
     }
   }