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

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"

package/src/components/shared/conditions/isChildOf.test.ts

@@ -0,0 +1,89 @@
+import jscodeshift, { JSXElement } from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import { isChildOf } from "./isChildOf"
+
+const j = jscodeshift.withParser("tsx")
+
+function getElements(source: string): {
+  elements: JSXElement[]
+  source: ReturnType<typeof j>
+} {
+  const parsed = j(source)
+  const elements = parsed
+    .find(j.JSXElement)
+    .paths()
+    .map((p) => p.value)
+  return { elements, source: parsed }
+}
+
+describe("isChildOf", () => {
+  it("returns true for a direct child of the parent", () => {
+    const { source, elements } = getElements(`<Dropdown><Divider /></Dropdown>`)
+    const divider = elements.find(
+      (el) =>
+        el.openingElement.name.type === "JSXIdentifier" &&
+        el.openingElement.name.name === "Divider"
+    )!
+    const condition = isChildOf("Dropdown", source, j)
+    expect(condition(divider)).toBe(true)
+  })
+
+  it("returns true for a deeply nested descendant", () => {
+    const { source, elements } = getElements(
+      `<Dropdown><DropdownMenu><Divider /></DropdownMenu></Dropdown>`
+    )
+    const divider = elements.find(
+      (el) =>
+        el.openingElement.name.type === "JSXIdentifier" &&
+        el.openingElement.name.name === "Divider"
+    )!
+    const condition = isChildOf("Dropdown", source, j)
+    expect(condition(divider)).toBe(true)
+  })
+
+  it("returns false for an element outside the parent", () => {
+    const { source, elements } = getElements(`<div><Divider /></div>`)
+    const divider = elements.find(
+      (el) =>
+        el.openingElement.name.type === "JSXIdentifier" &&
+        el.openingElement.name.name === "Divider"
+    )!
+    const condition = isChildOf("Dropdown", source, j)
+    expect(condition(divider)).toBe(false)
+  })
+
+  it("returns false when no parent element exists in source", () => {
+    const { source, elements } = getElements(`<Divider />`)
+    const divider = elements[0]
+    const condition = isChildOf("Dropdown", source, j)
+    expect(condition(divider)).toBe(false)
+  })
+
+  it("returns true for child inside one of multiple parents", () => {
+    const { source, elements } = getElements(
+      `<div><Dropdown><Divider /></Dropdown></div>`
+    )
+    const divider = elements.find(
+      (el) =>
+        el.openingElement.name.type === "JSXIdentifier" &&
+        el.openingElement.name.name === "Divider"
+    )!
+    const condition = isChildOf("Dropdown", source, j)
+    expect(condition(divider)).toBe(true)
+  })
+
+  it("handles sibling elements — child inside parent returns true, sibling does not", () => {
+    const { source, elements } = getElements(
+      `<div><Dropdown><Divider /></Dropdown><Divider /></div>`
+    )
+    const [insideDivider, outsideDivider] = elements.filter(
+      (el) =>
+        el.openingElement.name.type === "JSXIdentifier" &&
+        el.openingElement.name.name === "Divider"
+    )
+    const condition = isChildOf("Dropdown", source, j)
+    expect(condition(insideDivider)).toBe(true)
+    expect(condition(outsideDivider)).toBe(false)
+  })
+})

package/src/components/shared/conditions/isChildOf.ts

@@ -0,0 +1,43 @@
+import { Collection, JSCodeshift, JSXElement } from "jscodeshift"
+
+import { TransformCondition } from "../types"
+
+function elementKey(element: JSXElement): string | null {
+  const loc = element.loc
+  if (!loc) return null
+  return `${loc.start.line}:${loc.start.column}-${loc.end.line}:${loc.end.column}`
+}
+
+function collectDescendantKeys(element: JSXElement, result: Set<string>): void {
+  for (const child of element.children ?? []) {
+    if (child.type === "JSXElement") {
+      const key = elementKey(child)
+      if (key) result.add(key)
+      collectDescendantKeys(child, result)
+    }
+  }
+}
+
+/**
+ * Returns a condition that is true only when the element is a descendant of a
+ * JSX element with the given local name. Matches by source location so the
+ * condition works across separate jscodeshift parses of the same source text.
+ */
+export function isChildOf(
+  parentLocalName: string,
+  source: Collection,
+  j: JSCodeshift
+): TransformCondition {
+  const descendantKeys = new Set<string>()
+
+  source
+    .find(j.JSXOpeningElement, { name: { name: parentLocalName } })
+    .forEach((path) => {
+      collectDescendantKeys(path.parent.value as JSXElement, descendantKeys)
+    })
+
+  return (element: JSXElement) => {
+    const key = elementKey(element)
+    return key !== null && descendantKeys.has(key)
+  }
+}

package/src/components/shared/helpers/unsupportedPropsHelpers.ts

@@ -56,6 +56,7 @@ export const CHECKBOX_RADIO_SUPPORTED_PROPS = [
 
 export const INPUT_SPECIFIC_PROPS = [
   "autoComplete",
+  "autoFocus",
   "autoWidth",
   "defaultValue",
   "description",
@@ -197,3 +198,38 @@ export const DATE_PICKER_SUPPORTED_PROPS = [
   ...COMMON_PROPS,
   ...DATE_PICKER_SPECIFIC_PROPS,
 ]
+
+export const DROPDOWN_SPECIFIC_PROPS = ["onClose", "onOpen"]
+
+export const DROPDOWN_SUPPORTED_PROPS = [
+  ...COMMON_PROPS.filter((prop) => prop !== "size"),
+  ...DROPDOWN_SPECIFIC_PROPS,
+]
+
+export const DROPDOWN_ITEM_BASE_PROPS = [
+  "destructive",
+  "staffOnly",
+  "text",
+  "textValue",
+  "value",
+]
+
+// Dropdown.Item (old) → DropdownAction (new)
+// onSelect→onAction, value→id, text→textValue handled by itemToAction
+export const DROPDOWN_ITEM_SUPPORTED_PROPS = [
+  ...COMMON_PROPS,
+  ...DROPDOWN_ITEM_BASE_PROPS,
+  "disabled",
+  "onAction",
+  "onSelect",
+]
+
+// Dropdown.Link (old) → DropdownLink (new)
+// to→href handled by linkToLink; disabled intentionally NOT included
+export const DROPDOWN_LINK_SUPPORTED_PROPS = [
+  ...COMMON_PROPS,
+  ...DROPDOWN_ITEM_BASE_PROPS,
+  "external",
+  "href",
+  "to",
+]