@planningcenter/tapestry-migration-cli 3.4.1-rc.6 → 3.4.1-rc.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "3.4.1-rc.6",
+  "version": "3.4.1-rc.8",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
-    "@planningcenter/tapestry": "^3.4.1-rc.6",
+    "@planningcenter/tapestry": "^3.4.1-rc.8",
     "@planningcenter/tapestry-react": "^4.11.5",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^20.0.0",
@@ -50,5 +50,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6c945f7f7e6d652f839942961c9f9a515c21b3ff"
+  "gitHead": "1514e1926f05eceaf949c194c3ff366778509e65"
 }

package/src/components/dropdown/index.test.ts

@@ -15,6 +15,25 @@ function applyTransform(source: string): string | null {
 }
 
 describe("dropdown orchestrator", () => {
+  it("applies linkToLink through the chain", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Link to="/docs">Docs</Dropdown.Link>
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("<DropdownLink")
+    expect(result).toContain('href="/docs"')
+    expect(result).not.toContain("Dropdown.Link")
+  })
+
   it("applies itemToAction through the chain", () => {
     const input = `
 import { Dropdown } from "@planningcenter/tapestry-react"
@@ -38,12 +57,8 @@ export default function Test() {
     const input = `
 import { Dropdown } from "@planningcenter/tapestry-react"
 
-export default function Test() {
-  return (
-    <Dropdown title="Actions">
-      <Dropdown.Link to="/docs">Docs</Dropdown.Link>
-    </Dropdown>
-  )
+export default function Test({ children }) {
+  return <Dropdown title="Actions">{children}</Dropdown>
 }
     `.trim()
 

package/src/components/dropdown/index.ts

@@ -1,13 +1,14 @@
 import { Transform } from "jscodeshift"
 
 import itemToAction from "./transforms/itemToAction"
+import linkToLink from "./transforms/linkToLink"
 
 // When moveDropdownImport is added, it must remain last in the chain.
 const transform: Transform = (fileInfo, api, options) => {
   let currentSource = fileInfo.source
   let hasAnyChanges = false
 
-  const transforms: Transform[] = [itemToAction]
+  const transforms: Transform[] = [linkToLink, itemToAction]
 
   for (const individualTransform of transforms) {
     const result = individualTransform(

package/src/components/dropdown/transforms/linkToLink.test.ts

@@ -0,0 +1,248 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./linkToLink"
+
+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("linkToLink transform", () => {
+  describe("element renaming", () => {
+    it("renames Dropdown.Link to DropdownLink", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Nav">
+      <Dropdown.Link to="/docs">Docs</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<DropdownLink")
+      expect(result).toContain("</DropdownLink>")
+      expect(result).not.toContain("Dropdown.Link")
+    })
+
+    it("preserves children through the rename", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Nav">
+      <Dropdown.Link to="/docs">Documentation</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("Documentation")
+    })
+  })
+
+  describe("prop renaming", () => {
+    it("renames to to href", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Nav">
+      <Dropdown.Link to="/docs">Docs</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('href="/docs"')
+      expect(result).not.toContain("to=")
+    })
+
+    it("renames dynamic to expression to href", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Nav">
+      <Dropdown.Link to={docsPath()}>Docs</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("href={docsPath()}")
+      expect(result).not.toContain("to=")
+    })
+
+    it("preserves external prop", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Nav">
+      <Dropdown.Link to="https://example.com" external>External</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("external")
+      expect(result).toContain("<DropdownLink")
+    })
+
+    it("preserves unrecognised props", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Nav">
+      <Dropdown.Link to="/docs" data-pendo="nav-docs">Docs</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('data-pendo="nav-docs"')
+    })
+  })
+
+  describe("multiple links", () => {
+    it("renames all Dropdown.Link elements", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Nav">
+      <Dropdown.Link to="/docs">Docs</Dropdown.Link>
+      <Dropdown.Link to="/status" external>Status</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("Dropdown.Link")
+      const linkCount = (result?.match(/<DropdownLink/g) || []).length
+      expect(linkCount).toBe(2)
+    })
+  })
+
+  describe("isolation", () => {
+    it("does not affect the parent Dropdown element", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Nav">
+      <Dropdown.Link to="/docs">Docs</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<Dropdown ")
+      expect(result).toContain("</Dropdown>")
+    })
+
+    it("does not affect Dropdown.Item elements", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Nav">
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+      <Dropdown.Link to="/docs">Docs</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("Dropdown.Item")
+      expect(result).toContain("<DropdownLink")
+    })
+
+    it("does not touch the import statement", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Nav">
+      <Dropdown.Link to="/docs">Docs</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Dropdown } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("returns null when Dropdown is not imported from tapestry-react", () => {
+      const input = `
+import { Dropdown } from "some-other-library"
+
+export default function Test() {
+  return (
+    <Dropdown>
+      <Dropdown.Link to="/docs">Docs</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("returns null when no Dropdown.Link is present", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Nav">
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("returns null for empty file", () => {
+      expect(applyTransform("")).toBe(null)
+    })
+  })
+})

package/src/components/dropdown/transforms/linkToLink.ts

@@ -0,0 +1,24 @@
+import { Transform } from "jscodeshift"
+
+import { transformAttributeName } from "../../shared/actions/transformAttributeName"
+import { transformElementName } from "../../shared/actions/transformElementName"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform: Transform = attributeTransformFactory({
+  targetComponent: "Dropdown.Link",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, options }) => {
+    const toRenamed = transformAttributeName("to", "href", {
+      element,
+      j,
+      options,
+    })
+    const elementRenamed = transformElementName({
+      element,
+      name: "DropdownLink",
+    })
+    return toRenamed || elementRenamed
+  },
+})
+
+export default transform