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

package/package.json

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

package/src/components/link/index.ts

@@ -1,6 +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"
 
@@ -12,6 +15,9 @@ const transform: Transform = (fileInfo, api, options) => {
     inlineToKind,
     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/removeAs.test.ts

@@ -0,0 +1,192 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import removeAs from "./removeAs"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  return removeAs(
+    { path: "test.tsx", source },
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("removeAs transform", () => {
+  describe("basic transformations", () => {
+    it("should remove as='a' attribute from Link", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/home" as="a">Home</Link>
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/home">Home</Link>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should only remove as='a' attribute, not other as values", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/home" as="a">Home</Link>
+      <Link href="/button" as="button">Button</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('href="/home"') // Should remain
+      expect(result).not.toContain('as="a"') // Should be removed
+      expect(result).toContain('as="button"') // Should remain
+    })
+
+    it("should preserve other attributes while removing as='a'", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Link 
+      href="/external" 
+      as="a" 
+      className="nav-link"
+      target="_blank"
+      rel="noopener"
+    >
+      External Link
+    </Link>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('href="/external"')
+      expect(result).toContain('className="nav-link"')
+      expect(result).toContain('target="_blank"')
+      expect(result).toContain('rel="noopener"')
+      expect(result).not.toContain('as="a"')
+    })
+
+    it("should handle Links without as attribute", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/internal">Internal Link</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull() // No changes should be made
+    })
+
+    it("should handle Links with as attribute but different value", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/button" as="button">Button Link</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull() // No changes should be made
+    })
+  })
+
+  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" as="a">Page 1</Link>
+      <Link href="/page2" as="a">Page 2</Link>
+      <Link href="/page3">Page 3</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain('as="a"') // Should be removed from both
+      expect(result).toContain('href="/page1"')
+      expect(result).toContain('href="/page2"')
+      expect(result).toContain('href="/page3"') // Should remain unchanged
+    })
+
+    it("should handle self-closing Link components", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/external" as="a" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('href="/external"')
+      expect(result).not.toContain('as="a"')
+    })
+
+    it("should handle dynamic as values", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/external" as={isExternal ? "a" : "button"}>Link</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull() // No changes should be made for dynamic values
+    })
+  })
+
+  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" as="a">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" as="a">External Link</TapestryLink>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('href="/external"')
+      expect(result).not.toContain('as="a"')
+    })
+  })
+})

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

@@ -0,0 +1,17 @@
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { hasAttributeValue } from "../../shared/conditions/hasAttributeValue"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform = attributeTransformFactory({
+  condition: hasAttributeValue("as", "a"),
+  targetComponent: "Link",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    // Remove as attribute
+    removeAttribute("as", { element, j, source })
+
+    return true
+  },
+})
+
+export default transform

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/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)