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

package/package.json

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

package/src/components/button/transforms/childrenToLabel.test.ts

@@ -105,10 +105,10 @@ function Test() {
         "{/* TODO: tapestry-migration (children): complex children cannot be converted to label prop"
       )
       expect(result).toContain(
-        "take time to find the right text for the button"
+        "take time to find the right text for the component"
       )
       expect(result).toContain(
-        "prefix and suffix to correctly display those icons"
+        "If icons are used in the component, you can use prefix and suffix to correctly display those icons"
       )
       expect(result).toContain('<Icon name="save" />')
       expect(result).toContain("Save")
@@ -177,8 +177,9 @@ function Test() {
         "{/* TODO: tapestry-migration (label): Button has both label prop and children"
       )
       expect(result).toContain(
-        "take time to find the right text for the button"
+        "take time to find the right text for the component."
       )
+      expect(result).not.toContain("If icons are used")
       expect(result).toContain('label="Existing Label"')
       expect(result).toContain("Child Content")
     })
@@ -356,7 +357,7 @@ function Test() {
       expect(result).toMatch(/\{\s*\/\*\s*TODO: tapestry-migration/)
       expect(result).toMatch(/\*\/\s*\}/)
       expect(result).toContain(
-        "take time to find the right text for the button"
+        "take time to find the right text for the component"
       )
     })
   })

package/src/components/button/transforms/childrenToLabel.ts

@@ -1,48 +1,17 @@
-import { JSXElement } from "jscodeshift"
+import { Transform } from "jscodeshift"
 
 import { addAttribute } from "../../shared/actions/addAttribute"
 import { addComment } from "../../shared/actions/addComment"
 import { removeChildren } from "../../shared/actions/removeChildren"
 import { hasAttribute } from "../../shared/conditions/hasAttribute"
 import { hasChildren } from "../../shared/conditions/hasChildren"
+import {
+  buildComment,
+  extractTextContent,
+} from "../../shared/helpers/childrenToLabelHelpers"
 import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
 
