@planningcenter/tapestry-migration-cli 3.1.0-rc.8 → 3.1.0

package/src/components/select/transforms/childrenToOptions.ts

@@ -0,0 +1,295 @@
+import {
+  JSCodeshift,
+  JSXElement,
+  JSXExpressionContainer,
+  JSXText,
+  Transform,
+} from "jscodeshift"
+
+import { addComment } from "../../shared/actions/addComment"
+import { removeChildren } from "../../shared/actions/removeChildren"
+import { andConditions } from "../../shared/conditions/andConditions"
+import { hasChildren } from "../../shared/conditions/hasChildren"
+import { getAttributeExpression } from "../../shared/helpers/getAttributeExpression"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { getImportName } from "../../shared/transformFactories/helpers/manageImports"
+import { transformableSelect } from "../transformableSelect"
+
+type ChildNode = JSXElement["children"][number]
+
+/**
+ * Checks if a JSX element is a specific member expression like `Select.Option`
+ */
+function isMemberExpression(
+  node: ChildNode,
+  objectName: string,
+  propertyName: string
+): node is JSXElement {
+  if (!node || node.type !== "JSXElement") return false
+  const opening = node.openingElement
+  return (
+    opening.name.type === "JSXMemberExpression" &&
+    opening.name.object.type === "JSXIdentifier" &&
+    opening.name.object.name === objectName &&
+    opening.name.property.name === propertyName
+  )
+}
+
+/**
+ * Extracts a string value from a JSX attribute.
+ * Returns null if the value is dynamic/complex.
+ */
+function getStaticAttributeValue(
+  element: JSXElement,
+  attrName: string
+): string | null {
+  const attrs = element.openingElement.attributes || []
+  for (const attr of attrs) {
+    if (attr.type !== "JSXAttribute") continue
+    if (attr.name.name !== attrName) continue
+
+    if (!attr.value) return null // boolean shorthand
+    if (attr.value.type === "StringLiteral") return attr.value.value
+    if (attr.value.type === "JSXExpressionContainer") {
+      const expr = attr.value.expression
+      if (expr.type === "StringLiteral") return expr.value
+    }
+    return null
+  }
+  return null
+}
+
+/**
+ * Checks if a JSX attribute is a boolean shorthand (e.g. `disabled`)
+ */
+function hasBooleanAttribute(element: JSXElement, attrName: string): boolean {
+  const attrs = element.openingElement.attributes || []
+  for (const attr of attrs) {
+    if (attr.type !== "JSXAttribute") continue
+    if (attr.name.name !== attrName) continue
+    // Boolean shorthand: <Option disabled />
+    if (!attr.value) return true
+    // Explicit true: <Option disabled={true} />
+    if (
+      attr.value.type === "JSXExpressionContainer" &&
+      attr.value.expression.type === "BooleanLiteral" &&
+      attr.value.expression.value === true
+    )
+      return true
+  }
+  return false
+}
+
+/**
+ * Extracts plain text from JSX children.
+ * Returns null if children are complex (JSX expressions, elements, etc.)
+ */
+function extractSimpleTextChildren(children: ChildNode[]): string | null {
+  const meaningful = children.filter((child) => {
+    if (child.type === "JSXText") {
+      return child.value.trim().length > 0
+    }
+    return true
+  })
+
+  if (meaningful.length === 0) return null
+
+  // All meaningful children must be text
+  const allText = meaningful.every((child) => child.type === "JSXText")
+  if (!allText) return null
+
+  return meaningful.map((child) => (child as JSXText).value.trim()).join(" ")
+}
+
+/**
+ * Attempts to convert a Select.Option element into an options array entry AST node.
+ * Returns null if the option is too complex for automated conversion.
+ */
+function convertOptionToObjectExpression(
+  optionElement: JSXElement,
+  j: JSCodeshift
+) {
+  const value = getStaticAttributeValue(optionElement, "value")
+  if (value === null) return null
+
+  const children = optionElement.children || []
+  const labelText = extractSimpleTextChildren(children)
+  if (labelText === null) return null
+
+  const properties = [
+    j.objectProperty(j.identifier("label"), j.stringLiteral(labelText)),
+    j.objectProperty(j.identifier("value"), j.stringLiteral(value)),
+  ]
+
+  if (hasBooleanAttribute(optionElement, "disabled")) {
+    properties.push(
+      j.objectProperty(j.identifier("disabled"), j.booleanLiteral(true))
+    )
+  }
+
+  // Preserve data-* attributes on the option object
+  const attrs = optionElement.openingElement.attributes || []
+  for (const attr of attrs) {
+    if (attr.type !== "JSXAttribute") continue
+    const name = attr.name.name as string
+    if (!name.startsWith("data-")) continue
+    const expr = getAttributeExpression(optionElement, name)
+    if (expr) {
+      properties.push(j.objectProperty(j.stringLiteral(name), expr))
+    }
+  }
+
+  return j.objectExpression(properties)
+}
+
+/**
+ * Attempts to convert a Select.OptionGroup element into a group object AST node.
+ */
+function convertOptionGroupToObjectExpression(
+  groupElement: JSXElement,
+  localSelectName: string,
+  j: JSCodeshift
+) {
+  const title = getStaticAttributeValue(groupElement, "title")
+  if (title === null) return null
+
+  const childOptions: ReturnType<typeof convertOptionToObjectExpression>[] = []
+  const children = groupElement.children || []
+
+  for (const child of children) {
+    if (child.type === "JSXText" && child.value.trim() === "") continue
+    if (!isMemberExpression(child, localSelectName, "Option")) return null
+
+    const optObj = convertOptionToObjectExpression(child, j)
+    if (optObj === null) return null
+    childOptions.push(optObj)
+  }
+
+  if (childOptions.length === 0) return null
+
+  return j.objectExpression([
+    j.objectProperty(j.identifier("label"), j.stringLiteral(title)),
+    j.objectProperty(j.identifier("options"), j.arrayExpression(childOptions)),
+  ])
+}
+
+const transform: Transform = attributeTransformFactory({
+  condition: andConditions(transformableSelect, hasChildren),
+  targetComponent: "Select",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const children = element.children || []
+
+    // Get the local name of Select for member expression matching
+    const localSelectName =
+      getImportName("Select", "@planningcenter/tapestry-react", {
+        j,
+        source,
+      }) || "Select"
+
+    // Check if any children are dynamic (.map expressions, ternaries, etc.)
+    const hasDynamicChildren = children.some(
+      (child: ChildNode) =>
+        child.type === "JSXExpressionContainer" &&
+        (child as JSXExpressionContainer).expression.type !==
+          "JSXEmptyExpression"
+    )
+
+    if (hasDynamicChildren) {
+      addComment({
+        element,
+        j,
+        scope: "children",
+        source,
+        text: 'Select children contain dynamic expressions. Manually convert to the options prop format: options={[{ value: "...", label: "..." }]}',
+      })
+      return true
+    }
+
+    // Check for Select.Value or Select.Inline children
+    const hasUnsupportedSubcomponents = children.some(
+      (child: ChildNode) =>
+        isMemberExpression(child, localSelectName, "Value") ||
+        isMemberExpression(child, localSelectName, "Inline")
+    )
+
+    if (hasUnsupportedSubcomponents) {
+      addComment({
+        element,
+        j,
+        scope: "children",
+        source,
+        text: "Select.Value and Select.Inline are not supported in the new Select. Manually convert children to the options prop format.",
+      })
+      return true
+    }
+
+    // Filter to meaningful children (skip whitespace-only JSXText)
+    const meaningfulChildren = children.filter((child: ChildNode) => {
+      if (child.type === "JSXText") return child.value.trim().length > 0
+      return true
+    })
+
+    // Attempt to convert all children to option objects
+    const optionObjects: ReturnType<typeof convertOptionToObjectExpression>[] =
+      []
+    let allConvertible = true
+
+    for (const child of meaningfulChildren) {
+      if (isMemberExpression(child, localSelectName, "Option")) {
+        const obj = convertOptionToObjectExpression(child, j)
+        if (obj === null) {
+          allConvertible = false
+          break
+        }
+        optionObjects.push(obj)
+      } else if (isMemberExpression(child, localSelectName, "OptionGroup")) {
+        const obj = convertOptionGroupToObjectExpression(
+          child,
+          localSelectName,
+          j
+        )
+        if (obj === null) {
+          allConvertible = false
+          break
+        }
+        optionObjects.push(obj)
+      } else {
+        // Unknown child type
+        allConvertible = false
+        break
+      }
+    }
+
+    if (!allConvertible || optionObjects.length === 0) {
+      addComment({
+        element,
+        j,
+        scope: "children",
+        source,
+        text: 'Select children could not be automatically converted. Manually convert to the options prop format: options={[{ value: "...", label: "..." }]}',
+      })
+      return true
+    }
+
+    // Build the options prop
+    const optionsAttr = j.jsxAttribute(
+      j.jsxIdentifier("options"),
+      j.jsxExpressionContainer(j.arrayExpression(optionObjects))
+    )
+
+    element.openingElement.attributes = element.openingElement.attributes || []
+    element.openingElement.attributes.push(optionsAttr)
+
+    // Remove children
+    removeChildren(element)
+
+    // Clean up unused Select subcomponent usage
+    // (the import cleanup happens in moveSelectImport or will be handled
+    // by removeUnusedImport if Select.Option/etc. are no longer used)
+
+    return true
+  },
+})
+
+export default transform

