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

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

@@ -0,0 +1,26 @@
+import { Transform } from "jscodeshift"
+
+import { isChildOf } from "../../shared/conditions/isChildOf"
+import { getImportName } from "../../shared/transformFactories/helpers/manageImports"
+import { unsupportedPropsFactory } from "../../shared/transformFactories/unsupportedPropsFactory"
+
+const transform: Transform = (fileInfo, api, options) => {
+  const j = api.jscodeshift
+  const source = j(fileInfo.source)
+
+  const dropdownLocalName = getImportName(
+    "Dropdown",
+    "@planningcenter/tapestry-react",
+    { j, source }
+  )
+  if (!dropdownLocalName) return null
+
+  return unsupportedPropsFactory({
+    condition: isChildOf(dropdownLocalName, source, j),
+    supportedProps: [],
+    targetComponent: "Divider",
+    targetPackage: "@planningcenter/tapestry-react",
+  })(fileInfo, api, options)
+}
+
+export default transform

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

@@ -0,0 +1,123 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./unsupportedPropsItem"
+
+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("unsupportedPropsItem transform", () => {
+  describe("flags unsupported props", () => {
+    it("flags as prop (polymorphism)", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item as={Link} to="/edit" onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (as)")
+    })
+
+    it("flags custom unsupported prop", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item onSelect={fn} customProp="value">Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (customProp)")
+    })
+  })
+
+  describe("does not flag supported props", () => {
+    it("does not flag onSelect, value, text, disabled, textValue", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item onSelect={fn} value="edit" text="Edit" disabled textValue="Edit">Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(input)
+    })
+
+    it("does not flag destructive", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item onSelect={fn} destructive>Delete</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 title="Actions">
+      <Dropdown.Item onSelect={fn} aria-label="Edit" data-pendo="edit-item">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.Item as={Link}>Edit</Dropdown.Item>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(input)
+    })
+
+    it("returns source unchanged for empty file", () => {
+      expect(applyTransform("")).toBe("")
+    })
+  })
+})

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

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

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

@@ -0,0 +1,107 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./unsupportedPropsLink"
+
+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("unsupportedPropsLink transform", () => {
+  describe("flags unsupported props", () => {
+    it("flags disabled (not supported on links)", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Link to="/edit" disabled>Edit</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (disabled)")
+    })
+
+    it("flags custom unsupported prop", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Link to="/edit" customProp="value">Edit</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (customProp)")
+    })
+  })
+
+  describe("does not flag supported props", () => {
+    it("does not flag to, external, href, textValue, destructive", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Link to="/docs" external href="/docs" textValue="Docs" destructive>Docs</Dropdown.Link>
+    </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 title="Actions">
+      <Dropdown.Link to="/edit" aria-label="Edit" data-pendo="edit-link">Edit</Dropdown.Link>
+    </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.Link to="/edit" disabled>Edit</Dropdown.Link>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(input)
+    })
+
+    it("returns source unchanged for empty file", () => {
+      expect(applyTransform("")).toBe("")
+    })
+  })
+})

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

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

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