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

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

@@ -3,11 +3,12 @@ import { Transform } from "jscodeshift"
 import { transformAttributeName } from "../../shared/actions/transformAttributeName"
 import { transformElementName } from "../../shared/actions/transformElementName"
 import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { addImport } from "../../shared/transformFactories/helpers/manageImports"
 
 const transform: Transform = attributeTransformFactory({
   targetComponent: "Dropdown.Link",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, options }) => {
+  transform: (element, { j, options, source }) => {
     const toRenamed = transformAttributeName("to", "href", {
       element,
       j,
@@ -17,7 +18,17 @@ const transform: Transform = attributeTransformFactory({
       element,
       name: "DropdownLink",
     })
-    return toRenamed || elementRenamed
+    const changed = toRenamed || elementRenamed
+    if (changed) {
+      addImport({
+        component: "DropdownLink",
+        fromPackage: "@planningcenter/tapestry-react",
+        j,
+        pkg: "@planningcenter/tapestry",
+        source,
+      })
+    }
+    return changed
   },
 })
 

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

@@ -0,0 +1,93 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./moveDropdownImport"
+
+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("moveDropdownImport transform", () => {
+  it("moves Dropdown import from tapestry-react to tapestry", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown onClose={fn}><DropdownMenu /></Dropdown>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain(
+      'import { Dropdown } from "@planningcenter/tapestry"'
+    )
+    expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+  })
+
+  it("merges Dropdown into an existing tapestry import", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+import { DropdownAction, DropdownMenu, DropdownTrigger } from "@planningcenter/tapestry"
+
+export default function Test() {
+  return (
+    <Dropdown onClose={fn}>
+      <DropdownTrigger><DropdownButton label="Actions" /></DropdownTrigger>
+      <DropdownMenu><DropdownAction onAction={fn}>Edit</DropdownAction></DropdownMenu>
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("Dropdown")
+    expect(result).toContain("DropdownAction")
+    expect(result).toContain("DropdownMenu")
+    expect(result).toContain("DropdownTrigger")
+    expect(result).toContain('from "@planningcenter/tapestry"')
+    expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+  })
+
+  it("preserves other tapestry-react imports", () => {
+    const input = `
+import { Dropdown, Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown onClose={fn}><DropdownMenu /></Dropdown>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain(
+      'import { Button } from "@planningcenter/tapestry-react"'
+    )
+    expect(result).toContain(
+      'import { Dropdown } from "@planningcenter/tapestry"'
+    )
+  })
+
+  describe("no changes scenarios", () => {
+    it("returns null when Dropdown is not imported from tapestry-react", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry"
+
+export default function Test() {
+  return <Dropdown onClose={fn}><DropdownMenu /></Dropdown>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(null)
+    })
+
+    it("returns null for empty file", () => {
+      expect(applyTransform("")).toBe(null)
+    })
+  })
+})

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

@@ -0,0 +1,13 @@
+import { Transform } from "jscodeshift"
+
+import { componentTransformFactory } from "../../shared/transformFactories/componentTransformFactory"
+
+const transform: Transform = componentTransformFactory({
+  condition: () => true,
+  fromComponent: "Dropdown",
+  fromPackage: "@planningcenter/tapestry-react",
+  toComponent: "Dropdown",
+  toPackage: "@planningcenter/tapestry",
+})
+
+export default transform

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/dropdown/transforms/unsupportedProps.test.ts

@@ -0,0 +1,145 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./unsupportedProps"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string {
+  const fileInfo = { path: "test.tsx", source }
+  return (
+    (transform(
+      fileInfo,
+      { j, jscodeshift: j, report: () => {}, stats: () => {} },
+      {}
+    ) as string | null) || source
+  )
+}
+
+describe("unsupportedProps transform", () => {
+  describe("flags removed props", () => {
+    it("flags variant", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown variant="outline" onClose={fn}><Dropdown.Item onSelect={fn}>Edit</Dropdown.Item></Dropdown>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (variant)")
+      expect(result).toContain("variant")
+    })
+
+    it("flags theme", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown theme="primary" onClose={fn}><Dropdown.Item onSelect={fn}>Edit</Dropdown.Item></Dropdown>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (theme)")
+    })
+
+    it("flags size", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown size="md" onClose={fn}><Dropdown.Item onSelect={fn}>Edit</Dropdown.Item></Dropdown>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (size)")
+    })
+
+    it("flags popoverProps", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown popoverProps={{ offset: 8 }} onClose={fn}><Dropdown.Item onSelect={fn}>Edit</Dropdown.Item></Dropdown>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (popoverProps)")
+    })
+
+    it("flags multiple unsupported props", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown variant="outline" theme="primary" css={{ color: "red" }} onClose={fn}><Dropdown.Item onSelect={fn}>Edit</Dropdown.Item></Dropdown>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (variant)")
+      expect(result).toContain("TODO: tapestry-migration (theme)")
+      expect(result).toContain("TODO: tapestry-migration (css)")
+    })
+  })
+
+  describe("does not flag supported props", () => {
+    it("does not flag onClose or onOpen", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown onClose={handleClose} onOpen={handleOpen}><Dropdown.Item onSelect={fn}>Edit</Dropdown.Item></Dropdown>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(input)
+    })
+
+    it("does not flag className or ref", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown className="my-dropdown" ref={ref} onClose={fn}><Dropdown.Item onSelect={fn}>Edit</Dropdown.Item></Dropdown>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(input)
+    })
+
+    it("does not flag aria- and data- attributes", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown aria-label="Options" data-pendo="dropdown" onClose={fn}><Dropdown.Item onSelect={fn}>Edit</Dropdown.Item></Dropdown>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(input)
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("returns source unchanged when not from tapestry-react", () => {
+      const input = `
+import { Dropdown } from "some-other-library"
+
+export default function Test() {
+  return <Dropdown variant="outline"><Dropdown.Item>Edit</Dropdown.Item></Dropdown>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(input)
+    })
+
+    it("returns source unchanged for empty file", () => {
+      expect(applyTransform("")).toBe("")
+    })
+  })
+})

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