package/src/components/select/transforms/convertLegacyOptions.test.ts

@@ -0,0 +1,150 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./convertLegacyOptions"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string {
+  const fileInfo = { path: "test.tsx", source }
+  const result = transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+  return result || source
+}
+
+describe("convertLegacyOptions transform", () => {
+  describe("optgroup to options key rename", () => {
+    it("should rename optgroup key to options in static array", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select
+      emptyValue="Pick"
+      options={[
+        { label: "Group", optgroup: [{ label: "A", value: "a" }] }
+      ]}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("options: [")
+      expect(result).not.toContain("optgroup")
+    })
+
+    it("should handle mixed flat options and groups", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select
+      emptyValue="Pick"
+      options={[
+        { label: "Standalone", value: "s" },
+        { label: "Group", optgroup: [{ label: "A", value: "a" }] }
+      ]}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("options: [")
+      expect(result).not.toContain("optgroup")
+      expect(result).toContain('value: "s"')
+    })
+
+    it("should handle multiple groups", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select
+      emptyValue="Pick"
+      options={[
+        { label: "Group 1", optgroup: [{ label: "A", value: "a" }] },
+        { label: "Group 2", optgroup: [{ label: "B", value: "b" }] }
+      ]}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("optgroup")
+      const optionsMatches = result.match(/options: \[/g)
+      expect(optionsMatches).toHaveLength(2)
+    })
+  })
+
+  describe("no-op cases", () => {
+    it("should not transform options without optgroup key", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select
+      emptyValue="Pick"
+      options={[
+        { label: "Apple", value: "apple" },
+        { label: "Orange", value: "orange" }
+      ]}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not transform Select without options prop", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not transform other components", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button options={[{ optgroup: [] }]}>Click</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should add comment for dynamic options variable", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select emptyValue="Pick" options={dynamicOptions} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain("options format has changed")
+    })
+  })
+})

