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

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

@@ -0,0 +1,351 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./auditSpreadProps"
+
+const j = jscodeshift.withParser("tsx")
+
+const AUDIT_COMMENT =
+  "TODO: tapestry-migration (spreadAttribute): Spread props can contain unsupported props, please explore usages and migrate as needed."
+
+function applyTransform(source: string) {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("auditSpreadProps transform", () => {
+  describe("basic transformations", () => {
+    it("should add comment to Link with single spread prop", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { href: "/test" }
+  return <Link {...props}>Go</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+    })
+
+    it("should add comment to Link with multiple spread props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const baseProps = { href: "/test" }
+  const styleProps = { className: "link" }
+  return <Link {...baseProps} {...styleProps}>Go</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...baseProps}")
+      expect(result).toContain("{...styleProps}")
+    })
+
+    it("should handle Link with spread props and regular attributes", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { href: "/test" }
+  return <Link label="Go" {...props} external />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain('label="Go"')
+      expect(result).toContain("{...props}")
+      expect(result).toContain("external")
+    })
+
+    it("should handle multiple Link components with spread props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props1 = { href: "/test1" }
+  const props2 = { href: "/test2" }
+  return (
+    <div>
+      <Link {...props1}>Go 1</Link>
+      <Link {...props2}>Go 2</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props1}")
+      expect(result).toContain("{...props2}")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not transform Link without spread props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/test">Go</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should not transform if Link is not imported from @planningcenter/tapestry-react", () => {
+      const input = `
+import { Link } from "other-library"
+
+export default function Test() {
+  const props = { href: "/test" }
+  return <Link {...props}>Go</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should handle Link with alias import", () => {
+      const input = `
+import { Link as TapestryLink } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { href: "/test" }
+  return <TapestryLink {...props}>Go</TapestryLink>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+    })
+
+    it("should handle mixed Link components (with and without spread props)", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { href: "/test" }
+  return (
+    <div>
+      <Link {...props}>Go</Link>
+      <Link href="/static">Static</Link>
+      <Link href="/dynamic" external>External</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+      expect(result).toContain('<Link href="/static">Static</Link>')
+      expect(result).toContain('href="/dynamic"')
+      expect(result).toContain("external")
+    })
+  })
+
+  describe("complex spread prop scenarios", () => {
+    it("should handle Link with complex spread expression", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const baseProps = { className: "link" }
+  const additionalProps = isExternal ? { external: true } : {}
+  return <Link {...baseProps} {...additionalProps} href="/test">Go</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...baseProps}")
+      expect(result).toContain("{...additionalProps}")
+    })
+
+    it("should handle Link with spread props in different positions", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { className: "link" }
+  return (
+    <Link
+      label="Go"
+      {...props}
+      href="/test"
+      external={false}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain('label="Go"')
+      expect(result).toContain("{...props}")
+      expect(result).toContain('href="/test"')
+      expect(result).toContain("external={false}")
+    })
+
+    it("should handle spread props with object expressions", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link {...{ href: "/test", className: "link" }}>Go</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain('{...{ href: "/test", className: "link" }}')
+    })
+
+    it("should handle spread props with function calls", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link {...getLinkProps()} {...getStyleProps()}>Go</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...getLinkProps()}")
+      expect(result).toContain("{...getStyleProps()}")
+    })
+  })
+
+  describe("self-closing Link components", () => {
+    it("should handle self-closing Link with spread props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { label: "Go", href: "/test" }
+  return <Link {...props} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+    })
+
+    it("should handle self-closing Link with multiple spread props and attributes", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const baseProps = { href: "/test" }
+  const styleProps = { className: "link" }
+  return <Link label="Go" {...baseProps} {...styleProps} external />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain('label="Go"')
+      expect(result).toContain("{...baseProps}")
+      expect(result).toContain("{...styleProps}")
+      expect(result).toContain("external")
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("should return null when no Link components have spread props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/test">Go</Link>
+      <Link label="Static" href="/static" />
+      <Link href="/dynamic" external>External</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when no Link imports exist", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onClick: handleClick }
+  return <Button {...props}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null for empty file", () => {
+      const result = applyTransform("")
+      expect(result).toBe(null)
+    })
+
+    it("should return null when file has no JSX", () => {
+      const input = `
+export function handleClick() {
+  console.log("clicked")
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+  })
+
+  describe("different import scenarios", () => {
+    it("should handle default import with spread props", () => {
+      const input = `
+import Link from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { href: "/test" }
+  return <Link {...props}>Go</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should handle namespace import", () => {
+      const input = `
+import * as Tapestry from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { href: "/test" }
+  return <Tapestry.Link {...props}>Go</Tapestry.Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+  })
+})

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

@@ -0,0 +1,24 @@
+import { Transform } from "jscodeshift"
+
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { getSpreadProps } from "../../shared/actions/getSpreadProps"
+import { hasSpreadProps } from "../../shared/actions/hasSpreadProps"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const COMMENT =
+  "Spread props can contain unsupported props, please explore usages and migrate as needed."
+
+const transform: Transform = attributeTransformFactory({
+  condition: hasSpreadProps,
+  targetComponent: "Link",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const spreadProps = getSpreadProps(element)
+    spreadProps.forEach((prop) =>
+      addCommentToAttribute({ attribute: prop, j, text: COMMENT })
+    )
+    return spreadProps.length > 0
+  },
+})
+
+export default transform

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