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

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

@@ -0,0 +1,135 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./placementIdToMenu"
+
+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
+}
+
+const withMenu = (
+  attrs: string,
+  items = "<Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>"
+) =>
+  `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown ${attrs}>
+      <DropdownMenu>
+        ${items}
+      </DropdownMenu>
+    </Dropdown>
+  )
+}
+`.trim()
+
+describe("placementIdToMenu transform", () => {
+  describe("placement", () => {
+    it("moves placement string literal to DropdownMenu with dash-to-space conversion", () => {
+      const result = applyTransform(withMenu('placement="bottom-start"'))
+      expect(result).toContain('<DropdownMenu placement="bottom start"')
+      expect(result).not.toMatch(/<Dropdown\s[^>]*placement/)
+    })
+
+    it("converts all dash-separated placement values", () => {
+      const result = applyTransform(withMenu('placement="top-end"'))
+      expect(result).toContain('<DropdownMenu placement="top end"')
+    })
+
+    it("moves placement from JSXExpressionContainer string literal", () => {
+      const result = applyTransform(withMenu('placement={"bottom-end"}'))
+      expect(result).toContain('<DropdownMenu placement={"bottom end"}')
+    })
+
+    it("moves dynamic placement expression and adds TODO comment", () => {
+      const result = applyTransform(withMenu("placement={myPlacement}"))
+      expect(result).toContain("<DropdownMenu placement={myPlacement}")
+      expect(result).toContain(
+        "TODO: tapestry-migration (placement): placement is a dynamic expression"
+      )
+    })
+  })
+
+  describe("id", () => {
+    it("moves id string literal to DropdownMenu", () => {
+      const result = applyTransform(withMenu('id="my-menu"'))
+      expect(result).toContain('<DropdownMenu id="my-menu"')
+      expect(result).not.toMatch(/<Dropdown\s[^>]*\bid=/)
+    })
+
+    it("moves dynamic id expression to DropdownMenu", () => {
+      const result = applyTransform(withMenu("id={menuId}"))
+      expect(result).toContain("<DropdownMenu id={menuId}")
+    })
+  })
+
+  describe("placement and id together", () => {
+    it("moves both placement and id to DropdownMenu", () => {
+      const result = applyTransform(
+        withMenu('placement="bottom-start" id="my-menu"')
+      )
+      expect(result).toContain("placement=")
+      expect(result).toContain("id=")
+      expect(result).toContain("<DropdownMenu")
+      expect(result).not.toMatch(/<Dropdown\s[^>]*placement/)
+      expect(result).not.toMatch(/<Dropdown\s[^>]*\bid=/)
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("returns null when neither placement nor id is present", () => {
+      const result = applyTransform(withMenu("onClose={handleClose}"))
+      expect(result).toBe(null)
+    })
+
+    it("adds TODO when DropdownMenu child is not found", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown placement="bottom-start">{children}</Dropdown>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (placement)")
+      expect(result).toContain("no DropdownMenu child found")
+    })
+
+    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 placement="bottom-start">
+      <DropdownMenu><Dropdown.Item onSelect={fn}>Edit</Dropdown.Item></DropdownMenu>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(null)
+    })
+
+    it("does not touch the import statement", () => {
+      const result = applyTransform(withMenu('placement="bottom-start"'))
+      expect(result).toContain(
+        'import { Dropdown } from "@planningcenter/tapestry-react"'
+      )
+    })
+
+    it("returns null for empty file", () => {
+      expect(applyTransform("")).toBe(null)
+    })
+  })
+})

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

@@ -0,0 +1,96 @@
+import { JSXAttribute, JSXElement, 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"
+
+function findDropdownMenu(element: JSXElement): JSXElement | undefined {
+  return (element.children ?? []).find(
+    (child): child is JSXElement =>
+      child.type === "JSXElement" &&
+      child.openingElement.name.type === "JSXIdentifier" &&
+      child.openingElement.name.name === "DropdownMenu"
+  )
+}
+
+function applyPlacementConversion(attr: JSXAttribute): { isDynamic: boolean } {
+  const val = attr.value
+  if (val?.type === "StringLiteral") {
+    val.value = val.value.replace(/-/g, " ")
+    return { isDynamic: false }
+  }
+  if (val?.type === "JSXExpressionContainer") {
+    if (val.expression.type === "StringLiteral") {
+      val.expression.value = val.expression.value.replace(/-/g, " ")
+      return { isDynamic: false }
+    }
+    if (val.expression.type !== "JSXEmptyExpression") {
+      return { isDynamic: true }
+    }
+  }
+  return { isDynamic: false }
+}
+
+function moveAttr(
+  name: string,
+  attr: JSXAttribute,
+  from: JSXElement,
+  to: JSXElement,
+  {
+    j,
+    source,
+  }: {
+    j: Parameters<typeof removeAttribute>[1]["j"]
+    source: Parameters<typeof removeAttribute>[1]["source"]
+  }
+) {
+  to.openingElement.attributes = [...(to.openingElement.attributes ?? []), attr]
+  removeAttribute(name, { element: from, j, source })
+}
+
+const transform: Transform = attributeTransformFactory({
+  targetComponent: "Dropdown",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const placementAttr = getAttribute({ element, name: "placement" })
+    const idAttr = getAttribute({ element, name: "id" })
+
+    if (!placementAttr && !idAttr) return false
+
+    const menuChild = findDropdownMenu(element)
+
+    if (!menuChild) {
+      addComment({
+        element,
+        j,
+        scope: "placement",
+        source,
+        text: "placement/id could not be moved to DropdownMenu — no DropdownMenu child found",
+      })
+      return true
+    }
+
+    if (idAttr) {
+      moveAttr("id", idAttr, element, menuChild, { j, source })
+    }
+
+    if (placementAttr) {
+      const { isDynamic } = applyPlacementConversion(placementAttr)
+      moveAttr("placement", placementAttr, element, menuChild, { j, source })
+      if (isDynamic) {
+        addComment({
+          element,
+          j,
+          scope: "placement",
+          source,
+          text: "placement is a dynamic expression — dash-to-space conversion (e.g. 'bottom-start' → 'bottom start') must be done manually",
+        })
+      }
+    }
+
+    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/helpers/unsupportedPropsHelpers.ts

@@ -56,6 +56,7 @@ export const CHECKBOX_RADIO_SUPPORTED_PROPS = [
 
 export const INPUT_SPECIFIC_PROPS = [
   "autoComplete",
+  "autoFocus",
   "autoWidth",
   "defaultValue",
   "description",

package/src/index.ts

@@ -15,6 +15,7 @@ const COMPONENTS_SET = new Set([
   "button",
   "checkbox",
   "date-picker",
+  "dropdown",
   "input",
   "link",
   "radio",