package/src/components/select/transforms/convertLegacyOptions.ts

@@ -0,0 +1,105 @@
+import { JSXAttribute, ObjectExpression, Transform } from "jscodeshift"
+
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { andConditions } from "../../shared/conditions/andConditions"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { transformableSelect } from "../transformableSelect"
+
+/**
+ * Checks if an ObjectExpression has an `optgroup` property (legacy grouped options format).
+ */
+function hasOptgroupProperty(obj: ObjectExpression): boolean {
+  return obj.properties.some(
+    (prop) =>
+      prop.type === "ObjectProperty" &&
+      prop.key.type === "Identifier" &&
+      prop.key.name === "optgroup"
+  )
+}
+
+/**
+ * Renames the `optgroup` key to `options` in a legacy option group object.
+ * Legacy: { label: "Group", optgroup: [...] }
+ * New:    { label: "Group", options: [...] }
+ */
+function renameOptgroupToOptions(obj: ObjectExpression): boolean {
+  let changed = false
+  for (const prop of obj.properties) {
+    if (
+      prop.type === "ObjectProperty" &&
+      prop.key.type === "Identifier" &&
+      prop.key.name === "optgroup"
+    ) {
+      prop.key.name = "options"
+      changed = true
+    }
+  }
+  return changed
+}
+
+const transform: Transform = attributeTransformFactory({
+  condition: andConditions(transformableSelect, hasAttribute("options")),
+  targetComponent: "Select",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const attrs = element.openingElement.attributes || []
+    const optionsAttr = attrs.find(
+      (attr): attr is JSXAttribute =>
+        attr.type === "JSXAttribute" && (attr.name.name as string) === "options"
+    )
+
+    if (!optionsAttr || !optionsAttr.value) return false
+
+    // Only handle static array literals
+    let arrayExpr
+    if (
+      optionsAttr.value.type === "JSXExpressionContainer" &&
+      optionsAttr.value.expression.type === "ArrayExpression"
+    ) {
+      arrayExpr = optionsAttr.value.expression
+    } else if (optionsAttr.value.type === "JSXExpressionContainer") {
+      // Dynamic value — flag for manual review if it's not an array literal
+      const expr = optionsAttr.value.expression
+      if (
+        expr.type !== "ArrayExpression" &&
+        expr.type !== "JSXEmptyExpression"
+      ) {
+        addCommentToAttribute({
+          attribute: optionsAttr,
+          j,
+          text: "The options format has changed. Legacy optgroup arrays should use the 'options' key instead of 'optgroup'. Review and update manually.",
+        })
+        return true
+      }
+      return false
+    } else {
+      return false
+    }
+
+    // Check if any element in the array uses the legacy `optgroup` key
+    let hasLegacyFormat = false
+    for (const el of arrayExpr.elements) {
+      if (el && el.type === "ObjectExpression" && hasOptgroupProperty(el)) {
+        hasLegacyFormat = true
+        break
+      }
+    }
+
+    if (!hasLegacyFormat) return false
+
+    // Rename `optgroup` → `options` in each group object
+    let changed = false
+    for (const el of arrayExpr.elements) {
+      if (el && el.type === "ObjectExpression") {
+        if (renameOptgroupToOptions(el)) {
+          changed = true
+        }
+      }
+    }
+
+    return changed
+  },
+})
+
+export default transform

