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

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

@@ -0,0 +1,391 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./convertStyleProps"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string, options = {}) {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    options
+  ) as string | null
+}
+
+describe("convertStyleProps transform", () => {
+  describe("visible prop - handled by theme system", () => {
+    it("should convert visible={false} to display: none like Button", () => {
+      const source = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Link visible={false} href="/hidden">Hidden Link</Link>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain('display: "none"')
+      expect(result).not.toContain("visible={false}")
+    })
+
+    it("should remove visible={true} with no style changes (true is default)", () => {
+      const source = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Link visible={true} href="/visible">Visible Link</Link>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      // visible={true} is default behavior, so it should be removed with no style added
+      expect(result).not.toContain("visible={true}")
+      expect(result).not.toContain("style={{") // No style should be added
+      expect(result).toContain('<Link href="/visible">Visible Link</Link>')
+    })
+  })
+
+  describe("supported props - preserved like Button", () => {
+    it("should preserve size prop as-is like Button does", () => {
+      const source = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Link size="lg" href="/sized">Sized Link</Link>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      // size should be preserved as a supported prop, not converted to CSS
+      expect(result).toBeNull() // No transformation needed
+    })
+
+    it("should preserve all valid Link size values", () => {
+      const sizes = ["xs", "sm", "md", "lg", "xl"]
+
+      sizes.forEach((size) => {
+        const source = `
+          import { Link } from "@planningcenter/tapestry-react"
+
+          export function TestComponent() {
+            return <Link size="${size}" href="/test">Test Link</Link>
+          }
+        `
+
+        const result = applyTransform(source)
+
+        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=")
+    })
+
+    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", () => {
+    it("should convert standard style props to style object", () => {
+      const source = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <Link
+              marginBottom={8}
+              color="blue"
+              fontSize="14px"
+              href="/styled"
+            >
+              Styled Link
+            </Link>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain('color: "blue"')
+      expect(result).toContain('fontSize: "14px"')
+      expect(result).not.toContain("marginBottom={8}")
+      expect(result).not.toContain('color="blue"')
+      expect(result).not.toContain('fontSize="14px"')
+    })
+  })
+
+  describe("mixed props", () => {
+    it("should handle combination of visible and standard style props", () => {
+      const source = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <Link
+              visible={false}
+              marginLeft={16}
+              color="red"
+              href="/mixed"
+            >
+              Mixed Props
+            </Link>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain('display: "none"') // from visible={false}
+      expect(result).toContain('color: "red"') // standard style prop
+      expect(result).not.toContain("visible={false}")
+      expect(result).not.toContain("marginLeft={16}")
+    })
+
+    it("should handle existing style prop and merge with converted props", () => {
+      const source = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <Link
+              style={{ padding: "10px", border: "1px solid gray" }}
+              visible={false}
+              marginTop={8}
+              href="/existing"
+            >
+              Existing Style
+            </Link>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain('display: "none"') // from visible={false}
+      expect(result).not.toContain("visible={false}")
+      expect(result).not.toContain("marginTop={8}")
+    })
+  })
+
+  describe("no style props", () => {
+    it("should return null when no style props are present", () => {
+      const source = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Link href="/plain" external>Plain Link</Link>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("variable expressions", () => {
+    it("should handle variable expressions in style props", () => {
+      const source = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          const isVisible = true
+          const linkColor = "purple"
+          return (
+            <Link
+              visible={isVisible}
+              color={linkColor}
+              href="/variables"
+            >
+              Variable Link
+            </Link>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain("color: linkColor")
+      expect(result).not.toContain("visible={isVisible}")
+      expect(result).not.toContain("color={linkColor}")
+    })
+  })
+
+  describe("import handling", () => {
+    it("should not affect imports", () => {
+      const source = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Link visible={false} href="/test">Test</Link>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain(
+        'import { Link } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+})

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

@@ -0,0 +1,10 @@
+import { textPlugin } from "../../../stubs/textPlugin"
+import { stylePropTransformFactory } from "../../shared/transformFactories/stylePropTransformFactory"
+
+export default stylePropTransformFactory({
+  plugin: textPlugin,
+  stylesToKeep: ["visible"],
+  stylesToRemove: [],
+  targetComponent: "Link",
+  targetPackage: "@planningcenter/tapestry-react",
+})

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",