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

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

@@ -0,0 +1,312 @@
+import {
+  ArrowFunctionExpression,
+  CallExpression,
+  Expression,
+  FunctionExpression,
+  JSCodeshift,
+  JSXElement,
+  JSXExpressionContainer,
+  Transform,
+} from "jscodeshift"
+
+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 `Select.Option` (or aliased equivalent)
+ */
+function isSelectOption(node: JSXElement, localSelectName: string): boolean {
+  const opening = node.openingElement
+  return (
+    opening.name.type === "JSXMemberExpression" &&
+    opening.name.object.type === "JSXIdentifier" &&
+    opening.name.object.name === localSelectName &&
+    opening.name.property.name === "Option"
+  )
+}
+
+/**
+ * Gets the disabled expression if present and not a simple boolean shorthand true.
+ * Returns the expression node, or true for shorthand, or null if not present.
+ */
+function getDisabledExpression(element: JSXElement): Expression | true | null {
+  const attrs = element.openingElement.attributes || []
+  for (const attr of attrs) {
+    if (attr.type !== "JSXAttribute") continue
+    if (attr.name.name !== "disabled") continue
+
+    // Boolean shorthand: <Option disabled />
+    if (!attr.value) return true
+    if (attr.value.type === "JSXExpressionContainer") {
+      const expr = attr.value.expression
+      if (expr.type === "JSXEmptyExpression") return null
+      return expr as Expression
+    }
+    return null
+  }
+  return null
+}
+
+/**
+ * Extracts a single simple expression from JSX children.
+ * Handles: `{item.name}`, plain text.
+ * Returns null for complex multi-element children or JSX elements.
+ */
+function extractChildExpression(
+  children: ChildNode[],
+  j: JSCodeshift
+): Expression | null {
+  const meaningful = getMeaningfulChildren(children)
+
+  if (meaningful.length === 0) return null
+
+  // Single text child
+  if (meaningful.length === 1 && meaningful[0].type === "JSXText") {
+    return j.stringLiteral(meaningful[0].value.trim())
+  }
+
+  // Single expression child like {item.name}
+  if (
+    meaningful.length === 1 &&
+    meaningful[0].type === "JSXExpressionContainer"
+  ) {
+    const expr = (meaningful[0] as JSXExpressionContainer).expression
+    if (expr.type === "JSXEmptyExpression") return null
+    return expr as Expression
+  }
+
+  return null
+}
+
+/**
+ * Extracts JSX children as a ReactNode label expression.
+ * For a single JSXElement child, returns it directly.
+ * For multiple meaningful children, wraps them in a JSX fragment.
+ * Returns null if children cannot be extracted.
+ */
+function extractChildrenAsJSXLabel(
+  children: ChildNode[],
+  j: JSCodeshift
+): Expression | null {
+  const meaningful = getMeaningfulChildren(children)
+  if (meaningful.length === 0) return null
+
+  // Single JSXElement child — use directly
+  if (meaningful.length === 1 && meaningful[0].type === "JSXElement") {
+    return meaningful[0] as unknown as Expression
+  }
+
+  // Multiple children — wrap in a JSX fragment <>...</>
+  const fragment = j.jsxFragment(
+    j.jsxOpeningFragment(),
+    j.jsxClosingFragment(),
+    children.filter((child) => {
+      // Keep everything except pure-whitespace text nodes
+      if (child.type === "JSXText") return child.value.trim().length > 0
+      return true
+    })
+  )
+
+  return fragment as unknown as Expression
+}
+
+function getMeaningfulChildren(children: ChildNode[]): ChildNode[] {
+  return children.filter((child) => {
+    if (child.type === "JSXText") return child.value.trim().length > 0
+    return true
+  })
+}
+
+/**
+ * Extracts the JSXElement from an arrow/function callback body.
+ * Handles: `(item) => <JSX />`, `(item) => (<JSX />)`, and
+ * `(item) => { return <JSX /> }`
+ */
+function getReturnedJSXElement(
+  callback: ArrowFunctionExpression | FunctionExpression
+): JSXElement | null {
+  const { body } = callback
+
+  // Arrow with expression body: (item) => <Select.Option ...>
+  if (body.type === "JSXElement") {
+    return body
+  }
+
+  // Arrow with block body: (item) => { return <Select.Option ...> }
+  if (body.type === "BlockStatement") {
+    const returnStmt = body.body.find((s) => s.type === "ReturnStatement")
+    if (
+      returnStmt &&
+      returnStmt.type === "ReturnStatement" &&
+      returnStmt.argument?.type === "JSXElement"
+    ) {
+      return returnStmt.argument
+    }
+  }
+
+  return null
+}
+
+/**
+ * Checks if a CallExpression is a `.map()` call.
+ */
+function isMapCall(expr: Expression): expr is CallExpression {
+  return (
+    expr.type === "CallExpression" &&
+    expr.callee.type === "MemberExpression" &&
+    expr.callee.property.type === "Identifier" &&
+    expr.callee.property.name === "map"
+  )
+}
+
+const transform: Transform = attributeTransformFactory({
+  condition: andConditions(transformableSelect, hasChildren),
+  targetComponent: "Select",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const children = element.children || []
+
+    const localSelectName =
+      getImportName("Select", "@planningcenter/tapestry-react", {
+        j,
+        source,
+      }) || "Select"
+
+    // Find meaningful children (skip whitespace)
+    const meaningful = children.filter((child: ChildNode) => {
+      if (child.type === "JSXText") return child.value.trim().length > 0
+      return true
+    })
+
+    // Must be exactly one expression container with a .map() call
+    if (meaningful.length !== 1) return false
+    if (meaningful[0].type !== "JSXExpressionContainer") return false
+
+    const container = meaningful[0] as JSXExpressionContainer
+    const expr = container.expression
+    if (expr.type === "JSXEmptyExpression") return false
+    if (!isMapCall(expr as Expression)) return false
+
+    const mapCall = expr as CallExpression
+    const callback = mapCall.arguments[0]
+    if (
+      !callback ||
+      (callback.type !== "ArrowFunctionExpression" &&
+        callback.type !== "FunctionExpression")
+    ) {
+      return false
+    }
+
+    const callbackFn = callback as ArrowFunctionExpression | FunctionExpression
+
+    // Get the returned JSX element from the callback
+    const optionElement = getReturnedJSXElement(callbackFn)
+    if (!optionElement) return false
+    if (!isSelectOption(optionElement, localSelectName)) return false
+
+    // Extract value expression from Select.Option
+    const valueExpr = getAttributeExpression(optionElement, "value")
+    if (!valueExpr) return false
+
+    // Extract label from children — try simple expression first, then JSX
+    const optionChildren = optionElement.children || []
+    const simpleLabelExpr = extractChildExpression(optionChildren, j)
+    const jsxLabelExpr = simpleLabelExpr
+      ? null
+      : extractChildrenAsJSXLabel(optionChildren, j)
+    const labelExpr = simpleLabelExpr || jsxLabelExpr
+
+    if (!labelExpr) return false
+
+    const isComplexLabel = !simpleLabelExpr && !!jsxLabelExpr
+
+    // Build the object properties: { label: ..., value: ... }
+    const properties = [j.objectProperty(j.identifier("label"), labelExpr)]
+
+    // Complex labels require textValue for type-ahead matching
+    if (isComplexLabel) {
+      const textValueProp = j.objectProperty(
+        j.identifier("textValue"),
+        j.stringLiteral("")
+      )
+      // Add a TODO comment to the textValue property
+      const comment = j.commentBlock(
+        " TODO: tapestry-migration (textValue): Provide a plain-text value for type-ahead matching ",
+        true,
+        false
+      )
+      textValueProp.comments = [comment]
+      properties.push(textValueProp)
+    }
+
+    properties.push(j.objectProperty(j.identifier("value"), valueExpr))
+
+    // Handle disabled prop if present
+    const disabledExpr = getDisabledExpression(optionElement)
+    if (disabledExpr === true) {
+      properties.push(
+        j.objectProperty(j.identifier("disabled"), j.booleanLiteral(true))
+      )
+    } else if (disabledExpr !== null) {
+      properties.push(j.objectProperty(j.identifier("disabled"), disabledExpr))
+    }
+
+    // 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))
+      }
+    }
+
+    // Build new .map() callback that returns an object
+    const objectReturn = j.objectExpression(properties)
+    const newCallback = j.arrowFunctionExpression(
+      callbackFn.params,
+      j.parenthesizedExpression(objectReturn)
+    )
+
+    // Build new .map() call: array.map(item => ({ ... }))
+    const newMapCall = j.callExpression(mapCall.callee, [newCallback])
+
+    // Add as options prop
+    element.openingElement.attributes = element.openingElement.attributes || []
+
+    element.openingElement.attributes.push(
+      j.jsxAttribute(
+        j.jsxIdentifier("options"),
+        j.jsxExpressionContainer(newMapCall)
+      )
+    )
+
+    // Complex labels require popover mode via the complex prop
+    if (isComplexLabel) {
+      const hasComplexProp = (element.openingElement.attributes || []).some(
+        (attr) => attr.type === "JSXAttribute" && attr.name.name === "complex"
+      )
+      if (!hasComplexProp) {
+        element.openingElement.attributes.push(
+          j.jsxAttribute(j.jsxIdentifier("complex"))
+        )
+      }
+    }
+
+    // Remove children
+    removeChildren(element)
+
+    return true
+  },
+})
+
+export default transform