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

package/src/components/shared/conditions/isChildOf.test.ts

@@ -0,0 +1,89 @@
+import jscodeshift, { JSXElement } from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import { isChildOf } from "./isChildOf"
+
+const j = jscodeshift.withParser("tsx")
+
+function getElements(source: string): {
+  elements: JSXElement[]
+  source: ReturnType<typeof j>
+} {
+  const parsed = j(source)
+  const elements = parsed
+    .find(j.JSXElement)
+    .paths()
+    .map((p) => p.value)
+  return { elements, source: parsed }
+}
+
+describe("isChildOf", () => {
+  it("returns true for a direct child of the parent", () => {
+    const { source, elements } = getElements(`<Dropdown><Divider /></Dropdown>`)
+    const divider = elements.find(
+      (el) =>
+        el.openingElement.name.type === "JSXIdentifier" &&
+        el.openingElement.name.name === "Divider"
+    )!
+    const condition = isChildOf("Dropdown", source, j)
+    expect(condition(divider)).toBe(true)
+  })
+
+  it("returns true for a deeply nested descendant", () => {
+    const { source, elements } = getElements(
+      `<Dropdown><DropdownMenu><Divider /></DropdownMenu></Dropdown>`
+    )
+    const divider = elements.find(
+      (el) =>
+        el.openingElement.name.type === "JSXIdentifier" &&
+        el.openingElement.name.name === "Divider"
+    )!
+    const condition = isChildOf("Dropdown", source, j)
+    expect(condition(divider)).toBe(true)
+  })
+
+  it("returns false for an element outside the parent", () => {
+    const { source, elements } = getElements(`<div><Divider /></div>`)
+    const divider = elements.find(
+      (el) =>
+        el.openingElement.name.type === "JSXIdentifier" &&
+        el.openingElement.name.name === "Divider"
+    )!
+    const condition = isChildOf("Dropdown", source, j)
+    expect(condition(divider)).toBe(false)
+  })
+
+  it("returns false when no parent element exists in source", () => {
+    const { source, elements } = getElements(`<Divider />`)
+    const divider = elements[0]
+    const condition = isChildOf("Dropdown", source, j)
+    expect(condition(divider)).toBe(false)
+  })
+
+  it("returns true for child inside one of multiple parents", () => {
+    const { source, elements } = getElements(
+      `<div><Dropdown><Divider /></Dropdown></div>`
+    )
+    const divider = elements.find(
+      (el) =>
+        el.openingElement.name.type === "JSXIdentifier" &&
+        el.openingElement.name.name === "Divider"
+    )!
+    const condition = isChildOf("Dropdown", source, j)
+    expect(condition(divider)).toBe(true)
+  })
+
+  it("handles sibling elements — child inside parent returns true, sibling does not", () => {
+    const { source, elements } = getElements(
+      `<div><Dropdown><Divider /></Dropdown><Divider /></div>`
+    )
+    const [insideDivider, outsideDivider] = elements.filter(
+      (el) =>
+        el.openingElement.name.type === "JSXIdentifier" &&
+        el.openingElement.name.name === "Divider"
+    )
+    const condition = isChildOf("Dropdown", source, j)
+    expect(condition(insideDivider)).toBe(true)
+    expect(condition(outsideDivider)).toBe(false)
+  })
+})

package/src/components/shared/conditions/isChildOf.ts

@@ -0,0 +1,43 @@
+import { Collection, JSCodeshift, JSXElement } from "jscodeshift"
+
+import { TransformCondition } from "../types"
+
+function elementKey(element: JSXElement): string | null {
+  const loc = element.loc
+  if (!loc) return null
+  return `${loc.start.line}:${loc.start.column}-${loc.end.line}:${loc.end.column}`
+}
+
+function collectDescendantKeys(element: JSXElement, result: Set<string>): void {
+  for (const child of element.children ?? []) {
+    if (child.type === "JSXElement") {
+      const key = elementKey(child)
+      if (key) result.add(key)
+      collectDescendantKeys(child, result)
+    }
+  }
+}
+
+/**
+ * Returns a condition that is true only when the element is a descendant of a
+ * JSX element with the given local name. Matches by source location so the
+ * condition works across separate jscodeshift parses of the same source text.
+ */
+export function isChildOf(
+  parentLocalName: string,
+  source: Collection,
+  j: JSCodeshift
+): TransformCondition {
+  const descendantKeys = new Set<string>()
+
+  source
+    .find(j.JSXOpeningElement, { name: { name: parentLocalName } })
+    .forEach((path) => {
+      collectDescendantKeys(path.parent.value as JSXElement, descendantKeys)
+    })
+
+  return (element: JSXElement) => {
+    const key = elementKey(element)
+    return key !== null && descendantKeys.has(key)
+  }
+}

