@planningcenter/tapestry-migration-cli 3.4.1-rc.9 → 3.5.0

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

@@ -0,0 +1,153 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./wrapMenu"
+
+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("wrapMenu transform", () => {
+  describe("wrapping children", () => {
+    it("wraps Dropdown children in DropdownMenu", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown onClose={handleClose}>
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<DropdownMenu>")
+      expect(result).toContain("</DropdownMenu>")
+      expect(result).toContain("Dropdown.Item")
+    })
+
+    it("preserves children inside DropdownMenu", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown onClose={handleClose}>
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+      <Dropdown.Item onSelect={fn2}>Delete</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      const itemCount = (result?.match(/<Dropdown\.Item/g) || []).length
+      expect(itemCount).toBe(2)
+    })
+
+    it("adds DropdownMenu import from tapestry", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown onClose={handleClose}>
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('from "@planningcenter/tapestry"')
+      expect(result).toContain("DropdownMenu")
+    })
+
+    it("does not touch the tapestry-react import statement", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown onClose={handleClose}>
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Dropdown } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("returns null when DropdownMenu already exists", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown>
+      <DropdownTrigger><DropdownButton label="Actions" /></DropdownTrigger>
+      <DropdownMenu>
+        <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+      </DropdownMenu>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("wraps complex children in DropdownMenu and adds a TODO comment", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test({ children }) {
+  return <Dropdown onClose={handleClose}>{children}</Dropdown>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<DropdownMenu>")
+      expect(result).toContain(
+        "TODO: tapestry-migration (children): complex children cannot be automatically converted to DropdownAction/DropdownLink"
+      )
+    })
+
+    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 for empty file", () => {
+      expect(applyTransform("")).toBe(null)
+    })
+  })
+})

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

@@ -0,0 +1,54 @@
+import { JSXElement, Transform } from "jscodeshift"
+
+import { addComment } from "../../shared/actions/addComment"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { addImport } from "../../shared/transformFactories/helpers/manageImports"
+
+const transform: Transform = attributeTransformFactory({
+  targetComponent: "Dropdown",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const children = element.children ?? []
+
+    if (
+      children.some(
+        (child): child is JSXElement =>
+          child.type === "JSXElement" &&
+          child.openingElement.name.type === "JSXIdentifier" &&
+          child.openingElement.name.name === "DropdownMenu"
+      )
+    ) {
+      return false
+    }
+
+    if (!children.some((child) => child.type === "JSXElement")) {
+      addComment({
+        element,
+        j,
+        scope: "children",
+        source,
+        text: "complex children cannot be automatically converted to DropdownAction/DropdownLink — verify contents",
+      })
+    }
+
+    element.children = [
+      j.jsxElement(
+        j.jsxOpeningElement(j.jsxIdentifier("DropdownMenu"), [], false),
+        j.jsxClosingElement(j.jsxIdentifier("DropdownMenu")),
+        children
+      ),
+    ]
+
+    addImport({
+      component: "DropdownMenu",
+      fromPackage: "@planningcenter/tapestry-react",
+      j,
+      pkg: "@planningcenter/tapestry",
+      source,
+    })
+
+    return true
+  },
+})
+
+export default transform

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

@@ -0,0 +1,283 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./wrapTrigger"
+
+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("wrapTrigger transform", () => {
+  describe("title prop", () => {
+    it("converts title string to DropdownTrigger + DropdownButton", () => {
+      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("<DropdownTrigger>")
+      expect(result).toContain("</DropdownTrigger>")
+      expect(result).toContain('<DropdownButton label="Actions"')
+      expect(result).not.toContain('title="Actions"')
+    })
+
+    it("converts dynamic title expression to DropdownButton label", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title={menuTitle}>
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("DropdownButton")
+      expect(result).toContain("label={menuTitle}")
+      expect(result).not.toContain("title=")
+    })
+
+    it("preserves existing Dropdown children after trigger insertion", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+      <Dropdown.Item onSelect={fn2}>Delete</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<DropdownTrigger>")
+      expect(result).toContain("Dropdown.Item")
+    })
+  })
+
+  describe("triggerElement prop", () => {
+    it("wraps triggerElement JSX value in DropdownTrigger", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown triggerElement={<DropdownButton label="Actions" />}>
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<DropdownTrigger>")
+      expect(result).toContain("</DropdownTrigger>")
+      expect(result).toContain("DropdownButton")
+      expect(result).not.toContain("triggerElement=")
+    })
+
+    it("triggerElement takes precedence over title", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Ignored" triggerElement={<DropdownButton label="Used" />}>
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('label="Used"')
+      expect(result).not.toContain("title=")
+      expect(result).not.toContain("triggerElement=")
+    })
+  })
+
+  describe("attribute preservation", () => {
+    it("preserves other Dropdown props", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions" onClose={handleClose} placement="bottom-end">
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("onClose={handleClose}")
+      expect(result).toContain('placement="bottom-end"')
+    })
+
+    it("does not touch the tapestry-react 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"'
+      )
+    })
+
+    it("adds DropdownTrigger and DropdownButton imports from tapestry when title is used", () => {
+      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('from "@planningcenter/tapestry"')
+      expect(result).toContain("DropdownTrigger")
+      expect(result).toContain("DropdownButton")
+    })
+
+    it("adds only DropdownTrigger import when triggerElement is provided", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown triggerElement={<MyButton />}>
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      const tapestryImport =
+        result?.match(/import {[^}]+} from "@planningcenter\/tapestry"/)?.[0] ??
+        ""
+      expect(tapestryImport).toContain("DropdownTrigger")
+      expect(tapestryImport).not.toContain("DropdownButton")
+    })
+  })
+
+  describe("multiple dropdowns", () => {
+    it("transforms all Dropdown elements in the file", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Dropdown title="First">
+        <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+      </Dropdown>
+      <Dropdown title="Second">
+        <Dropdown.Item onSelect={fn2}>Delete</Dropdown.Item>
+      </Dropdown>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      const count = (result?.match(/<DropdownTrigger>/g) || []).length
+      expect(count).toBe(2)
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("returns null when Dropdown has no title or triggerElement", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown onClose={handleClose}>
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    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 title="Actions">
+      <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)
+    })
+
+    it("wraps non-JSX triggerElement expression as a child with a TODO comment", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown triggerElement={myTrigger}>
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<DropdownTrigger>")
+      expect(result).toContain("{myTrigger}")
+      expect(result).not.toContain("triggerElement=")
+      expect(result).toContain("TODO")
+      expect(result).toContain("triggerElement")
+    })
+  })
+})

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