package/src/components/select/transforms/convertStyleProps.test.ts

@@ -0,0 +1,73 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./convertStyleProps"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string, options = {}) {
+  const fileInfo = { path: "test.tsx", source }
+  const result = transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    options
+  ) as string | null
+  return result || source
+}
+
+describe("convertStyleProps transform", () => {
+  it("should convert visible={false} to display: none", () => {
+    const source = `
+import { Select } from "@planningcenter/tapestry-react"
+
+export function TestComponent() {
+  return <Select visible={false} label="Test" placeholder="Pick" options={[]} />
+}
+    `
+
+    const result = applyTransform(source)
+    expect(result).toContain("style={{")
+    expect(result).toContain('display: "none"')
+    expect(result).not.toContain("visible={false}")
+  })
+
+  it("should remove visible={true} with no style changes", () => {
+    const source = `
+import { Select } from "@planningcenter/tapestry-react"
+
+export function TestComponent() {
+  return <Select visible={true} label="Test" placeholder="Pick" options={[]} />
+}
+    `
+
+    const result = applyTransform(source)
+    expect(result).not.toContain("visible={true}")
+    expect(result).not.toContain("style={{")
+  })
+
+  it("should remove style props like marginTop", () => {
+    const source = `
+import { Select } from "@planningcenter/tapestry-react"
+
+export function TestComponent() {
+  return <Select marginTop={16} label="Test" placeholder="Pick" options={[]} />
+}
+    `
+
+    const result = applyTransform(source)
+    expect(result).not.toContain("marginTop=")
+  })
+
+  it("should not affect non-tapestry-react imports", () => {
+    const source = `
+import { Select } from "other-library"
+
+export function TestComponent() {
+  return <Select marginTop={16} label="Test" />
+}
+    `
+
+    const result = applyTransform(source)
+    expect(result).toContain("marginTop={16}")
+  })
+})

package/src/components/select/transforms/convertStyleProps.ts

@@ -0,0 +1,12 @@
+import { stackViewPlugin } from "../../../stubs/stackViewPlugin"
+import { stylePropTransformFactory } from "../../shared/transformFactories/stylePropTransformFactory"
+import { transformableSelect } from "../transformableSelect"
+
+export default stylePropTransformFactory({
+  condition: transformableSelect,
+  plugin: stackViewPlugin,
+  stylesToKeep: ["visible"],
+  stylesToRemove: [],
+  targetComponent: "Select",
+  targetPackage: "@planningcenter/tapestry-react",
+})