@planningcenter/tapestry-migration-cli 2.4.0-rc.4 → 2.4.0-rc.6

package/package.json

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

package/src/components/link/index.ts

@@ -1,7 +1,8 @@
 import { Transform } from "jscodeshift"
 
 import convertStyleProps from "./transforms/convertStyleProps"
-import inlineToKind from "./transforms/inlineToKind"
+import inlineMemberToKind from "./transforms/inlineMemberToKind"
+import inlinePropToKind from "./transforms/inlinePropToKind"
 import removeAs from "./transforms/removeAs"
 import reviewStyles from "./transforms/reviewStyles"
 import targetBlankToExternal from "./transforms/targetBlankToExternal"
@@ -12,7 +13,8 @@ const transform: Transform = (fileInfo, api, options) => {
   let hasAnyChanges = false
 
   const transforms: Transform[] = [
-    inlineToKind,
+    inlineMemberToKind,
+    inlinePropToKind,
     toToHref,
     targetBlankToExternal,
     removeAs,

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

@@ -1,7 +1,7 @@
 import jscodeshift from "jscodeshift"
 import { describe, expect, it } from "vitest"
 
-import transform from "./inlineToKind"
+import transform from "./inlineMemberToKind"
 
 const j = jscodeshift.withParser("tsx")
 
@@ -14,7 +14,7 @@ function applyTransform(source: string): string | null {
   ) as string | null
 }
 
-describe("inlineToKind transform", () => {
+describe("inlineMemberToKind transform", () => {
   describe("basic transformations", () => {
     it("should transform Link.Inline to Link with kind='inline-text'", () => {
       const input = `

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

@@ -4,7 +4,6 @@ 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",
@@ -20,7 +19,6 @@ const addKindAttribute = attributeTransformFactory({
   },
 })
 
-// Step 2: Transform Link.Inline to Link (preserving original component name)
 const transformComponent = componentTransformFactory({
   condition: () => true, // Transform all Link.Inline elements
   fromComponent: "Link.Inline",

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

@@ -0,0 +1,312 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./inlinePropToKind"
+
+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("inlinePropToKind transform", () => {
+  describe("basic transformations", () => {
+    it("should transform Link with inline prop to kind='inline-text'", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/profile" inline>Profile</Link>
+}
+      `.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"')
+    })
+
+    it("should transform Link with inline={true} to kind='inline-text'", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/profile" inline={true}>Profile</Link>
+}
+      `.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"')
+    })
+
+    it("should preserve all other props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Link 
+      href="/dashboard" 
+      className="nav-link" 
+      inline
+      data-testid="profile-link"
+    >
+      Dashboard
+    </Link>
+  )
+}
+      `.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"')
+      expect(result).not.toContain("inline>")
+      expect(result).not.toContain("inline />")
+      expect(result).not.toContain("inline=")
+    })
+
+    it("should handle self-closing Link with inline prop", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/dashboard" inline />
+}
+      `.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 />")
+      expect(result).not.toContain("inline=")
+    })
+
+    it("should handle multiple Link components with inline prop", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/home" inline>Home</Link>
+      <Link href="/about" inline>About</Link>
+    </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("inline>")
+      expect(result).not.toContain("inline />")
+      expect(result).not.toContain("inline=")
+    })
+  })
+
+  describe("mixed scenarios", () => {
+    it("should only transform Link with inline prop 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 href="/profile" inline>Profile</Link>
+      <Link href="/dashboard" kind="primary">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 href="/dashboard" kind="primary">Dashboard</Link>'
+      )
+      expect(result).not.toContain("inline>")
+      expect(result).not.toContain("inline />")
+      expect(result).not.toContain("inline=")
+    })
+
+    it("should handle aliased Link import", () => {
+      const input = `
+import { Link as TapestryLink } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <TapestryLink href="/profile" inline>Profile</TapestryLink>
+}
+      `.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("TapestryLink")
+    })
+  })
+
+  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 to="/profile" inline>Profile</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null) // No changes
+    })
+
+    it("should handle Link with spread props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test({ linkProps }) {
+  return <Link {...linkProps} inline>Profile</Link>
+}
+      `.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 />")
+      expect(result).not.toContain("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 key={item.id} href={item.url} inline>{item.name}</Link>
+      ))}
+      {showInline && <Link href="/conditional" inline>Conditional</Link>}
+    </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("inline>")
+      expect(result).not.toContain("inline />")
+      expect(result).not.toContain("inline=")
+    })
+
+    it("should handle nested Link components", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <p>
+        Visit our <Link href="/about" inline>about page</Link> for more info.
+      </p>
+      <span>
+        Or check the <Link href="/help" inline>help section</Link>.
+      </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("inline>")
+      expect(result).not.toContain("inline />")
+      expect(result).not.toContain("inline=")
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("should return null when no Link with inline prop exists", () => {
+      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 inline prop 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/inlinePropToKind.ts

@@ -0,0 +1,24 @@
+import { addAttribute } from "../../shared/actions/addAttribute"
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform = attributeTransformFactory({
+  condition: hasAttribute("inline"),
+  targetComponent: "Link",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    removeAttribute("inline", { element, j, source })
+
+    addAttribute({
+      element,
+      j,
+      name: "kind",
+      value: "inline-text",
+    })
+
+    return true
+  },
+})
+
+export default transform

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

@@ -132,6 +132,20 @@ export default function Test() {
       expect(result).toContain('href="/page3"') // Should remain unchanged
     })
 
+    it("should handle target={'_blank'} format", () => {
+      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 dynamic target values", () => {
       const input = `
 import { Link } from "@planningcenter/tapestry-react"

package/src/components/shared/conditions/hasAttributeValue.test.ts

@@ -32,7 +32,28 @@ describe("hasAttributeValue", () => {
     expect(condition(element)).toBe(false)
   })
 
-  it("should return false for expression values", () => {
+  it("should return true for expression with string literal", () => {
+    const condition = hasAttributeValue("target", "_blank")
+    const element = createJSXElement(" target={'_blank'}")
+
+    expect(condition(element)).toBe(true)
+  })
+
+  it("should return true for expression with double quotes", () => {
+    const condition = hasAttributeValue("target", "_blank")
+    const element = createJSXElement(' target={"_blank"}')
+
+    expect(condition(element)).toBe(true)
+  })
+
+  it("should return false for expression with different value", () => {
+    const condition = hasAttributeValue("target", "_blank")
+    const element = createJSXElement(" target={'_self'}")
+
+    expect(condition(element)).toBe(false)
+  })
+
+  it("should return false for complex expression values", () => {
     const condition = hasAttributeValue("onClick", "handleClick")
     const element = createJSXElement(" onClick={handleClick}")
 

package/src/components/shared/conditions/hasAttributeValue.ts

@@ -4,6 +4,7 @@ import { TransformCondition } from "../types"
 
 /**
  * Helper function to create a condition that checks for an attribute with a specific value
+ * Handles both string literals and expressions with string literals
  */
 export function hasAttributeValue(
   attributeName: string,
@@ -11,13 +12,30 @@ export function hasAttributeValue(
 ): TransformCondition {
   return (element: JSXElement) => {
     const attributes = element.openingElement.attributes || []
-    return attributes.some(
-      (attr) =>
+    return attributes.some((attr) => {
+      const hasAttribute =
         attr.type === "JSXAttribute" &&
         attr.name?.type === "JSXIdentifier" &&
-        attr.name.name === attributeName &&
-        attr.value?.type === "StringLiteral" &&
-        attr.value.value === value
-    )
+        attr.name.name === attributeName
+
+      if (!hasAttribute) {
+        return false
+      }
+
+      // Handle string literal: attribute="value"
+      if (attr.value?.type === "StringLiteral") {
+        return attr.value.value === value
+      }
+
+      // Handle expression: attribute={"value"} or attribute={'value'}
+      if (attr.value?.type === "JSXExpressionContainer") {
+        const { expression } = attr.value
+        if (expression.type === "StringLiteral") {
+          return expression.value === value
+        }
+      }
+
+      return false
+    })
   }
 }