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

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

@@ -0,0 +1,335 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./itemToAction"
+
+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("itemToAction transform", () => {
+  describe("element renaming", () => {
+    it("renames Dropdown.Item to DropdownAction", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item onSelect={handleEdit}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<DropdownAction")
+      expect(result).toContain("</DropdownAction>")
+      expect(result).not.toContain("Dropdown.Item")
+    })
+
+    it("preserves children through the rename", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item onSelect={fn}>Edit item</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("Edit item")
+    })
+  })
+
+  describe("prop renaming", () => {
+    it("renames onSelect to onAction", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item onSelect={handleEdit}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("onAction={handleEdit}")
+      expect(result).not.toContain("onSelect")
+    })
+
+    it("renames value to id", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item value="edit" onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('id="edit"')
+      expect(result).not.toContain("value=")
+    })
+
+    it("renames text to textValue", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item text="Edit item" onSelect={fn}>
+        <Icon name="edit" />
+      </Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('textValue="Edit item"')
+      expect(result).not.toContain(" text=")
+    })
+
+    it("renames all props in a single pass", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item value="edit" text="Edit" onSelect={handleEdit}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('id="edit"')
+      expect(result).toContain('textValue="Edit"')
+      expect(result).toContain("onAction={handleEdit}")
+      expect(result).not.toContain("value=")
+      expect(result).not.toContain("onSelect")
+      expect(result).not.toContain(" text=")
+    })
+
+    it("preserves disabled", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item onSelect={fn} disabled>Delete</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("disabled")
+    })
+
+    it("preserves unrecognised props", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item onSelect={fn} data-pendo="bulk-edit">Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('data-pendo="bulk-edit"')
+    })
+  })
+
+  describe("isolation", () => {
+    it("does not affect the parent Dropdown element", () => {
+      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("<Dropdown ")
+      expect(result).toContain("</Dropdown>")
+    })
+
+    it("does not affect Dropdown.Link elements", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+      <Dropdown.Link to="/docs">Docs</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("Dropdown.Link")
+      expect(result).not.toContain("Dropdown.Item")
+    })
+
+    it("does not touch the 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"'
+      )
+    })
+  })
+
+  describe("multiple items", () => {
+    it("renames all Dropdown.Item instances", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Bulk edit options">
+      <Dropdown.Item onSelect={handleBulkEdit}>Edit groups…</Dropdown.Item>
+      <Dropdown.Item onSelect={handleBulkArchive}>Archive groups…</Dropdown.Item>
+      <Dropdown.Item onSelect={openBulkCreateEventModal}>Create events…</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("Dropdown.Item")
+      const actionCount = (result?.match(/<DropdownAction/g) || []).length
+      expect(actionCount).toBe(3)
+    })
+
+    it("handles items built with .map()", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test({ actions }) {
+  return (
+    <Dropdown title="Actions">
+      {actions.map(action => (
+        <Dropdown.Item key={action.id} value={action.id} onSelect={action.fn}>
+          {action.label}
+        </Dropdown.Item>
+      ))}
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<DropdownAction")
+      expect(result).toContain("id={action.id}")
+      expect(result).toContain("onAction={action.fn}")
+      expect(result).not.toContain("Dropdown.Item")
+    })
+  })
+
+  describe("aliased import", () => {
+    it("handles aliased Dropdown import", () => {
+      const input = `
+import { Dropdown as TapestryDropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <TapestryDropdown title="Actions">
+      <TapestryDropdown.Item onSelect={fn}>Edit</TapestryDropdown.Item>
+    </TapestryDropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<DropdownAction")
+      expect(result).toContain("onAction={fn}")
+      expect(result).not.toContain("TapestryDropdown.Item")
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    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 when no Dropdown.Item is used", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Link to="/docs">Docs</Dropdown.Link>
+    </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/itemToAction.ts

@@ -0,0 +1,34 @@
+import { Transform } from "jscodeshift"
+
+import { transformAttributeName } from "../../shared/actions/transformAttributeName"
+import { transformElementName } from "../../shared/actions/transformElementName"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform: Transform = attributeTransformFactory({
+  targetComponent: "Dropdown.Item",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, options }) => {
+    const onSelectRenamed = transformAttributeName("onSelect", "onAction", {
+      element,
+      j,
+      options,
+    })
+    const valueRenamed = transformAttributeName("value", "id", {
+      element,
+      j,
+      options,
+    })
+    const textRenamed = transformAttributeName("text", "textValue", {
+      element,
+      j,
+      options,
+    })
+    const elementRenamed = transformElementName({
+      element,
+      name: "DropdownAction",
+    })
+    return onSelectRenamed || valueRenamed || textRenamed || elementRenamed
+  },
+})
+
+export default transform

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

@@ -0,0 +1,248 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./linkToLink"
+
+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("linkToLink transform", () => {
+  describe("element renaming", () => {
+    it("renames Dropdown.Link to DropdownLink", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Nav">
+      <Dropdown.Link to="/docs">Docs</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<DropdownLink")
+      expect(result).toContain("</DropdownLink>")
+      expect(result).not.toContain("Dropdown.Link")
+    })
+
+    it("preserves children through the rename", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Nav">
+      <Dropdown.Link to="/docs">Documentation</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("Documentation")
+    })
+  })
+
+  describe("prop renaming", () => {
+    it("renames to to href", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Nav">
+      <Dropdown.Link to="/docs">Docs</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('href="/docs"')
+      expect(result).not.toContain("to=")
+    })
+
+    it("renames dynamic to expression to href", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Nav">
+      <Dropdown.Link to={docsPath()}>Docs</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("href={docsPath()}")
+      expect(result).not.toContain("to=")
+    })
+
+    it("preserves external prop", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Nav">
+      <Dropdown.Link to="https://example.com" external>External</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("external")
+      expect(result).toContain("<DropdownLink")
+    })
+
+    it("preserves unrecognised props", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Nav">
+      <Dropdown.Link to="/docs" data-pendo="nav-docs">Docs</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('data-pendo="nav-docs"')
+    })
+  })
+
+  describe("multiple links", () => {
+    it("renames all Dropdown.Link elements", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Nav">
+      <Dropdown.Link to="/docs">Docs</Dropdown.Link>
+      <Dropdown.Link to="/status" external>Status</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("Dropdown.Link")
+      const linkCount = (result?.match(/<DropdownLink/g) || []).length
+      expect(linkCount).toBe(2)
+    })
+  })
+
+  describe("isolation", () => {
+    it("does not affect the parent Dropdown element", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Nav">
+      <Dropdown.Link to="/docs">Docs</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<Dropdown ")
+      expect(result).toContain("</Dropdown>")
+    })
+
+    it("does not affect Dropdown.Item elements", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Nav">
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+      <Dropdown.Link to="/docs">Docs</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("Dropdown.Item")
+      expect(result).toContain("<DropdownLink")
+    })
+
+    it("does not touch the import statement", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Nav">
+      <Dropdown.Link to="/docs">Docs</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Dropdown } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    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.Link to="/docs">Docs</Dropdown.Link>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("returns null when no Dropdown.Link is present", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Nav">
+      <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/linkToLink.ts

@@ -0,0 +1,24 @@
+import { Transform } from "jscodeshift"
+
+import { transformAttributeName } from "../../shared/actions/transformAttributeName"
+import { transformElementName } from "../../shared/actions/transformElementName"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform: Transform = attributeTransformFactory({
+  targetComponent: "Dropdown.Link",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, options }) => {
+    const toRenamed = transformAttributeName("to", "href", {
+      element,
+      j,
+      options,
+    })
+    const elementRenamed = transformElementName({
+      element,
+      name: "DropdownLink",
+    })
+    return toRenamed || elementRenamed
+  },
+})
+
+export default transform