@@ -0,0 +1,98 @@
+import {
+  JSXAttribute,
+  JSXElement,
+  JSXExpressionContainer,
+  Transform,
+} from "jscodeshift"
+
+import { addComment } from "../../shared/actions/addComment"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { addImport } from "../../shared/transformFactories/helpers/manageImports"
+
+const transform: Transform = attributeTransformFactory({
+  targetComponent: "Dropdown",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const titleAttr = getAttribute({ element, name: "title" })
+    const triggerElementAttr = getAttribute({ element, name: "triggerElement" })
+
+    if (!titleAttr && !triggerElementAttr) return false
+
+    let triggerChild: JSXElement | JSXExpressionContainer | null = null
+
+    if (triggerElementAttr) {
+      const attrValue = triggerElementAttr.value
+      if (
+        attrValue?.type === "JSXExpressionContainer" &&
+        attrValue.expression.type !== "JSXEmptyExpression"
+      ) {
+        if (attrValue.expression.type === "JSXElement") {
+          triggerChild = attrValue.expression
+        } else {
+          triggerChild = j.jsxExpressionContainer(attrValue.expression)
+          addComment({
+            element,
+            j,
+            scope: "triggerElement",
+            source,
+            text: "triggerElement was not a JSX element — verify this renders correctly inside DropdownTrigger",
+          })
+        }
+      }
+    }
+
+    if (!triggerChild && titleAttr) {
+      const labelValue = titleAttr.value
+      if (!labelValue) return false
+
+      const labelAttr: JSXAttribute = j.jsxAttribute(
+        j.jsxIdentifier("label"),
+        labelValue
+      )
+
+      triggerChild = j.jsxElement(
+        j.jsxOpeningElement(
+          j.jsxIdentifier("DropdownButton"),
+          [labelAttr],
+          true
+        ),
+        null,
+        []
+      )
+      addImport({
+        component: "DropdownButton",
+        fromPackage: "@planningcenter/tapestry-react",
+        j,
+        pkg: "@planningcenter/tapestry",
+        source,
+      })
+    }
+
+    if (!triggerChild) return false
+
+    const triggerWrapper = j.jsxElement(
+      j.jsxOpeningElement(j.jsxIdentifier("DropdownTrigger"), [], false),
+      j.jsxClosingElement(j.jsxIdentifier("DropdownTrigger")),
+      [triggerChild]
+    )
+
+    removeAttribute("title", { element, j, source })
+    removeAttribute("triggerElement", { element, j, source })
+
+    element.children = [triggerWrapper, ...(element.children ?? [])]
+
+    addImport({
+      component: "DropdownTrigger",
+      fromPackage: "@planningcenter/tapestry-react",
+      j,
+      pkg: "@planningcenter/tapestry",
+      source,
+    })
+
+    return true
+  },
+})
+
+export default transform

package/src/components/input/transforms/unsupportedProps.test.ts

@@ -156,19 +156,6 @@ function Test() {
       expect(result).toContain("TODO: tapestry-migration (hover)")
     })
 
-    it("should flag autoFocus", () => {
-      const input = `
-import { Input } from "@planningcenter/tapestry-react"
-
-function Test() {
-  return <Input autoFocus label="Name" />
-}
-      `.trim()
-
-      const result = applyTransform(input)
-      expect(result).toContain("TODO: tapestry-migration (autoFocus)")
-    })
-
     it("should flag readOnlyBackgroundColor", () => {
       const input = `
 import { Input } from "@planningcenter/tapestry-react"
@@ -231,6 +218,20 @@ function Test() {
       expect(result).not.toContain("TODO: tapestry-migration")
     })
 
+    it("should not flag autoFocus", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input autoFocus label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toContain("autoFocus")
+    })
+
     it("should not flag standard HTML attributes", () => {
       const input = `
 import { Input } from "@planningcenter/tapestry-react"