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

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)
+    })
+  })
+})

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

@@ -0,0 +1,138 @@
+import { JSXAttribute, JSXElement, Transform } from "jscodeshift"
+
+import { addAttribute } from "../../shared/actions/addAttribute"
+import { addComment } from "../../shared/actions/addComment"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { orConditions } from "../../shared/conditions/orConditions"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const THEME_KIND_MAP: Record<string, Record<string, string>> = {
+  default: {
+    default: "neutral",
+    fill: "neutral",
+    naked: "ghost",
+    outline: "secondary",
+  },
+  error: {
+    default: "delete",
+    fill: "delete",
+    naked: "ghost-delete",
+    outline: "secondary-delete",
+  },
+  neutral: {
+    default: "neutral",
+    fill: "neutral",
+    naked: "ghost",
+    outline: "secondary",
+  },
+  primary: {
+    default: "primary",
+    fill: "primary",
+    naked: "ghost-interaction",
+    outline: "secondary-interaction",
+  },
+}
+
+const KNOWN_TRIGGER_BUTTONS = new Set(["DropdownButton", "DropdownIconButton"])
+
+function normalizeTheme(value: string): string {
+  if (value === "destroy" || value === "delete") return "error"
+  if (value === "info" || value === "success" || value === "interaction")
+    return "primary"
+  return value
+}
+
+function normalizeVariant(value: string): string {
+  if (value === "ghost") return "naked"
+  if (value === "solid") return "fill"
+  return value
+}
+
+function getStaticStringValue(
+  attr: JSXAttribute | undefined,
+  defaultValue: string
+): string | null {
+  if (!attr || !attr.value) return defaultValue
+  if (attr.value.type === "StringLiteral") return attr.value.value
+  return null
+}
+
+function mapToKind(theme: string, variant: string): string | null {
+  return (
+    THEME_KIND_MAP[normalizeTheme(theme)]?.[normalizeVariant(variant)] ?? null
+  )
+}
+
+function findDropdownTrigger(element: JSXElement): JSXElement | undefined {
+  return (element.children ?? []).find(
+    (child): child is JSXElement =>
+      child.type === "JSXElement" &&
+      child.openingElement.name.type === "JSXIdentifier" &&
+      child.openingElement.name.name === "DropdownTrigger"
+  )
+}
+
+function findFirstJSXElementChild(element: JSXElement): JSXElement | undefined {
+  return (element.children ?? []).find(
+    (child): child is JSXElement => child.type === "JSXElement"
+  )
+}
+
+const transform: Transform = attributeTransformFactory({
+  condition: orConditions(hasAttribute("variant"), hasAttribute("theme")),
+  targetComponent: "Dropdown",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const variantAttr = getAttribute({ element, name: "variant" })
+    const themeAttr = getAttribute({ element, name: "theme" })
+
+    const variantValue = getStaticStringValue(variantAttr, "fill")
+    const themeValue = getStaticStringValue(themeAttr, "default")
+
+    if (variantValue === null || themeValue === null) return false
+
+    const mappedKind = mapToKind(themeValue, variantValue)
+    if (!mappedKind) return false
+
+    const triggerChild = findDropdownTrigger(element)
+    if (!triggerChild) return false
+
+    const buttonChild = findFirstJSXElementChild(triggerChild)
+    if (!buttonChild) return false
+
+    const buttonName =
+      buttonChild.openingElement.name.type === "JSXIdentifier"
+        ? buttonChild.openingElement.name.name
+        : null
+
+    if (variantAttr) removeAttribute("variant", { element, j, source })
+    if (themeAttr) removeAttribute("theme", { element, j, source })
+
+    const scope =
+      variantAttr && themeAttr
+        ? "variant/theme"
+        : themeAttr
+          ? "theme"
+          : "variant"
+
+    const existingKind = getAttribute({ element: buttonChild, name: "kind" })
+
+    if (buttonName && KNOWN_TRIGGER_BUTTONS.has(buttonName) && !existingKind) {
+      addAttribute({ element: buttonChild, j, name: "kind", value: mappedKind })
+    } else {
+      addComment({
+        element,
+        j,
+        scope,
+        source,
+        text: `add kind="${mappedKind}" to the trigger button manually`,
+      })
+    }
+
+    return true
+  },
+})
+
+export default transform