@planningcenter/tapestry-migration-cli 2.4.0-rc.1 → 2.4.0-rc.11

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/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/link/transforms/unsupportedProps.test.ts

@@ -0,0 +1,265 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./unsupportedProps"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string) {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("Link unsupportedProps transform", () => {
+  describe("basic transformations", () => {
+    it("should add comment to Link with unsupported 'css' prop", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/about" css={{ color: "red" }}>About</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (css)")
+      expect(result).toContain("'css' is not supported")
+      expect(result).toContain("Use 'className' prop with CSS classes")
+      expect(result).toContain('css={{ color: "red" }}')
+    })
+
+    it("should add comment to Link with unsupported 'disabled' prop", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/about" disabled>About</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (disabled)")
+      expect(result).toContain("'disabled' is not supported")
+      expect(result).toContain("Links do not support the disabled prop")
+      expect(result).toContain("disabled")
+    })
+
+    it("should add comments to Link with multiple unsupported props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/about" css={{ color: "red" }} disabled truncate underline={false}>About</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (css)")
+      expect(result).toContain("TODO: tapestry-migration (disabled)")
+      expect(result).toContain("TODO: tapestry-migration (truncate)")
+      expect(result).toContain("'truncate' is not supported")
+      expect(result).toContain("TODO: tapestry-migration (underline)")
+      expect(result).toContain("'underline' is not supported")
+    })
+
+    it("should add comment for hover/focus/active state props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/about" hover={{ color: "blue" }}>About</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (hover)")
+      expect(result).toContain("State-based styles (hover, focus, active)")
+    })
+
+    it("should add comment for mediaQueries prop", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/about" mediaQueries={{ sm: { fontSize: "12px" } }}>About</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (mediaQueries)")
+      expect(result).toContain("use CSS media queries in a class")
+    })
+  })
+
+  describe("supported props should not be flagged", () => {
+    it("should not flag standard anchor attributes", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Link 
+      href="/about"
+      download
+      hrefLang="en"
+      type="text/html"
+      referrerPolicy="no-referrer"
+    >
+      About
+    </Link>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("should not flag Tapestry Link props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Link 
+      href="/about"
+      kind="primary"
+      size="lg"
+      external
+      prefix={<Icon />}
+      suffix={<Icon />}
+      label="About"
+      className="custom-class"
+    >
+      About
+    </Link>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("should not flag common React/HTML props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Link 
+      href="/about"
+      id="about-link"
+      onClick={handleClick}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      role="link"
+      tabIndex={0}
+      title="Go to About page"
+      style={{ margin: 10 }}
+    >
+      About
+    </Link>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("should not flag aria-* attributes", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Link 
+      href="/about"
+      aria-label="About page"
+      aria-describedby="desc"
+      aria-hidden={false}
+    >
+      About
+    </Link>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("should not flag data-* attributes", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Link 
+      href="/about"
+      data-testid="about-link"
+      data-tracking="nav-about"
+    >
+      About
+    </Link>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle Link with no unsupported props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/about">About</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("should not transform Link from other packages", () => {
+      const input = `
+import { Link } from "react-router-dom"
+
+export default function Test() {
+  return <Link to="/about" css={{ color: "red" }}>About</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("should handle multiple Link components", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/about" css={{ color: "red" }}>About</Link>
+      <Link href="/contact" disabled>Contact</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (css)")
+      expect(result).toContain("TODO: tapestry-migration (disabled)")
+    })
+  })
+})