@planningcenter/tapestry-migration-cli 2.4.0-rc.3 → 2.4.0-rc.5

package/package.json

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

package/src/components/link/index.ts

@@ -1,7 +1,9 @@
 import { Transform } from "jscodeshift"
 
+import convertStyleProps from "./transforms/convertStyleProps"
 import inlineToKind from "./transforms/inlineToKind"
 import removeAs from "./transforms/removeAs"
+import reviewStyles from "./transforms/reviewStyles"
 import targetBlankToExternal from "./transforms/targetBlankToExternal"
 import toToHref from "./transforms/toToHref"
 
@@ -14,6 +16,8 @@ const transform: Transform = (fileInfo, api, options) => {
     toToHref,
     targetBlankToExternal,
     removeAs,
+    reviewStyles,
+    convertStyleProps,
   ]
 
   for (const individualTransform of transforms) {

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

@@ -0,0 +1,239 @@
+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)
+
+        // No transformation should occur for valid size props
+        expect(result).toBeNull()
+      })
+    })
+
+    // Note: underline and truncate props will be handled by future custom transforms
+    // since they require boolean-to-string conversion that stylePropMapping doesn't support
+  })
+
+  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,8 @@
+import { stylePropTransformFactory } from "../../shared/transformFactories/stylePropTransformFactory"
+
+export default stylePropTransformFactory({
+  stylesToKeep: ["visible"],
+  stylesToRemove: [],
+  targetComponent: "Link",
+  targetPackage: "@planningcenter/tapestry-react",
+})

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

@@ -0,0 +1,172 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./reviewStyles"
+
+const j = jscodeshift.withParser("tsx")
+
+// Helper to run transform and get result
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  const api = {
+    j,
+    jscodeshift: j,
+    report: () => {},
+    stats: () => {},
+  }
+  const result = transform(fileInfo, api, {})
+  return result as string | null
+}
+
+describe("reviewStyles transform", () => {
+  describe("basic transformation", () => {
+    it("should add comment to Link with style attribute", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Link style={{ color: "blue" }} href="/home">Home</Link>
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain(
+        "review custom styles - Link styles may need to be updated for new design system"
+      )
+      expect(result).toContain('style={{ color: "blue" }}')
+    })
+
+    it("should handle Link with complex style object", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <Link 
+              style={{ 
+                color: "red", 
+                fontSize: "14px",
+                textDecoration: "none" 
+              }} 
+              href="/about"
+            >
+              About
+            </Link>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain("review custom styles")
+      expect(result).toContain('color: "red"')
+      expect(result).toContain('fontSize: "14px"')
+      expect(result).toContain('textDecoration: "none"')
+    })
+
+    it("should preserve Link without style attribute", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Link href="/home">Home</Link>
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("multiple links", () => {
+    it("should handle mixed Link usage", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Link style={{ color: "blue" }} href="/home">Home</Link>
+              <Link href="/about">About</Link>
+              <Link style={{ fontSize: "16px" }} href="/contact">Contact</Link>
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain("review custom styles")
+      // Should have comments for both styled links
+      const commentCount = (result?.match(/TODO: tapestry-migration/g) || [])
+        .length
+      expect(commentCount).toBe(2)
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle Link with style expression", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          const linkStyles = { color: "green" }
+          return <Link style={linkStyles} href="/dynamic">Dynamic</Link>
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain("review custom styles")
+      expect(result).toContain("style={linkStyles}")
+    })
+
+    it("should not affect other components with style", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Link style={{ color: "blue" }} href="/home">Link</Link>
+              <div style={{ padding: "10px" }}>Div</div>
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("TODO: tapestry-migration")
+      // Should only have one comment (for Link, not div)
+      const commentCount = (result?.match(/TODO: tapestry-migration/g) || [])
+        .length
+      expect(commentCount).toBe(1)
+      expect(result).toContain('<div style={{ padding: "10px" }}>Div</div>')
+    })
+  })
+
+  describe("import handling", () => {
+    it("should not affect imports", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Link style={{ color: "blue" }} href="/home">Home</Link>
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Link } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+})

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

@@ -0,0 +1,17 @@
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const COMMENT = `review custom styles - Link styles may need to be updated for new design system.`
+
+export default attributeTransformFactory({
+  condition: hasAttribute("style"),
+  targetComponent: "Link",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const attribute = getAttribute({ element, name: "style" })!
+    addCommentToAttribute({ attribute, j, text: COMMENT })
+    return true
+  },
+})

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
+    })
   }
 }

package/src/components/shared/transformFactories/stylePropTransformFactory.ts

@@ -319,7 +319,10 @@ export function stylePropTransformFactory(config: {
         styles = { ...styles, ...directStyleProps }
         if (options.verbose) console.log("Final generated styles:", styles)
 
-        applyStylesToComponent({ element, j, styles })
+        // Only apply styles if there are actual CSS properties to add
+        if (Object.keys(styles).length > 0) {
+          applyStylesToComponent({ element, j, styles })
+        }
       } catch (error) {
         console.log("Error processing style props:", error)
         console.log("Style props that caused error:", allStyleProps)