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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "3.4.1-rc.9",
+  "version": "3.5.0",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
-    "@planningcenter/tapestry": "^3.4.1-rc.9",
+    "@planningcenter/tapestry": "^3.5.0",
     "@planningcenter/tapestry-react": "^4.11.5",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^20.0.0",
@@ -50,5 +50,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8c98e7300610da3514ddea4ea4b2c262441c9912"
+  "gitHead": "958f1f269ca37d78e9a9c0ec66c208a7115331dc"
 }

package/src/availableComponents.ts

@@ -0,0 +1,13 @@
+export const AVAILABLE_CLI_COMPONENTS = new Set([
+  "button",
+  "checkbox",
+  "date-picker",
+  "dropdown",
+  "input",
+  "link",
+  "radio",
+  "select",
+  "text-area",
+  "time-field",
+  "toggle-switch",
+])

package/src/components/dropdown/index.test.ts

@@ -40,7 +40,7 @@ import { Dropdown } from "@planningcenter/tapestry-react"
 
 export default function Test() {
   return (
-    <Dropdown title="Actions">
+    <Dropdown onClose={handleClose}>
       <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
     </Dropdown>
   )
@@ -53,12 +53,252 @@ export default function Test() {
     expect(result).not.toContain("Dropdown.Item")
   })
 