-function extractTextContent(children: NonNullable<JSXElement["children"]>): {
-  isSimpleText: boolean
-  textContent: string
-} {
-  let textContent = ""
-
-  for (const child of children) {
-    if (child.type === "JSXText") {
-      const text = child.value.trim()
-      if (text) textContent += text
-    } else if (
-      child.type === "JSXExpressionContainer" &&
-      child.expression.type === "StringLiteral"
-    ) {
-      textContent += child.expression.value
-    } else if (
-      child.type === "JSXExpressionContainer" &&
-      child.expression.type === "TemplateLiteral" &&
-      child.expression.expressions.length === 0
-    ) {
-      // Simple template literal with no expressions like `hello`
-      textContent += child.expression.quasis[0].value.raw
-    } else {
-      // Complex content (JSX elements, expressions, etc.)
-      return { isSimpleText: false, textContent: "" }
-    }
-  }
-
-  return { isSimpleText: true, textContent }
-}
-
-function buildComment(message: string): string {
-  return `${message} - take time to find the right text for the button. If icons are used in the Button, you can use prefix and suffix to correctly display those icons.`
-}
-
-const transform = attributeTransformFactory({
+const transform: Transform = attributeTransformFactory({
   condition: hasChildren,
   targetComponent: "Button",
   targetPackage: "@planningcenter/tapestry-react",
@@ -53,7 +22,7 @@ const transform = attributeTransformFactory({
         j,
         scope: "label",
         source,
-        text: buildComment("Button has both label prop and children"),
+        text: buildComment("Button has both label prop and children", false),
       })
       return true
     }
@@ -71,7 +40,8 @@ const transform = attributeTransformFactory({
         scope: "children",
         source,
         text: buildComment(
-          "complex children cannot be converted to label prop"
+          "complex children cannot be converted to label prop",
+          true
         ),
       })
       return true

package/src/components/link/index.ts

@@ -1,5 +1,6 @@
 import { Transform } from "jscodeshift"
 
+import childrenToLabel from "./transforms/childrenToLabel"
 import convertStyleProps from "./transforms/convertStyleProps"
 import inlineMemberToKind from "./transforms/inlineMemberToKind"
 import inlinePropToKind from "./transforms/inlinePropToKind"
@@ -18,6 +19,7 @@ const transform: Transform = (fileInfo, api, options) => {
     toToHref,
     targetBlankToExternal,
     removeAs,
+    childrenToLabel,
     reviewStyles,
     convertStyleProps,
   ]

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

@@ -0,0 +1,331 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./childrenToLabel"
+
+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("childrenToLabel transform for Link", () => {
+  describe("simple text conversion", () => {
+    it("should convert simple text children to label prop", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Link href="/home">Home</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Link href="/home" label="Home" />')
+      expect(result).not.toContain("Home</Link>")
+    })
+
+    it("should handle text with whitespace", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Link href="/about">  About Us  </Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Link href="/about" label="About Us" />')
+    })
+
+    it("should convert string literal expressions", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Link href="/contact">{"Contact"}</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Link href="/contact" label="Contact" />')
+    })
+
+    it("should convert simple template literals without expressions", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Link href="/profile">{\`Profile\`}</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Link href="/profile" label="Profile" />')
+    })
+
+    it("should combine multiple text nodes", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Link href="/help">Get {"Help"} Now</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Link href="/help" label="GetHelpNow" />')
+    })
+  })
+
+  describe("complex children scenarios", () => {
+    it("should add comment for complex JSX children", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+import { Icon } from "./Icon"
+
+function Test() {
+  return (
+    <div>
+      <Link href="/save">
+        <Icon name="save" />
+        Save
+      </Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        "{/* TODO: tapestry-migration (children): complex children cannot be converted to label prop"
+      )
+      expect(result).toContain(
+        "take time to find the right text for the component"
+      )
+      expect(result).toContain(
+        "If icons are used in the component, you can use prefix and suffix to correctly display those icons"
+      )
+      expect(result).toContain('<Icon name="save" />')
+      expect(result).toContain("Save")
+      expect(result).toContain("</Link>")
+    })
+
+    it("should add comment for expression children", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+function Test({ linkText }) {
+  return <Link href="/home">{linkText}</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        "TODO: tapestry-migration (children): complex children cannot be converted to label prop"
+      )
+    })
+
+    it("should add comment for template literals with expressions", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+function Test({ name }) {
+  return <Link href="/user">{\`View \${name}\`}</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        "TODO: tapestry-migration (children): complex children cannot be converted to label prop"
+      )
+    })
+  })
+
+  describe("existing label prop scenarios", () => {
+    it("should add comment when Link has both label and children", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Link href="/home" label="Existing Label">
+        Child Content
+      </Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        "{/* TODO: tapestry-migration (label): Link has both label prop and children"
+      )
+      expect(result).toContain(
+        "take time to find the right text for the component."
+      )
+      expect(result).not.toContain("If icons are used")
+      expect(result).toContain('label="Existing Label"')
+      expect(result).toContain("Child Content")
+    })
+
+    it("should handle Link with label and simple text children", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Link href="/about" label="About">About Us</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        "TODO: tapestry-migration (label): Link has both label prop and children"
+      )
+      expect(result).not.toContain("If icons are used")
+      expect(result).toContain('label="About"')
+      expect(result).toContain("About Us")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should skip Links with no children", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Link href="/home" label="Home" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("should skip Links with only whitespace children", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Link href="/home">   </Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("should handle mixed whitespace and text", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Link href="/home">
+    Home
+  </Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Link href="/home" label="Home" />')
+    })
+
+    it("should not transform Link from other packages", () => {
+      const input = `
+import { Link } from "some-other-package"
+
+function Test() {
+  return <Link href="/home">Home</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("should handle aliased imports", () => {
+      const input = `
+import { Link as TapestryLink } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TapestryLink href="/home">Home</TapestryLink>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<TapestryLink href="/home" label="Home" />')
+    })
+
+    it("should return null for files without tapestry-react Link", () => {
+      const input = `
+function Test() {
+  return <a href="/home">Home</a>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("multiple links", () => {
+    it("should handle multiple links with different scenarios", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Link href="/home">Home</Link>
+      <Link href="/about" label="About">About Content</Link>
+      <Link href="/contact">{"Contact"}</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Link href="/home" label="Home" />')
+      expect(result).toContain(
+        "{/* TODO: tapestry-migration (label): Link has both label prop and children"
+      )
+      expect(result).toContain('<Link href="/contact" label="Contact" />')
+    })
+  })
+
+  describe("comment formatting", () => {
+    it("should properly format JSX comments in JSX context", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Link href="/complex">
+        <span>Complex</span>
+      </Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      // Should have proper JSX comment syntax
+      expect(result).toMatch(/\{\s*\/\*\s*TODO: tapestry-migration/)
+      expect(result).toMatch(/\*\/\s*\}/)
+      expect(result).toContain(
+        "take time to find the right text for the component"
+      )
+      expect(result).toContain(
+        "If icons are used in the component, you can use prefix and suffix to correctly display those icons"
+      )
+    })
+  })
+})

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

@@ -0,0 +1,54 @@
+import { Transform } from "jscodeshift"
+
+import { addAttribute } from "../../shared/actions/addAttribute"
+import { addComment } from "../../shared/actions/addComment"
+import { removeChildren } from "../../shared/actions/removeChildren"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { hasChildren } from "../../shared/conditions/hasChildren"
+import {
+  buildComment,
+  extractTextContent,
+} from "../../shared/helpers/childrenToLabelHelpers"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform: Transform = attributeTransformFactory({
+  condition: hasChildren,
+  targetComponent: "Link",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    if (hasAttribute("label")(element)) {
+      addComment({
+        element,
+        j,
+        scope: "label",
+        source,
+        text: buildComment("Link has both label prop and children", false),
+      })
+      return true
+    }
+
+    const { isSimpleText, textContent } = extractTextContent(element.children!)
+
+    if (isSimpleText && textContent) {
+      addAttribute({ element, j, name: "label", value: textContent })
+      removeChildren(element)
+      return true
+    } else if (!isSimpleText) {
+      addComment({
+        element,
+        j,
+        scope: "children",
+        source,
+        text: buildComment(
+          "complex children cannot be converted to label prop",
+          true
+        ),
+      })
+      return true
+    }
+
+    return false
+  },
+})
+
+export default transform

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

@@ -80,13 +80,165 @@ describe("convertStyleProps transform", () => {
 
         const result = applyTransform(source)
 
-        // No transformation should occur for valid size props
         expect(result).toBeNull()
       })
     })
+  })
+
+  describe("textPlugin props", () => {
+    it("should convert weight to fontWeight", () => {
+      const source = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Link weight="bold" href="/home">Bold Link</Link>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain('fontWeight: "bold"')
+      expect(result).not.toContain("weight=")
+    })
+
+    it("should convert align to textAlign", () => {
+      const source = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Link align="center" href="/centered">Centered Link</Link>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain('textAlign: "center"')
+      expect(result).not.toContain("align=")
+    })
 
-    // Note: underline and truncate props will be handled by future custom transforms
-    // since they require boolean-to-string conversion that stylePropMapping doesn't support
+    it("should convert italic to fontStyle", () => {
+      const source = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Link italic href="/styled">Italic Link</Link>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain('fontStyle: "italic"')
+      expect(result).not.toContain("italic ")
+      expect(result).not.toContain(" italic")
+    })
+
+    it("should convert truncate to text truncation styles", () => {
+      const source = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Link truncate href="/link">Very Long Link Text</Link>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain('display: "block"')
+      expect(result).toContain('overflow: "hidden"')
+      expect(result).toContain('textOverflow: "ellipsis"')
+      expect(result).toContain('whiteSpace: "nowrap"')
+      expect(result).not.toContain("truncate ")
+      expect(result).not.toContain(" truncate")
+    })
+
+    it("should convert underline to textDecoration", () => {
+      const source = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Link underline="none" href="/no-underline">No Underline</Link>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain('textDecoration: "none"')
+      expect(result).not.toContain("underline=")
+    })
+
+    it("should convert wrap={false} to whiteSpace nowrap", () => {
+      const source = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Link wrap={false} href="/nowrap">No Wrap Link</Link>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain('whiteSpace: "nowrap"')
+      expect(result).not.toContain("wrap=")
+    })
+
+    it("should handle multiple text props together", () => {
+      const source = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <Link 
+              weight="600"
+              align="right"
+              italic
+              truncate
+              href="/multi"
+            >
+              Multi-styled Link
+            </Link>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain('fontWeight: "600"')
+      expect(result).toContain('textAlign: "right"')
+      expect(result).toContain('fontStyle: "italic"')
+      expect(result).toContain('overflow: "hidden"')
+      expect(result).toContain('textOverflow: "ellipsis"')
+      expect(result).not.toContain("weight=")
+      expect(result).not.toContain("align=")
+      expect(result).not.toContain("italic ")
+      expect(result).not.toContain(" italic")
+      expect(result).not.toContain("truncate ")
+      expect(result).not.toContain(" truncate")
+    })
+
+    it("should handle weight with variable expression", () => {
+      const source = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        export function TestComponent({ linkWeight }) {
+          return <Link weight={linkWeight} href="/home">Link</Link>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      // Note: Plugin props with variable expressions currently keep their original prop names
+      // This is a known limitation that also exists for Button's stackViewPlugin
+      expect(result).toContain("weight: linkWeight")
+      expect(result).not.toContain("weight={linkWeight}")
+    })
   })
 
   describe("standard style props", () => {

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

@@ -1,6 +1,8 @@
+import { textPlugin } from "../../../stubs/textPlugin"
 import { stylePropTransformFactory } from "../../shared/transformFactories/stylePropTransformFactory"
 
 export default stylePropTransformFactory({
+  plugin: textPlugin,
   stylesToKeep: ["visible"],
   stylesToRemove: [],
   targetComponent: "Link",

package/src/components/shared/helpers/childrenToLabelHelpers.ts

@@ -0,0 +1,43 @@
+import { JSXElement } from "jscodeshift"
+
+export function extractTextContent(
+  children: NonNullable<JSXElement["children"]>
+): {
+  isSimpleText: boolean
+  textContent: string
+} {
+  let textContent = ""
+
+  for (const child of children) {
+    if (child.type === "JSXText") {
+      const text = child.value.trim()
+      if (text) textContent += text
+    } else if (
+      child.type === "JSXExpressionContainer" &&
+      child.expression.type === "StringLiteral"
+    ) {
+      textContent += child.expression.value
+    } else if (
+      child.type === "JSXExpressionContainer" &&
+      child.expression.type === "TemplateLiteral" &&
+      child.expression.expressions.length === 0
+    ) {
+      textContent += child.expression.quasis[0].value.raw
+    } else {
+      return { isSimpleText: false, textContent: "" }
+    }
+  }
+
+  return { isSimpleText: true, textContent }
+}
+
+export function buildComment(
+  message: string,
+  includeIconGuidance: boolean
+): string {
+  const baseMessage = `${message} - take time to find the right text for the component.`
+  if (includeIconGuidance) {
+    return `${baseMessage} If icons are used in the component, you can use prefix and suffix to correctly display those icons.`
+  }
+  return baseMessage
+}

package/src/stubs/textPlugin.ts

@@ -0,0 +1,45 @@
+// copied from packages/tapestry-react/src/Text/Text.tsx in tapestry-react
+// size prop is not included since it is a supported prop in tapestry link
+
+export const textPlugin = {
+  getStyles({
+    align,
+    italic,
+    truncate,
+    underline,
+    weight,
+    wrap = true,
+    ...styles
+  }: Record<string, unknown>) {
+    if (align) {
+      styles.textAlign = align
+    }
+
+    if (italic) {
+      styles.fontStyle = "italic"
+    }
+
+    if (truncate) {
+      if (styles.display !== "block" && styles.display !== "flex") {
+        styles.display = "block"
+      }
+      styles.overflow = "hidden"
+      styles.textOverflow = "ellipsis"
+    }
+
+    if (truncate || wrap === false) {
+      styles.whiteSpace = "nowrap"
+    }
+
+    if (underline) {
+      styles.textDecoration = underline
+    }
+
+    if (weight) {
+      styles.fontWeight = weight
+    }
+
+    return styles
+  },
+  styleProps: ["align", "italic", "truncate", "underline", "weight", "wrap"],
+}