@planningcenter/tapestry-migration-cli 2.4.0-rc.8 → 2.4.0

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/innerRefToRef.test.ts

@@ -0,0 +1,170 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./innerRefToRef"
+
+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("innerRefToRef transform", () => {
+  describe("basic transformations", () => {
+    it("should transform Link 'innerRef' prop to 'ref' prop", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link innerRef={linkRef}>Go somewhere</Link>
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link ref={linkRef}>Go somewhere</Link>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(expected)
+    })
+
+    it("should transform Link 'innerRef' prop to 'ref' prop with function", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link innerRef={(el) => setLinkRef(el)}>Go somewhere</Link>
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link ref={(el) => setLinkRef(el)}>Go somewhere</Link>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(expected)
+    })
+
+    it("should transform Link 'innerRef' prop to 'ref' prop with useRef", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+import { useRef } from "react"
+
+export default function Test() {
+  const linkRef = useRef(null)
+  return <Link innerRef={linkRef}>Go somewhere</Link>
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry-react"
+import { useRef } from "react"
+
+export default function Test() {
+  const linkRef = useRef(null)
+  return <Link ref={linkRef}>Go somewhere</Link>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(expected)
+    })
+  })
+
+  describe("multiple components", () => {
+    it("should transform multiple Link components with innerRef", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link innerRef={linkRef1}>First</Link>
+      <Link innerRef={linkRef2}>Second</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link ref={linkRef1}>First</Link>
+      <Link ref={linkRef2}>Second</Link>
+    </div>
+  );
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(expected)
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not transform Link without innerRef", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/dashboard">Go to dashboard</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should not transform other components with innerRef", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button innerRef={buttonRef}>Click me</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should preserve other props when transforming innerRef", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const linkRef = null
+  return <Link innerRef={linkRef} href="/dashboard" onClick={() => {}}>Go to dashboard</Link>
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const linkRef = null
+  return <Link ref={linkRef} href="/dashboard" onClick={() => {}}>Go to dashboard</Link>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(expected)
+    })
+  })
+})

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

@@ -0,0 +1,14 @@
+import { transformAttributeName } from "../../shared/actions/transformAttributeName"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform = attributeTransformFactory({
+  condition: hasAttribute("innerRef"),
+  targetComponent: "Link",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element) => {
+    return transformAttributeName("innerRef", "ref", { element })
+  },
+})
+
+export default transform