@@ -0,0 +1,12 @@
+import { Transform } from "jscodeshift"
+
+import { DROPDOWN_SUPPORTED_PROPS } from "../../shared/helpers/unsupportedPropsHelpers"
+import { unsupportedPropsFactory } from "../../shared/transformFactories/unsupportedPropsFactory"
+
+const transform: Transform = unsupportedPropsFactory({
+  supportedProps: DROPDOWN_SUPPORTED_PROPS,
+  targetComponent: "Dropdown",
+  targetPackage: "@planningcenter/tapestry-react",
+})
+
+export default transform

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

@@ -0,0 +1,143 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./unsupportedPropsDivider"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string {
+  const fileInfo = { path: "test.tsx", source }
+  return (
+    (transform(
+      fileInfo,
+      { j, jscodeshift: j, report: () => {}, stats: () => {} },
+      {}
+    ) as string | null) || source
+  )
+}
+
+describe("unsupportedPropsDivider transform", () => {
+  describe("flags Divider-specific props when inside a Dropdown", () => {
+    it("flags axis", () => {
+      const input = `
+import { Dropdown, Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown><Divider axis="vertical" /></Dropdown>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toContain("TODO: tapestry-migration (axis)")
+    })
+
+    it("flags color", () => {
+      const input = `
+import { Dropdown, Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown><Divider color="neutral100" /></Dropdown>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toContain(
+        "TODO: tapestry-migration (color)"
+      )
+    })
+
+    it("flags margin", () => {
+      const input = `
+import { Dropdown, Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown><Divider margin={8} /></Dropdown>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toContain(
+        "TODO: tapestry-migration (margin)"
+      )
+    })
+
+    it("flags size", () => {
+      const input = `
+import { Dropdown, Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown><Divider size={2} /></Dropdown>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toContain("TODO: tapestry-migration (size)")
+    })
+
+    it("flags css (StyleProps)", () => {
+      const input = `
+import { Dropdown, Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown><Divider css={{ marginTop: 8 }} /></Dropdown>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toContain("TODO: tapestry-migration (css)")
+    })
+
+    it("flags className and style (DropdownSeparator accepts no props)", () => {
+      const input = `
+import { Dropdown, Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown><Divider className="my-divider" style={{ marginTop: 8 }} /></Dropdown>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (className)")
+      expect(result).toContain("TODO: tapestry-migration (style)")
+    })
+  })
+
+  describe("does not flag aria- and data- attributes", () => {
+    it("does not flag aria- and data- attributes inside a Dropdown", () => {
+      const input = `
+import { Dropdown, Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown><Divider aria-hidden="true" data-testid="divider" /></Dropdown>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(input)
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("returns source unchanged when Divider is not inside a Dropdown", () => {
+      const input = `
+import { Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Divider axis="vertical" />
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(input)
+    })
+
+    it("returns source unchanged when not from tapestry-react", () => {
+      const input = `
+import { Divider } from "some-other-library"
+
+export default function Test() {
+  return <Divider axis="vertical" />
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(input)
+    })
+
+    it("returns source unchanged for empty file", () => {
+      expect(applyTransform("")).toBe("")
+    })
+  })
+})