@planningcenter/tapestry-migration-cli 3.4.1-rc.3 → 3.4.1-rc.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "3.4.1-rc.3",
+  "version": "3.4.1-rc.5",
   "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.3",
+    "@planningcenter/tapestry": "^3.4.1-rc.5",
     "@planningcenter/tapestry-react": "^4.11.5",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^20.0.0",
@@ -50,5 +50,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "51487ee80b4a2012c20b9666d74c8251e45b0efc"
+  "gitHead": "5da2559bdcc3347b6442ebbc2a523dab90ca5ccd"
 }

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

@@ -15,14 +15,32 @@ function applyTransform(source: string): string | null {
 }
 
 describe("dropdown orchestrator", () => {
-  it("returns null for a legacy Dropdown source (no-op until rules are added)", () => {
+  it("applies itemToAction through the chain", () => {
     const input = `
 import { Dropdown } from "@planningcenter/tapestry-react"
 
 export default function Test() {
   return (
-    <Dropdown title="Actions" variant="outline">
-      <Dropdown.Item onSelect={() => {}}>Edit</Dropdown.Item>
+    <Dropdown title="Actions">
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("<DropdownAction")
+    expect(result).toContain("onAction={fn}")
+    expect(result).not.toContain("Dropdown.Item")
+  })
+
+  it("returns null when there is nothing to transform", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
       <Dropdown.Link to="/docs">Docs</Dropdown.Link>
     </Dropdown>
   )

package/src/components/dropdown/index.ts

@@ -1,12 +1,13 @@
 import { Transform } from "jscodeshift"
 
-// Transforms are added one per commit as rules are built out.
-// moveDropdownImport MUST remain last in the chain.
+import itemToAction from "./transforms/itemToAction"
+
+// 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[] = []
+  const transforms: Transform[] = [itemToAction]
 
   for (const individualTransform of transforms) {
     const result = individualTransform(

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

@@ -0,0 +1,335 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./itemToAction"
+
+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("itemToAction transform", () => {
+  describe("element renaming", () => {
+    it("renames Dropdown.Item to DropdownAction", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item onSelect={handleEdit}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<DropdownAction")
+      expect(result).toContain("</DropdownAction>")
+      expect(result).not.toContain("Dropdown.Item")
+    })
+
+    it("preserves children through the rename", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item onSelect={fn}>Edit item</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("Edit item")
+    })
+  })
+
+  describe("prop renaming", () => {
+    it("renames onSelect to onAction", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item onSelect={handleEdit}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("onAction={handleEdit}")
+      expect(result).not.toContain("onSelect")
+    })
+
+    it("renames value to id", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item value="edit" onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('id="edit"')
+      expect(result).not.toContain("value=")
+    })
+
+    it("renames text to textValue", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item text="Edit item" onSelect={fn}>
+        <Icon name="edit" />
+      </Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('textValue="Edit item"')
+      expect(result).not.toContain(" text=")
+    })
+
+    it("renames all props in a single pass", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item value="edit" text="Edit" onSelect={handleEdit}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('id="edit"')
+      expect(result).toContain('textValue="Edit"')
+      expect(result).toContain("onAction={handleEdit}")
+      expect(result).not.toContain("value=")
+      expect(result).not.toContain("onSelect")
+      expect(result).not.toContain(" text=")
+    })
+
+    it("preserves disabled", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item onSelect={fn} disabled>Delete</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("disabled")
+    })
+
+    it("preserves unrecognised props", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item onSelect={fn} data-pendo="bulk-edit">Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('data-pendo="bulk-edit"')
+    })
+  })
+
+  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="Actions">
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<Dropdown ")
+      expect(result).toContain("</Dropdown>")
+    })
+
+    it("does not affect Dropdown.Link elements", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+      <Dropdown.Link to="/docs">Docs</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("Dropdown.Link")
+      expect(result).not.toContain("Dropdown.Item")
+    })
+
+    it("does not touch the import statement", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Dropdown } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+
+  describe("multiple items", () => {
+    it("renames all Dropdown.Item instances", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Bulk edit options">
+      <Dropdown.Item onSelect={handleBulkEdit}>Edit groups…</Dropdown.Item>
+      <Dropdown.Item onSelect={handleBulkArchive}>Archive groups…</Dropdown.Item>
+      <Dropdown.Item onSelect={openBulkCreateEventModal}>Create events…</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("Dropdown.Item")
+      const actionCount = (result?.match(/<DropdownAction/g) || []).length
+      expect(actionCount).toBe(3)
+    })
+
+    it("handles items built with .map()", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test({ actions }) {
+  return (
+    <Dropdown title="Actions">
+      {actions.map(action => (
+        <Dropdown.Item key={action.id} value={action.id} onSelect={action.fn}>
+          {action.label}
+        </Dropdown.Item>
+      ))}
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<DropdownAction")
+      expect(result).toContain("id={action.id}")
+      expect(result).toContain("onAction={action.fn}")
+      expect(result).not.toContain("Dropdown.Item")
+    })
+  })
+
+  describe("aliased import", () => {
+    it("handles aliased Dropdown import", () => {
+      const input = `
+import { Dropdown as TapestryDropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <TapestryDropdown title="Actions">
+      <TapestryDropdown.Item onSelect={fn}>Edit</TapestryDropdown.Item>
+    </TapestryDropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<DropdownAction")
+      expect(result).toContain("onAction={fn}")
+      expect(result).not.toContain("TapestryDropdown.Item")
+    })
+  })
+
+  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.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("returns null when no Dropdown.Item is used", () => {
+      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).toBe(null)
+    })
+
+    it("returns null for empty file", () => {
+      expect(applyTransform("")).toBe(null)
+    })
+  })
+})

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

@@ -0,0 +1,34 @@
+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.Item",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, options }) => {
+    const onSelectRenamed = transformAttributeName("onSelect", "onAction", {
+      element,
+      j,
+      options,
+    })
+    const valueRenamed = transformAttributeName("value", "id", {
+      element,
+      j,
+      options,
+    })
+    const textRenamed = transformAttributeName("text", "textValue", {
+      element,
+      j,
+      options,
+    })
+    const elementRenamed = transformElementName({
+      element,
+      name: "DropdownAction",
+    })
+    return onSelectRenamed || valueRenamed || textRenamed || elementRenamed
+  },
+})
+
+export default transform