@planningcenter/tapestry-migration-cli 3.4.1 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "3.4.1",
+  "version": "3.6.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",
+    "@planningcenter/tapestry": "^3.6.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": "f005d23b54d1a95f03e0823e6ab0d139af17cead"
+  "gitHead": "0009d96d1c39de5978d2cdea8334ca5120974137"
 }

package/src/availableComponents.ts

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

package/src/components/button/transforms/tooltipToWrapper.test.ts

@@ -84,9 +84,9 @@ export default function Test() {
 
       expect(result).toContain('<Tooltip {...{title: "Help"}}')
       expect(result).toContain("refAsInnerRef={false}")
-      expect(result).toContain(
-        '<Button variant="primary" onClick={handler} disabled>Save</Button>'
-      )
+      expect(result).toContain('variant="primary"')
+      expect(result).toContain("onClick={handler}")
+      expect(result).toContain("disabled>Save</Button>")
       expect(result).not.toContain("tooltip=")
     })
 
@@ -323,6 +323,53 @@ export default function Test({ items }) {
       expect(result).not.toContain("tooltip=")
     })
 
+    it("should add a TODO comment when the Button is disabled", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button tooltip={{ title: "Save" }} disabled>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("TODO: tapestry-migration (disabled):")
+      expect(result).toContain("<Tooltip")
+      expect(result).toContain("disabled>Save</Button>")
+      expect(result).not.toContain("tooltip=")
+    })
+
+    it("should add a TODO comment when disabled has an expression value", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test({ isDisabled }) {
+  return <Button tooltip={{ title: "Save" }} disabled={isDisabled}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("TODO: tapestry-migration (disabled):")
+      expect(result).toContain("disabled={isDisabled}")
+    })
+
+    it("should not add a disabled TODO comment when the Button is not disabled", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button tooltip={{ title: "Save" }}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Tooltip")
+      expect(result).not.toContain("TODO: tapestry-migration (disabled):")
+    })
+
     it("should handle empty tooltip attribute", () => {
       const input = `
 import { Button } from "@planningcenter/tapestry-react"

package/src/components/button/transforms/tooltipToWrapper.ts

@@ -1,5 +1,7 @@
 import { addAttribute } from "../../shared/actions/addAttribute"
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
 import { createWrapper } from "../../shared/actions/createWrapper"
+import { getAttribute } from "../../shared/actions/getAttribute"
 import { getAttributeValueAsProps } from "../../shared/actions/getAttributeValueAsProps"
 import { removeAttribute } from "../../shared/actions/removeAttribute"
 import { hasAttribute } from "../../shared/conditions/hasAttribute"
@@ -19,6 +21,11 @@ const transform = attributeTransformFactory({
 
     removeAttribute("tooltip", { element, j, source })
 
+    // Capture the original Button's `disabled` attribute before `createWrapper`
+    // replaces `element` in the AST, so the comment below clearly attaches to
+    // the original Button attribute node.
+    const disabledAttribute = getAttribute({ element, name: "disabled" })
+
     const wrapperElement = createWrapper({
       conflictAlias: "TRTooltip",
       element,
@@ -36,6 +43,17 @@ const transform = attributeTransformFactory({
       value: false,
     })
 
+    if (disabledAttribute) {
+      addCommentToAttribute({
+        attribute: disabledAttribute,
+        j,
+        text:
+          "This Button is disabled. Disabled buttons don't emit pointer or focus events, " +
+          "so the wrapping Tooltip will not appear. Keep the button interactive (e.g. handle " +
+          "the disabled state without the native `disabled` attribute) so the Tooltip can trigger.",
+      })
+    }
+
     return true
   },
 })

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

@@ -200,6 +200,73 @@ export default function Test() {
     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"

package/src/components/dropdown/index.ts

@@ -10,6 +10,8 @@ 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"
 
@@ -25,7 +27,9 @@ const transform: Transform = (fileInfo, api, options) => {
     linkToLink,
     wrapMenu,
     placementIdToMenu,
+    wrapIconTrigger,
     wrapTrigger,
+    variantToKind,
     dividerToSeparator,
     auditSpreadProps,
     unsupportedProps,

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

@@ -50,12 +50,17 @@ describe("placementIdToMenu transform", () => {
       expect(result).toContain('<DropdownMenu placement={"bottom end"}')
     })
 
-    it("moves dynamic placement expression and adds TODO comment", () => {
+    it("moves dynamic placement expression and adds TODO comment inside Dropdown before DropdownMenu", () => {
       const result = applyTransform(withMenu("placement={myPlacement}"))
       expect(result).toContain("<DropdownMenu placement={myPlacement}")
       expect(result).toContain(
         "TODO: tapestry-migration (placement): placement is a dynamic expression"
       )
+      const todoIndex = result!.indexOf("TODO: tapestry-migration (placement)")
+      const dropdownOpenIndex = result!.indexOf("<Dropdown ")
+      const dropdownMenuIndex = result!.indexOf("<DropdownMenu")
+      expect(todoIndex).toBeGreaterThan(dropdownOpenIndex)
+      expect(todoIndex).toBeLessThan(dropdownMenuIndex)
     })
   })
 

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

@@ -80,7 +80,7 @@ const transform: Transform = attributeTransformFactory({
       moveAttr("placement", placementAttr, element, menuChild, { j, source })
       if (isDynamic) {
         addComment({
-          element,
+          element: menuChild,
           j,
           scope: "placement",
           source,

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

@@ -0,0 +1,292 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./variantToKind"
+
+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
+}
+
+function wrappedInput(
+  attrs: string,
+  buttonElement = '<DropdownButton label="Actions" />'
+) {
+  return `
+import { Dropdown } from "@planningcenter/tapestry-react"
+import { DropdownButton, DropdownMenu, DropdownTrigger } from "@planningcenter/tapestry"
+
+export default function Test() {
+  return (
+    <Dropdown ${attrs} onClose={fn}>
+      <DropdownTrigger>
+        ${buttonElement}
+      </DropdownTrigger>
+      <DropdownMenu>
+        <DropdownAction id="edit" onAction={fn}>Edit</DropdownAction>
+      </DropdownMenu>
+    </Dropdown>
+  )
+}
+  `.trim()
+}
+
+describe("variantToKind transform", () => {
+  describe("variant-only mappings (default theme)", () => {
+    it('maps variant="outline" to kind="secondary"', () => {
+      const result = applyTransform(wrappedInput('variant="outline"'))
+      expect(result).toContain('kind="secondary"')
+      expect(result).not.toContain('variant="outline"')
+    })
+
+    it('maps variant="fill" to kind="neutral"', () => {
+      const result = applyTransform(wrappedInput('variant="fill"'))
+      expect(result).toContain('kind="neutral"')
+      expect(result).not.toContain('variant="fill"')
+    })
+
+    it('maps variant="naked" to kind="ghost"', () => {
+      const result = applyTransform(wrappedInput('variant="naked"'))
+      expect(result).toContain('kind="ghost"')
+      expect(result).not.toContain('variant="naked"')
+    })
+
+    it('normalizes variant="ghost" to kind="ghost"', () => {
+      const result = applyTransform(wrappedInput('variant="ghost"'))
+      expect(result).toContain('kind="ghost"')
+      expect(result).not.toContain('variant="ghost"')
+    })
+
+    it('normalizes variant="solid" to kind="neutral" (solid→fill→neutral)', () => {
+      const result = applyTransform(wrappedInput('variant="solid"'))
+      expect(result).toContain('kind="neutral"')
+      expect(result).not.toContain('variant="solid"')
+    })
+  })
+
+  describe("theme-only mappings (default variant)", () => {
+    it('maps theme="error" to kind="delete"', () => {
+      const result = applyTransform(wrappedInput('theme="error"'))
+      expect(result).toContain('kind="delete"')
+      expect(result).not.toContain('theme="error"')
+    })
+
+    it('maps theme="primary" to kind="primary"', () => {
+      const result = applyTransform(wrappedInput('theme="primary"'))
+      expect(result).toContain('kind="primary"')
+      expect(result).not.toContain('theme="primary"')
+    })
+
+    it('normalizes theme="destroy" to kind="delete"', () => {
+      const result = applyTransform(wrappedInput('theme="destroy"'))
+      expect(result).toContain('kind="delete"')
+      expect(result).not.toContain('theme="destroy"')
+    })
+
+    it('normalizes theme="interaction" to kind="primary"', () => {
+      const result = applyTransform(wrappedInput('theme="interaction"'))
+      expect(result).toContain('kind="primary"')
+      expect(result).not.toContain('theme="interaction"')
+    })
+  })
+
+  describe("theme + variant combined", () => {
+    it('maps theme="error" variant="outline" to kind="secondary-delete"', () => {
+      const result = applyTransform(
+        wrappedInput('theme="error" variant="outline"')
+      )
+      expect(result).toContain('kind="secondary-delete"')
+      expect(result).not.toContain('theme="error"')
+      expect(result).not.toContain('variant="outline"')
+    })
+
+    it('maps theme="error" variant="naked" to kind="ghost-delete"', () => {
+      const result = applyTransform(
+        wrappedInput('theme="error" variant="naked"')
+      )
+      expect(result).toContain('kind="ghost-delete"')
+    })
+
+    it('maps theme="primary" variant="outline" to kind="secondary-interaction"', () => {
+      const result = applyTransform(
+        wrappedInput('theme="primary" variant="outline"')
+      )
+      expect(result).toContain('kind="secondary-interaction"')
+    })
+  })
+
+  describe("kind placement", () => {
+    it("adds kind to the DropdownButton, not to Dropdown", () => {
+      const result = applyTransform(wrappedInput('variant="outline"'))
+      const dropdownButtonLine = result
+        ?.split("\n")
+        .find((l) => l.includes("<DropdownButton"))
+      expect(dropdownButtonLine).toContain("kind")
+    })
+
+    it("emits TODO and does not duplicate kind when button already has kind", () => {
+      const result = applyTransform(
+        wrappedInput(
+          'variant="outline"',
+          '<DropdownButton label="Actions" kind="primary" />'
+        )
+      )
+      expect(result).not.toContain('variant="outline"')
+      expect(result).toContain("TODO: tapestry-migration (variant):")
+      expect(result).toContain("secondary")
+      const buttonLine = result
+        ?.split("\n")
+        .find((l) => l.includes("<DropdownButton"))
+      expect(buttonLine).toContain('kind="primary"')
+      expect(buttonLine).not.toContain('kind="secondary"')
+    })
+
+    it('maps variant="outline" to kind="secondary" on DropdownIconButton', () => {
+      const result = applyTransform(
+        wrappedInput(
+          'variant="outline"',
+          '<DropdownIconButton aria-label="Edit" icon={icon} />'
+        )
+      )
+      expect(result).toContain('kind="secondary"')
+      expect(result).not.toContain('variant="outline"')
+    })
+  })
+
+  describe("complex/custom trigger child", () => {
+    it("removes variant and emits TODO for unknown trigger button", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+import { DropdownMenu, DropdownTrigger } from "@planningcenter/tapestry"
+
+export default function Test() {
+  return (
+    <Dropdown variant="outline" onClose={fn}>
+      <DropdownTrigger>
+        <MyCustomButton label="Actions" />
+      </DropdownTrigger>
+      <DropdownMenu />
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain('variant="outline"')
+      expect(result).toContain("TODO: tapestry-migration (variant):")
+      expect(result).toContain("secondary")
+      const customButtonLine = result
+        ?.split("\n")
+        .find((l) => l.includes("<MyCustomButton"))
+      expect(customButtonLine).not.toContain("kind")
+    })
+
+    it("uses scope=theme when only theme is present on custom trigger", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+import { DropdownMenu, DropdownTrigger } from "@planningcenter/tapestry"
+
+export default function Test() {
+  return (
+    <Dropdown theme="error" onClose={fn}>
+      <DropdownTrigger>
+        <MyCustomButton label="Actions" />
+      </DropdownTrigger>
+      <DropdownMenu />
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (theme):")
+      expect(result).not.toContain("TODO: tapestry-migration (variant):")
+    })
+
+    it("uses scope=variant/theme when both are present on custom trigger", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+import { DropdownMenu, DropdownTrigger } from "@planningcenter/tapestry"
+
+export default function Test() {
+  return (
+    <Dropdown theme="error" variant="outline" onClose={fn}>
+      <DropdownTrigger>
+        <MyCustomButton label="Actions" />
+      </DropdownTrigger>
+      <DropdownMenu />
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (variant/theme):")
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("returns null for dynamic variant expression", () => {
+      expect(applyTransform(wrappedInput("variant={buttonVariant}"))).toBe(null)
+    })
+
+    it("returns null for dynamic theme expression", () => {
+      expect(applyTransform(wrappedInput("theme={buttonTheme}"))).toBe(null)
+    })
+
+    it("returns null for an unmapped variant value", () => {
+      expect(applyTransform(wrappedInput('variant="extra-large"'))).toBe(null)
+    })
+
+    it("returns null for an unmapped theme value", () => {
+      expect(applyTransform(wrappedInput('theme="unknown-theme"'))).toBe(null)
+    })
+
+    it("returns null when no DropdownTrigger child exists", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown variant="outline" onClose={fn}>
+      <DropdownMenu />
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(null)
+    })
+
+    it("returns null when neither variant nor theme is present", () => {
+      expect(applyTransform(wrappedInput(""))).toBe(null)
+    })
+
+    it("returns null when Dropdown is not imported from tapestry-react", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry"
+
+export default function Test() {
+  return (
+    <Dropdown variant="outline">
+      <DropdownTrigger><DropdownButton label="Actions" /></DropdownTrigger>
+      <DropdownMenu />
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(null)
+    })
+
+    it("returns null for empty file", () => {
+      expect(applyTransform("")).toBe(null)
+    })
+  })
+})