package/src/components/shared/helpers/unsupportedPropsHelpers.ts

@@ -56,6 +56,7 @@ export const CHECKBOX_RADIO_SUPPORTED_PROPS = [
 
 export const INPUT_SPECIFIC_PROPS = [
   "autoComplete",
+  "autoFocus",
   "autoWidth",
   "defaultValue",
   "description",
@@ -197,3 +198,38 @@ export const DATE_PICKER_SUPPORTED_PROPS = [
   ...COMMON_PROPS,
   ...DATE_PICKER_SPECIFIC_PROPS,
 ]
+
+export const DROPDOWN_SPECIFIC_PROPS = ["onClose", "onOpen"]
+
+export const DROPDOWN_SUPPORTED_PROPS = [
+  ...COMMON_PROPS.filter((prop) => prop !== "size"),
+  ...DROPDOWN_SPECIFIC_PROPS,
+]
+
+export const DROPDOWN_ITEM_BASE_PROPS = [
+  "destructive",
+  "staffOnly",
+  "text",
+  "textValue",
+  "value",
+]
+
+// Dropdown.Item (old) → DropdownAction (new)
+// onSelect→onAction, value→id, text→textValue handled by itemToAction
+export const DROPDOWN_ITEM_SUPPORTED_PROPS = [
+  ...COMMON_PROPS,
+  ...DROPDOWN_ITEM_BASE_PROPS,
+  "disabled",
+  "onAction",
+  "onSelect",
+]
+
+// Dropdown.Link (old) → DropdownLink (new)
+// to→href handled by linkToLink; disabled intentionally NOT included
+export const DROPDOWN_LINK_SUPPORTED_PROPS = [
+  ...COMMON_PROPS,
+  ...DROPDOWN_ITEM_BASE_PROPS,
+  "external",
+  "href",
+  "to",
+]

package/src/index.ts

@@ -2,6 +2,7 @@
 
 import { Command } from "commander"
 
+import { AVAILABLE_CLI_COMPONENTS } from "./availableComponents"
 import { runTransforms } from "./jscodeshiftRunner"
 import { normalizeComponentName } from "./utils/componentNameNormalizer"
 
@@ -11,24 +12,10 @@ program
   .name("tapestry-migration-cli")
   .description("CLI tool for Tapestry migrations")
 
-const COMPONENTS_SET = new Set([
-  "button",
-  "checkbox",
-  "date-picker",
-  "dropdown",
-  "input",
-  "link",
-  "radio",
-  "select",
-  "text-area",
-  "time-field",
-  "toggle-switch",
-])
-
 const COMPONENTS_SENTENCE = new Intl.ListFormat("en", {
   style: "long",
   type: "conjunction",
-}).format([...COMPONENTS_SET])
+}).format([...AVAILABLE_CLI_COMPONENTS])
 
 program
   .command("run")
@@ -53,9 +40,9 @@ program
     "MIGRATION_REPORT.md"
   )
   .action((componentName, options) => {
-    const key = normalizeComponentName(componentName, COMPONENTS_SET)
+    const key = normalizeComponentName(componentName, AVAILABLE_CLI_COMPONENTS)
 
-    if (key && COMPONENTS_SET.has(key)) {
+    if (key && AVAILABLE_CLI_COMPONENTS.has(key)) {
       console.log(`🎨 Migrating ${componentName} components...`)
       console.log(`📁 Target: ${options.path}`)
       console.log(
@@ -65,7 +52,7 @@ program
     } else {
       console.error(`❌ Invalid component: "${componentName}"`)
       console.error(
-        `✅ Available components: ${[...COMPONENTS_SET].join(", ")}`
+        `✅ Available components: ${[...AVAILABLE_CLI_COMPONENTS].join(", ")}`
       )
       process.exit(1)
     }