-  it("returns null when there is nothing to transform", () => {
+  it("applies wrapMenu through the chain", () => {
+    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>")
+  })
+
+  it("applies placementIdToMenu through the chain", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown placement="bottom-end">
+      <DropdownMenu>
+        <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+      </DropdownMenu>
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('<DropdownMenu placement="bottom end"')
+    expect(result).not.toMatch(/<Dropdown\s[^>]*placement/)
+  })
+
+  it("applies wrapTrigger through the chain", () => {
     const input = `
 import { Dropdown } from "@planningcenter/tapestry-react"
 
-export default function Test({ children }) {
-  return <Dropdown title="Actions">{children}</Dropdown>
+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('<DropdownButton label="Actions"')
+    expect(result).not.toContain('title="Actions"')
+  })
+
+  it("applies unsupportedPropsDivider through the chain", () => {
+    const input = `
+import { Dropdown, Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown><Divider axis="vertical" /></Dropdown>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration (axis)")
+  })
+
+  it("applies dividerToSeparator through the chain", () => {
+    const input = `
+import { Dropdown, Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown><Divider /></Dropdown>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("<DropdownSeparator")
+    expect(result).not.toContain("<Divider")
+  })
+
+  it("applies unsupportedPropsItem through the chain", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item as={Link} onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration (as)")
+  })
+
+  it("applies unsupportedPropsLink through the chain", () => {
+    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("applies auditSpreadProps through the chain", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown {...props} title="Actions">
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration (spreadAttribute)")
+  })
+
+  it("applies unsupportedProps through the chain", () => {
+    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)")
+  })
+
+  it("applies wrapIconTrigger through the chain", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown icon={{ name: "general.pencil" }} title="Edit options">
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("<DropdownTrigger>")
+    expect(result).toContain("<DropdownIconButton")
+    expect(result).toContain('aria-label="Edit options"')
+    expect(result).toContain("#pencil")
+    expect(result).not.toContain("icon={{ name:")
+    expect(result).not.toContain('title="Edit options"')
+    expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+  })
+
+  it("applies variantToKind through the chain (variant)", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions" variant="outline">
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('kind="secondary"')
+    expect(result).not.toContain('variant="outline"')
+    const dropdownButtonLine = result
+      ?.split("\n")
+      .find((l) => l.includes("<DropdownButton"))
+    expect(dropdownButtonLine).toContain("kind")
+  })
+
+  it("applies variantToKind through the chain (theme)", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions" theme="error">
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('kind="delete"')
+    expect(result).not.toContain('theme="error"')
+    const dropdownButtonLine = result
+      ?.split("\n")
+      .find((l) => l.includes("<DropdownButton"))
+    expect(dropdownButtonLine).toContain("kind")
+  })
+
+  it("applies moveDropdownImport through the chain", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+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('from "@planningcenter/tapestry"')
+    expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+  })
+
+  it("returns null when there is nothing to transform", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry"
+
+export default function Test() {
+  return (
+    <Dropdown onClose={handleClose}>
+      <DropdownTrigger><DropdownButton label="Actions" /></DropdownTrigger>
+      <DropdownMenu>
+        <DropdownAction onAction={fn}>Edit</DropdownAction>
+      </DropdownMenu>
+    </Dropdown>
+  )
 }
     `.trim()
 

package/src/components/dropdown/index.ts

@@ -1,14 +1,40 @@
 import { Transform } from "jscodeshift"
 
+import auditSpreadProps from "./transforms/auditSpreadProps"
+import dividerToSeparator from "./transforms/dividerToSeparator"
 import itemToAction from "./transforms/itemToAction"
 import linkToLink from "./transforms/linkToLink"
+import moveDropdownImport from "./transforms/moveDropdownImport"
+import placementIdToMenu from "./transforms/placementIdToMenu"
+import unsupportedProps from "./transforms/unsupportedProps"
+import unsupportedPropsDivider from "./transforms/unsupportedPropsDivider"
+import unsupportedPropsItem from "./transforms/unsupportedPropsItem"
+import unsupportedPropsLink from "./transforms/unsupportedPropsLink"
+import variantToKind from "./transforms/variantToKind"
+import wrapIconTrigger from "./transforms/wrapIconTrigger"
+import wrapMenu from "./transforms/wrapMenu"
+import wrapTrigger from "./transforms/wrapTrigger"
 
-// When moveDropdownImport is added, it must remain last in the chain.
 const transform: Transform = (fileInfo, api, options) => {
   let currentSource = fileInfo.source
   let hasAnyChanges = false
 
-  const transforms: Transform[] = [linkToLink, itemToAction]
+  const transforms: Transform[] = [
+    unsupportedPropsItem,
+    unsupportedPropsLink,
+    unsupportedPropsDivider,
+    itemToAction,
+    linkToLink,
+    wrapMenu,
+    placementIdToMenu,
+    wrapIconTrigger,
+    wrapTrigger,
+    variantToKind,
+    dividerToSeparator,
+    auditSpreadProps,
+    unsupportedProps,
+    moveDropdownImport,
+  ]
 
   for (const individualTransform of transforms) {
     const result = individualTransform(

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

@@ -0,0 +1,110 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./auditSpreadProps"
+
+const j = jscodeshift.withParser("tsx")
+
+const AUDIT_COMMENT =
+  "TODO: tapestry-migration (spreadAttribute): Spread props can contain unsupported props, please explore usages and migrate as needed."
+
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("auditSpreadProps transform", () => {
+  it("adds a comment to Dropdown with spread props", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onClose: handleClose }
+  return (
+    <Dropdown {...props} title="Actions">
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain(AUDIT_COMMENT)
+    expect(result).toContain("{...props}")
+  })
+
+  it("adds a comment for each spread", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown {...baseProps} {...extraProps} title="Actions">
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    const commentCount = (result?.match(/spreadAttribute/g) || []).length
+    expect(commentCount).toBe(2)
+  })
+
+  it("preserves all other attributes", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions" placement="bottom-start" {...props}>
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('title="Actions"')
+    expect(result).toContain('placement="bottom-start"')
+    expect(result).toContain("{...props}")
+  })
+
+  describe("no changes scenarios", () => {
+    it("returns null when no spread props", () => {
+      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()
+
+      expect(applyTransform(input)).toBe(null)
+    })
+
+    it("returns null when not imported from tapestry-react", () => {
+      const input = `
+import { Dropdown } from "some-other-library"
+
+export default function Test() {
+  return <Dropdown {...props} title="Actions" />
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(null)
+    })
+
+    it("returns null for empty file", () => {
+      expect(applyTransform("")).toBe(null)
+    })
+  })
+})

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

@@ -0,0 +1,10 @@
+import { Transform } from "jscodeshift"
+
+import { commentOnSpreadPropsFactory } from "../../shared/transformFactories/commentOnSpreadPropsFactory"
+
+const transform: Transform = commentOnSpreadPropsFactory({
+  targetComponent: "Dropdown",
+  targetPackage: "@planningcenter/tapestry-react",
+})
+
+export default transform

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

@@ -0,0 +1,134 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./dividerToSeparator"
+
+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("dividerToSeparator transform", () => {
+  it("renames Divider to DropdownSeparator when inside a Dropdown", () => {
+    const input = `
+import { Dropdown, Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown><Divider /></Dropdown>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("<DropdownSeparator")
+    expect(result).not.toContain("<Divider")
+  })
+
+  it("handles non-self-closing Divider inside a Dropdown", () => {
+    const input = `
+import { Dropdown, Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown><Divider></Divider></Dropdown>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("<DropdownSeparator>")
+    expect(result).toContain("</DropdownSeparator>")
+    expect(result).not.toContain("<Divider")
+  })
+
+  it("renames multiple Dividers inside a Dropdown", () => {
+    const input = `
+import { Dropdown, Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown>
+      <Divider />
+      <Divider />
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    const count = (result?.match(/<DropdownSeparator/g) || []).length
+    expect(count).toBe(2)
+    expect(result).not.toContain("<Divider")
+  })
+
+  it("adds DropdownSeparator import from tapestry and removes Divider import when all Dividers are inside a Dropdown", () => {
+    const input = `
+import { Dropdown, Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown><Divider /></Dropdown>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('from "@planningcenter/tapestry"')
+    expect(result).toContain("DropdownSeparator")
+    expect(result).not.toContain(
+      'import { Dropdown, Divider } from "@planningcenter/tapestry-react"'
+    )
+  })
+
+  it("keeps Divider import when some Dividers are outside a Dropdown", () => {
+    const input = `
+import { Dropdown, Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Divider />
+      <Dropdown><Divider /></Dropdown>
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("DropdownSeparator")
+    expect(result).toContain(
+      'import { Dropdown, Divider } from "@planningcenter/tapestry-react"'
+    )
+  })
+
+  describe("no changes scenarios", () => {
+    it("returns null when Divider is not inside a Dropdown", () => {
+      const input = `
+import { Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Divider />
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(null)
+    })
+
+    it("returns null when Divider is not imported from tapestry-react", () => {
+      const input = `
+import { Divider } from "some-other-library"
+
+export default function Test() {
+  return <Divider />
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(null)
+    })
+
+    it("returns null for empty file", () => {
+      expect(applyTransform("")).toBe(null)
+    })
+  })
+})

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

@@ -0,0 +1,67 @@
+import { Transform } from "jscodeshift"
+
+import { transformElementName } from "../../shared/actions/transformElementName"
+import { isChildOf } from "../../shared/conditions/isChildOf"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import {
+  addImport,
+  getImportName,
+  removeImportFromDeclaration,
+} from "../../shared/transformFactories/helpers/manageImports"
+
+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
+
+  const result = attributeTransformFactory({
+    condition: isChildOf(dropdownLocalName, source, j),
+    targetComponent: "Divider",
+    targetPackage: "@planningcenter/tapestry-react",
+    transform: (element) =>
+      transformElementName({ element, name: "DropdownSeparator" }),
+  })(fileInfo, api, options)
+
+  if (!result) return null
+
+  const updatedSource = j(result as string)
+
+  addImport({
+    component: "DropdownSeparator",
+    fromPackage: "@planningcenter/tapestry-react",
+    j,
+    pkg: "@planningcenter/tapestry",
+    source: updatedSource,
+  })
+
+  const dividerLocalName = getImportName(
+    "Divider",
+    "@planningcenter/tapestry-react",
+    { j, source: updatedSource }
+  )
+  if (dividerLocalName) {
+    const dividerStillUsed =
+      updatedSource.find(j.JSXOpeningElement, {
+        name: { name: dividerLocalName },
+      }).length > 0
+
+    if (!dividerStillUsed) {
+      removeImportFromDeclaration(
+        updatedSource.find(j.ImportDeclaration, {
+          source: { value: "@planningcenter/tapestry-react" },
+        }),
+        "Divider"
+      )
+    }
+  }
+
+  return updatedSource.toSource()
+}
+
+export default transform