@planningcenter/tapestry-migration-cli 3.4.1 → 3.6.0

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

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

@@ -0,0 +1,336 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./wrapIconTrigger"
+
+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("wrapIconTrigger transform", () => {
+  describe("object-form icon", () => {
+    it("converts icon object + title to DropdownTrigger + DropdownIconButton", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown icon={{ name: "general.pencil" }} title="Edit options">
+      <DropdownMenu />
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<DropdownTrigger>")
+      expect(result).toContain("</DropdownTrigger>")
+      expect(result).toContain("<DropdownIconButton")
+      expect(result).toContain('aria-label="Edit options"')
+      expect(result).toContain("Symbol")
+      expect(result).toContain("#pencil")
+      expect(result).toContain("aria-hidden")
+      expect(result).not.toContain('icon={{ name: "general.pencil" }}')
+      expect(result).not.toContain('title="Edit options"')
+    })
+
+    it("adds Symbol, sprite, DropdownIconButton, and DropdownTrigger imports", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown icon={{ name: "general.pencil" }} title="Edit"><DropdownMenu /></Dropdown>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('from "@planningcenter/icons/symbol"')
+      expect(result).toContain(
+        'from "@planningcenter/icons/sprites/general.svg"'
+      )
+      expect(result).toContain("DropdownIconButton")
+      expect(result).toContain("DropdownTrigger")
+      expect(result).toContain('from "@planningcenter/tapestry"')
+    })
+
+    it("merges DropdownIconButton and DropdownTrigger into an existing tapestry import", () => {
+      const input = `
+import { Dropdown, DropdownMenu } from "@planningcenter/tapestry-react"
+import { DropdownAction } from "@planningcenter/tapestry"
+
+export default function Test() {
+  return (
+    <Dropdown icon={{ name: "general.pencil" }} title="Edit">
+      <DropdownMenu />
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("DropdownAction")
+      expect(result).toContain("DropdownIconButton")
+      expect(result).toContain("DropdownTrigger")
+      const tapestryImportMatches = result?.match(
+        /from "@planningcenter\/tapestry"/g
+      )
+      expect(tapestryImportMatches?.length).toBe(1)
+    })
+  })
+
+  describe("string-form icon", () => {
+    it("converts string icon to Symbol with correct id", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown icon="general.pencil" title="Edit"><DropdownMenu /></Dropdown>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("Symbol")
+      expect(result).toContain("#pencil")
+      expect(result).not.toContain('"general.pencil"')
+    })
+  })
+
+  describe("icon name conversion", () => {
+    it("converts camelCase icon name to kebab-case symbol id", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown icon={{ name: "general.downCaret" }} title="Sort"><DropdownMenu /></Dropdown>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("#down-caret")
+      expect(result).not.toContain("downCaret")
+    })
+
+    it("converts bare icon name (no collection) to general collection", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown icon="pencil" title="Edit"><DropdownMenu /></Dropdown>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("#pencil")
+      expect(result).toContain("general")
+    })
+
+    it("uses the correct sprite for a non-general collection", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown icon={{ name: "services.pencilEdit" }} title="Edit"><DropdownMenu /></Dropdown>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("#pencil-edit")
+      expect(result).toContain(
+        'from "@planningcenter/icons/sprites/services.svg"'
+      )
+      expect(result).not.toContain("general.svg")
+      expect(result).not.toContain(
+        'from "@planningcenter/icons/sprites/general.svg"'
+      )
+    })
+  })
+
+  describe("TODO comment on icon attribute", () => {
+    it("attaches install/verify TODO to the icon attribute", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown icon={{ name: "general.pencil" }} title="Edit"><DropdownMenu /></Dropdown>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (icon):")
+      expect(result).toContain("@planningcenter/icons")
+    })
+  })
+
+  describe("dynamic icon fallback", () => {
+    it("passes dynamic icon as-is and attaches a verify TODO to the icon attribute", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown icon={myIcon} title="Edit"><DropdownMenu /></Dropdown>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<DropdownTrigger>")
+      expect(result).toContain("DropdownIconButton")
+      expect(result).toContain("myIcon")
+      expect(result).toContain("TODO: tapestry-migration (icon):")
+      expect(result).not.toContain('from "@planningcenter/icons/symbol"')
+      expect(result).not.toContain("general.svg")
+    })
+  })
+
+  describe("aria-label handling", () => {
+    it("uses title value as aria-label", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown icon={{ name: "general.pencil" }} title="Bulk edit options"><DropdownMenu /></Dropdown>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('aria-label="Bulk edit options"')
+    })
+
+    it("uses dynamic title expression as aria-label", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown icon={{ name: "general.pencil" }} title={menuTitle}><DropdownMenu /></Dropdown>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("aria-label={menuTitle}")
+    })
+
+    it("emits TODO and omits aria-label when no title is present", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown icon={{ name: "general.pencil" }}><DropdownMenu /></Dropdown>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("DropdownIconButton")
+      expect(result).toContain("TODO: tapestry-migration (icon):")
+      expect(result).toContain("aria-label")
+      expect(result).not.toContain("aria-label=")
+    })
+  })
+
+  describe("prop handling", () => {
+    it("preserves other Dropdown props", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown
+      icon={{ name: "general.pencil" }}
+      title="Edit"
+      placement="bottom-start"
+      disabled={disabled}
+    >
+      <DropdownMenu />
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('placement="bottom-start"')
+      expect(result).toContain("disabled={disabled}")
+    })
+
+    it("does not touch the tapestry-react import", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown icon={{ name: "general.pencil" }} title="Edit"><DropdownMenu /></Dropdown>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('from "@planningcenter/tapestry-react"')
+    })
+  })
+
+  describe("Symbol import conflict", () => {
+    it("uses aliased name when Symbol is already imported from another package", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+import { Symbol } from "some-other-package"
+
+export default function Test() {
+  return <Dropdown icon={{ name: "general.pencil" }} title="Edit"><DropdownMenu /></Dropdown>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<TSymbol")
+      expect(result).toContain("Symbol as TSymbol")
+      expect(result).not.toContain("icon={<Symbol")
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("returns null when icon is absent", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown title="Actions"><DropdownMenu /></Dropdown>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(null)
+    })
+
+    it("returns null when triggerElement is present (deferred to wrapTrigger)", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown icon={{ name: "general.pencil" }} triggerElement={<MyButton />}>
+      <DropdownMenu />
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(null)
+    })
+
+    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 icon={{ name: "general.pencil" }} title="Edit"><DropdownMenu /></Dropdown>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(null)
+    })
+
+    it("returns null for empty file", () => {
+      expect(applyTransform("")).toBe(null)
+    })
+  })
+})

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

@@ -0,0 +1,233 @@
+import { Collection, JSCodeshift, JSXAttribute, Transform } from "jscodeshift"
+
+import { addComment } from "../../shared/actions/addComment"
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { andConditions } from "../../shared/conditions/andConditions"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { notCondition } from "../../shared/conditions/notCondition"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { addImport } from "../../shared/transformFactories/helpers/manageImports"
+
+function parseIconName(name: string): { collection: string; symbolId: string } {
+  const dotIndex = name.indexOf(".")
+  if (dotIndex === -1) {
+    return {
+      collection: "general",
+      symbolId: name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(),
+    }
+  }
+  return {
+    collection: name.slice(0, dotIndex),
+    symbolId: name
+      .slice(dotIndex + 1)
+      .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+      .toLowerCase(),
+  }
+}
+
+function resolveStaticIconName(iconAttr: JSXAttribute): string | null {
+  const attrValue = iconAttr.value
+  if (!attrValue) return null
+
+  if (attrValue.type === "StringLiteral") {
+    return attrValue.value
+  }
+
+  if (
+    attrValue.type === "JSXExpressionContainer" &&
+    attrValue.expression.type === "ObjectExpression"
+  ) {
+    const nameProp = attrValue.expression.properties.find(
+      (prop) =>
+        prop.type === "ObjectProperty" &&
+        ((prop.key.type === "Identifier" && prop.key.name === "name") ||
+          (prop.key.type === "StringLiteral" && prop.key.value === "name")) &&
+        prop.value.type === "StringLiteral"
+    ) as { value: { value: string } } | undefined
+
+    if (nameProp) return nameProp.value.value
+  }
+
+  return null
+}
+
+function addSpriteImport(
+  source: Collection,
+  j: JSCodeshift,
+  collection: string
+): void {
+  const spritePath = `@planningcenter/icons/sprites/${collection}.svg`
+  const alreadyImported =
+    source
+      .find(j.ImportDeclaration, {
+        source: { value: spritePath },
+      })
+      .filter((path) =>
+        (path.value.specifiers ?? []).some(
+          (spec) => spec.type === "ImportDefaultSpecifier"
+        )
+      ).length > 0
+
+  if (alreadyImported) return
+
+  const importDecl = j.importDeclaration(
+    [j.importDefaultSpecifier(j.identifier(collection))],
+    j.stringLiteral(spritePath)
+  )
+
+  const lastImport = source.find(j.ImportDeclaration).at(-1)
+  if (lastImport.length > 0) {
+    lastImport.insertAfter(importDecl)
+  } else {
+    source.find(j.Program).get("body", 0).insertBefore(importDecl)
+  }
+}
+
+const transform: Transform = attributeTransformFactory({
+  condition: andConditions(
+    hasAttribute("icon"),
+    notCondition(hasAttribute("triggerElement"))
+  ),
+  targetComponent: "Dropdown",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const iconAttr = getAttribute({ element, name: "icon" })
+    if (!iconAttr) return false
+
+    const titleAttr = getAttribute({ element, name: "title" })
+
+    const resolvedIconName = resolveStaticIconName(iconAttr)
+    const parsedIcon =
+      resolvedIconName !== null ? parseIconName(resolvedIconName) : null
+    let iconJSXAttr: JSXAttribute
+
+    if (parsedIcon !== null) {
+      const { collection, symbolId } = parsedIcon
+
+      const symbolName = addImport({
+        component: "Symbol",
+        fromPackage: "@planningcenter/tapestry-react",
+        j,
+        pkg: "@planningcenter/icons/symbol",
+        source,
+      })
+      addSpriteImport(source, j, collection)
+
+      const symbolTemplateLiteral = j.templateLiteral(
+        [
+          j.templateElement({ cooked: "", raw: "" }, false),
+          j.templateElement(
+            { cooked: `#${symbolId}`, raw: `#${symbolId}` },
+            true
+          ),
+        ],
+        [j.identifier(collection)]
+      )
+
+      const symbolElement = j.jsxElement(
+        j.jsxOpeningElement(
+          j.jsxIdentifier(symbolName),
+          [
+            j.jsxAttribute(
+              j.jsxIdentifier("symbol"),
+              j.jsxExpressionContainer(symbolTemplateLiteral)
+            ),
+            j.jsxAttribute(j.jsxIdentifier("aria-hidden")),
+          ],
+          true
+        ),
+        null,
+        []
+      )
+
+      iconJSXAttr = j.jsxAttribute(
+        j.jsxIdentifier("icon"),
+        j.jsxExpressionContainer(symbolElement)
+      )
+
+      addCommentToAttribute({
+        attribute: iconJSXAttr,
+        j,
+        text: `install @planningcenter/icons if not already a dependency; verify the symbol id against the ${collection} sprite`,
+      })
+    } else {
+      const originalExpr =
+        iconAttr.value?.type === "JSXExpressionContainer" &&
+        iconAttr.value.expression.type !== "JSXEmptyExpression"
+          ? iconAttr.value.expression
+          : j.identifier("undefined")
+
+      iconJSXAttr = j.jsxAttribute(
+        j.jsxIdentifier("icon"),
+        j.jsxExpressionContainer(originalExpr)
+      )
+      addCommentToAttribute({
+        attribute: iconJSXAttr,
+        j,
+        text: "verify this icon value and replace with <Symbol symbol={`${general}#<name>`} aria-hidden /> from @planningcenter/icons/symbol if needed",
+      })
+    }
+
+    let ariaLabelAttr: JSXAttribute | null = null
+    if (titleAttr?.value) {
+      ariaLabelAttr = j.jsxAttribute(
+        j.jsxIdentifier("aria-label"),
+        titleAttr.value
+      )
+    } else {
+      addComment({
+        element,
+        j,
+        scope: "icon",
+        source,
+        text: "aria-label is required on DropdownIconButton — add a descriptive label",
+      })
+    }
+
+    const iconButtonAttrs: JSXAttribute[] = []
+    if (ariaLabelAttr) iconButtonAttrs.push(ariaLabelAttr)
+    iconButtonAttrs.push(iconJSXAttr)
+
+    const iconButtonElement = j.jsxElement(
+      j.jsxOpeningElement(
+        j.jsxIdentifier("DropdownIconButton"),
+        iconButtonAttrs,
+        true
+      ),
+      null,
+      []
+    )
+
+    const triggerWrapper = j.jsxElement(
+      j.jsxOpeningElement(j.jsxIdentifier("DropdownTrigger"), [], false),
+      j.jsxClosingElement(j.jsxIdentifier("DropdownTrigger")),
+      [iconButtonElement]
+    )
+
+    removeAttribute("icon", { element, j, source })
+    removeAttribute("title", { element, j, source })
+
+    element.children = [triggerWrapper, ...(element.children ?? [])]
+
+    addImport({
+      component: "DropdownIconButton",
+      fromPackage: "@planningcenter/tapestry-react",
+      j,
+      pkg: "@planningcenter/tapestry",
+      source,
+    })
+    addImport({
+      component: "DropdownTrigger",
+      fromPackage: "@planningcenter/tapestry-react",
+      j,
+      pkg: "@planningcenter/tapestry",
+      source,
+    })
+
+    return true
+  },
+})
+
+export default transform