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

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

@@ -0,0 +1,312 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./inlinePropToKind"
+
+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("inlinePropToKind transform", () => {
+  describe("basic transformations", () => {
+    it("should transform Link with inline prop to kind='inline-text'", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/profile" inline>Profile</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('kind="inline-text"')
+      expect(result).not.toContain("inline>")
+      expect(result).not.toContain("inline />")
+      expect(result).not.toContain("inline=")
+      expect(result).toContain('href="/profile"')
+    })
+
+    it("should transform Link with inline={true} to kind='inline-text'", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/profile" inline={true}>Profile</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('kind="inline-text"')
+      expect(result).not.toContain("inline>")
+      expect(result).not.toContain("inline />")
+      expect(result).not.toContain("inline=")
+      expect(result).toContain('href="/profile"')
+    })
+
+    it("should preserve all other props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Link 
+      href="/dashboard" 
+      className="nav-link" 
+      inline
+      data-testid="profile-link"
+    >
+      Dashboard
+    </Link>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('kind="inline-text"')
+      expect(result).toContain('href="/dashboard"')
+      expect(result).toContain('className="nav-link"')
+      expect(result).toContain('data-testid="profile-link"')
+      expect(result).not.toContain("inline>")
+      expect(result).not.toContain("inline />")
+      expect(result).not.toContain("inline=")
+    })
+
+    it("should handle self-closing Link with inline prop", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/dashboard" inline />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('kind="inline-text"')
+      expect(result).toContain('href="/dashboard"')
+      expect(result).not.toContain("inline>")
+      expect(result).not.toContain("inline />")
+      expect(result).not.toContain("inline=")
+    })
+
+    it("should handle multiple Link components with inline prop", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/home" inline>Home</Link>
+      <Link href="/about" inline>About</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        '<Link href="/home" kind="inline-text">Home</Link>'
+      )
+      expect(result).toContain(
+        '<Link href="/about" kind="inline-text">About</Link>'
+      )
+      expect(result).not.toContain("inline>")
+      expect(result).not.toContain("inline />")
+      expect(result).not.toContain("inline=")
+    })
+  })
+
+  describe("mixed scenarios", () => {
+    it("should only transform Link with inline prop and leave regular Link unchanged", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <nav>
+      <Link href="/home">Home</Link>
+      <Link href="/profile" inline>Profile</Link>
+      <Link href="/dashboard" kind="primary">Dashboard</Link>
+    </nav>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Link href="/home">Home</Link>')
+      expect(result).toContain(
+        '<Link href="/profile" kind="inline-text">Profile</Link>'
+      )
+      expect(result).toContain(
+        '<Link href="/dashboard" kind="primary">Dashboard</Link>'
+      )
+      expect(result).not.toContain("inline>")
+      expect(result).not.toContain("inline />")
+      expect(result).not.toContain("inline=")
+    })
+
+    it("should handle aliased Link import", () => {
+      const input = `
+import { Link as TapestryLink } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <TapestryLink href="/profile" inline>Profile</TapestryLink>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('kind="inline-text"')
+      expect(result).not.toContain("inline>")
+      expect(result).not.toContain("inline />")
+      expect(result).not.toContain("inline=")
+      expect(result).toContain("TapestryLink")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not transform if Link is not imported from tapestry-react", () => {
+      const input = `
+import { Link } from "react-router-dom"
+
+export default function Test() {
+  return <Link to="/profile" inline>Profile</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null) // No changes
+    })
+
+    it("should handle Link with spread props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test({ linkProps }) {
+  return <Link {...linkProps} inline>Profile</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('kind="inline-text"')
+      expect(result).toContain("{...linkProps}")
+      expect(result).not.toContain("inline>")
+      expect(result).not.toContain("inline />")
+      expect(result).not.toContain("inline=")
+    })
+
+    it("should handle complex JSX expressions", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test({ items, showInline }) {
+  return (
+    <div>
+      {items.map(item => (
+        <Link key={item.id} href={item.url} inline>{item.name}</Link>
+      ))}
+      {showInline && <Link href="/conditional" inline>Conditional</Link>}
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        '<Link key={item.id} href={item.url} kind="inline-text">{item.name}</Link>'
+      )
+      expect(result).toContain(
+        '<Link href="/conditional" kind="inline-text">Conditional</Link>'
+      )
+      expect(result).not.toContain("inline>")
+      expect(result).not.toContain("inline />")
+      expect(result).not.toContain("inline=")
+    })
+
+    it("should handle nested Link components", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <p>
+        Visit our <Link href="/about" inline>about page</Link> for more info.
+      </p>
+      <span>
+        Or check the <Link href="/help" inline>help section</Link>.
+      </span>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        '<Link href="/about" kind="inline-text">about page</Link>'
+      )
+      expect(result).toContain(
+        '<Link href="/help" kind="inline-text">help section</Link>'
+      )
+      expect(result).not.toContain("inline>")
+      expect(result).not.toContain("inline />")
+      expect(result).not.toContain("inline=")
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("should return null when no Link with inline prop exists", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/home">Home</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when no tapestry-react imports exist", () => {
+      const input = `
+import React from "react"
+
+export default function Test() {
+  return <div>No Links here</div>
+}
+      `.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 Link is imported but no inline prop used", () => {
+      const input = `
+import { Link, Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/home">Home</Link>
+      <Button>Click me</Button>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+  })
+})

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

@@ -0,0 +1,24 @@
+import { addAttribute } from "../../shared/actions/addAttribute"
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform = attributeTransformFactory({
+  condition: hasAttribute("inline"),
+  targetComponent: "Link",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    removeAttribute("inline", { element, j, source })
+
+    addAttribute({
+      element,
+      j,
+      name: "kind",
+      value: "inline-text",
+    })
+
+    return true
+  },
+})
+
+export default transform

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

@@ -0,0 +1,295 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./moveLinkImport"
+
+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("moveLinkImport transform", () => {
+  describe("basic transformations", () => {
+    it("should move Link import from tapestry-react to tapestry", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/test">Test</Link>
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry";
+
+export default function Test() {
+  return <Link href="/test">Test</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should handle multiple Link components", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/home">Home</Link>
+      <Link href="/about">About</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry";
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/home">Home</Link>
+      <Link href="/about">About</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should preserve other imports from tapestry-react", () => {
+      const input = `
+import { Link, Button, Input } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/test">Test</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button, Input } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { Link } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('<Link href="/test">Test</Link>')
+      expect(result).not.toContain(
+        'Link, Button } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+
+  describe("import conflict handling", () => {
+    it("should use alias when Link already imported from tapestry", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry"
+import { Link as ReactLink } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <ReactLink href="/test">Test</ReactLink>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Link } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('<Link href="/test">Test</Link>')
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+      expect(result).not.toContain("ReactLink")
+    })
+
+    it("should handle existing tapestry import with other components", () => {
+      const input = `
+import { Button, Input } from "@planningcenter/tapestry"
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/test">Test</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button, Input, Link } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('<Link href="/test">Test</Link>')
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not transform if Link is not imported from tapestry-react", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button>Test</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should handle Link with aliased import", () => {
+      const input = `
+import { Link as ReactLink } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <ReactLink href="/test">Test</ReactLink>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Link } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('<Link href="/test">Test</Link>')
+      expect(result).not.toContain("ReactLink")
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+    })
+
+    it("should handle self-closing Link components", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/test" />
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry";
+
+export default function Test() {
+  return <Link href="/test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should handle Link with props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/test" kind="primary" onClick={handleClick}>Test</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Link } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('kind="primary"')
+      expect(result).toContain("onClick={handleClick}")
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("should return null when no Link import exists", () => {
+      const input = `
+import React from "react"
+
+export default function Test() {
+  return <div>Hello</div>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when Link already imported from tapestry", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry"
+
+export default function Test() {
+  return <Link href="/test">Test</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null for empty file", () => {
+      const result = applyTransform("")
+      expect(result).toBe(null)
+    })
+  })
+
+  describe("complex scenarios", () => {
+    it("should handle mixed imports and multiple components", () => {
+      const input = `
+import React from "react"
+import { Link, Button } from "@planningcenter/tapestry-react"
+import { Input } from "@planningcenter/tapestry"
+
+export default function Test() {
+  return (
+    <form>
+      <Input name="email" />
+      <Button type="submit">Submit</Button>
+      <Link href="/cancel">Cancel</Link>
+    </form>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { Input, Link } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('<Button type="submit">Submit</Button>')
+      expect(result).toContain('<Link href="/cancel">Cancel</Link>')
+      expect(result).not.toContain(
+        'Link, Button } from "@planningcenter/tapestry-react"'
+      )
+    })
+
+    it("should handle Link usage in JSX expressions", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test({ showLink }) {
+  return (
+    <div>
+      {showLink && <Link href="/conditional">Conditional</Link>}
+      {items.map(item => <Link key={item.id} href={item.url}>{item.name}</Link>)}
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Link } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('<Link href="/conditional">Conditional</Link>')
+      expect(result).toContain(
+        "<Link key={item.id} href={item.url}>{item.name}</Link>"
+      )
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+    })
+  })
+})

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

@@ -0,0 +1,14 @@
+import { Transform } from "jscodeshift"
+
+import { componentTransformFactory } from "../../shared/transformFactories/componentTransformFactory"
+
+const transform: Transform = componentTransformFactory({
+  condition: () => true,
+  conflictAlias: "TLink",
+  fromComponent: "Link",
+  fromPackage: "@planningcenter/tapestry-react",
+  toComponent: "Link",
+  toPackage: "@planningcenter/tapestry",
+})
+
+export default transform