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

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

@@ -0,0 +1,252 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./unsupportedProps"
+
+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("unsupportedProps transform", () => {
+  describe("unsupported prop detection", () => {
+    it("should add comment for css prop with specific message", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select css={{ color: 'red' }} emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (css)")
+      expect(result).toContain(
+        "CSS prop is not supported. Use className or style prop instead."
+      )
+    })
+
+    it("should add comment for tooltip prop with specific message", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select tooltip={{ content: "Help" }} emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (tooltip)")
+      expect(result).toContain("unsupported anti-pattern")
+    })
+
+    it("should skip Select with multiple prop (handled by skipMultipleSelect)", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select multiple emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toContain("multiple")
+      expect(result).toContain('emptyValue="Pick"')
+    })
+
+    it("should add comment for renderValue prop", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select renderValue={(opts) => opts.map(o => o.label)} emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (renderValue)")
+      expect(result).toContain("renderValue is not supported")
+    })
+
+    it("should add comments for removed props", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select
+      keepInView
+      lockScrollWhileOpen
+      popoverProps={{ maxHeight: 300 }}
+      renderTo="body"
+      placeholder="Pick"
+      options={[]}
+      label="Test"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (keepInView)")
+      expect(result).toContain("TODO: tapestry-migration (lockScrollWhileOpen)")
+      expect(result).toContain("TODO: tapestry-migration (popoverProps)")
+      expect(result).toContain("TODO: tapestry-migration (renderTo)")
+    })
+  })
+
+  describe("supported props", () => {
+    it("should not add comments for supported select props", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select
+      disabled
+      name="select"
+      onChange={() => {}}
+      value="test"
+      placeholder="Pick one"
+      options={options}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+
+    it("should not add comments for common props", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select
+      className="test"
+      id="select"
+      style={{ color: 'red' }}
+      tabIndex={0}
+      label="Test"
+      placeholder="Pick"
+      options={[]}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+
+    it("should not add comments for aria props", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select
+      aria-label="Test select"
+      aria-describedby="description"
+      placeholder="Pick"
+      options={[]}
+      label="Test"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+
+    it("should not add comments for data props", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select
+      data-testid="select"
+      data-cy="test-select"
+      placeholder="Pick"
+      options={[]}
+      label="Test"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect Select without unsupported props", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select label="Test" placeholder="Pick" options={[]} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not affect other components", () => {
+      const input = `
+import { Button, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button css={{ color: 'red' }}>Click me</Button>
+      <Select label="Test" placeholder="Pick" options={[]} />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+
+    it("should handle mixed supported and unsupported props", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select
+      disabled
+      css={{ color: 'red' }}
+      tooltip={{ content: "help" }}
+      label="Test"
+      placeholder="Pick"
+      options={[]}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (css)")
+      expect(result).toContain("TODO: tapestry-migration (tooltip)")
+      expect(result).toContain("disabled")
+      expect(result).toContain('label="Test"')
+    })
+  })
+})

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

@@ -0,0 +1,44 @@
+import { JSXAttribute, Transform } from "jscodeshift"
+
+import { addCommentToUnsupportedProps } from "../../shared/actions/addCommentToUnsupportedProps"
+import { SELECT_SUPPORTED_PROPS } from "../../shared/helpers/unsupportedPropsHelpers"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { transformableSelect } from "../transformableSelect"
+
+const transform: Transform = attributeTransformFactory({
+  condition: transformableSelect,
+  targetComponent: "Select",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const UNSUPPORTED_PROPS = (element.openingElement.attributes || [])
+      .filter(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          attr.name.type === "JSXIdentifier" &&
+          !SELECT_SUPPORTED_PROPS.includes(attr.name.name as string) &&
+          !(attr.name.name as string).startsWith("aria-") &&
+          !(attr.name.name as string).startsWith("data-")
+      )
+      .map((attr) => (attr as JSXAttribute).name.name as string)
+
+    return addCommentToUnsupportedProps({
+      element,
+      j,
+      messageSuffix: (prop) => {
+        if (prop === "css") {
+          return "\n * CSS prop is not supported. Use className or style prop instead.\n"
+        }
+        if (prop === "tooltip") {
+          return "\n * Wrapping a select in a tooltip is an unsupported anti-pattern.\n"
+        }
+        if (prop === "renderValue") {
+          return "\n * renderValue is not supported. The select displays the selected option label.\n"
+        }
+        return ""
+      },
+      props: UNSUPPORTED_PROPS,
+    })
+  },
+})
+
+export default transform

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

@@ -0,0 +1,26 @@
+import { Expression, JSXElement } from "jscodeshift"
+
+/**
+ * Gets the expression AST node for a JSX attribute value.
+ * Returns the expression node for dynamic values, or a StringLiteral for static ones.
+ */
+export function getAttributeExpression(
+  element: JSXElement,
+  attrName: string
+): Expression | 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 has no expression
+    if (attr.value.type === "StringLiteral") return attr.value
+    if (attr.value.type === "JSXExpressionContainer") {
+      const expr = attr.value.expression
+      if (expr.type === "JSXEmptyExpression") return null
+      return expr as Expression
+    }
+    return null
+  }
+  return null
+}

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

@@ -96,9 +96,26 @@ export const TYPE_SPECIFIC_PROPS: Record<string, string[]> = {
   url: ["dirname", "inputMode", "list", "pattern"],
 }
 
-export const INPUT_SUPPORTED_PROPS = [
+export const INPUT_SUPPORTED_PROPS = [...COMMON_PROPS, ...INPUT_SPECIFIC_PROPS]
+
+export const SELECT_SPECIFIC_PROPS = [
+  "complex",
+  "defaultValue",
+  "description",
+  "disabled",
+  "form",
+  "invalid",
+  "name",
+  "onChange",
+  "options",
+  "placeholder",
+  "required",
+  "value",
+]
+
+export const SELECT_SUPPORTED_PROPS = [
   ...COMMON_PROPS,
-  ...INPUT_SPECIFIC_PROPS,
+  ...SELECT_SPECIFIC_PROPS,
   ...STYLE_PROP_NAMES_WITHOUT_CSS,
 ]
 

package/src/components/shared/transformFactories/mergeFieldFactory.ts

@@ -0,0 +1,244 @@
+import { JSXElement, JSXText, Transform } from "jscodeshift"
+
+import { addComment } from "../actions/addComment"
+import { TransformCondition } from "../types"
+import {
+  getImportName,
+  removeImportFromDeclaration,
+} from "./helpers/manageImports"
+
+interface MergeFieldFactoryOptions {
+  condition?: TransformCondition
+  targetComponent: string
+}
+
+export function mergeFieldFactory({
+  condition,
+  targetComponent,
+}: MergeFieldFactoryOptions): Transform {
+  const SCOPE = `mergeFieldInto${targetComponent}`
+
+  const transform: Transform = (fileInfo, api) => {
+    const j = api.jscodeshift
+    const source = j(fileInfo.source)
+
+    const fieldLocalName = getImportName(
+      "Field",
+      "@planningcenter/tapestry-react",
+      { j, source }
+    )
+    if (!fieldLocalName) return null
+
+    const targetLocalName = getImportName(
+      targetComponent,
+      "@planningcenter/tapestry-react",
+      { j, source }
+    )
+    if (!targetLocalName) return null
+
+    let hasChanges = false
+    let anyFieldRemoved = false
+
+    source.find(j.JSXElement).forEach((path) => {
+      const el = path.value
+      const opening = el.openingElement
+
+      if (opening.name.type !== "JSXIdentifier") return
+      if (opening.name.name !== fieldLocalName) return
+
+      const elementChildren = (el.children || []).filter(
+        (child) =>
+          child.type !== "JSXText" || (child as JSXText).value.trim() !== ""
+      )
+
+      const targetChildren = elementChildren.filter((child) => {
+        if (child.type !== "JSXElement") return false
+        const childOpening = (child as JSXElement).openingElement
+        return (
+          childOpening.name.type === "JSXIdentifier" &&
+          childOpening.name.name === targetLocalName
+        )
+      }) as JSXElement[]
+
+      // Case: exactly 1 child and it is the target — merge props and unwrap
+      if (elementChildren.length === 1 && targetChildren.length === 1) {
+        const targetEl = targetChildren[0]
+
+        // Skip if condition fails (e.g. Input with renderLeft/renderRight, Select with multiple)
+        if (condition && !condition(targetEl)) return
+
+        const fieldAttrs = opening.attributes || []
+
+        // Bail out if Field has spread props — we can't know what they contain
+        const hasFieldSpreads = fieldAttrs.some(
+          (attr) => attr.type === "JSXSpreadAttribute"
+        )
+        if (hasFieldSpreads) {
+          addComment({
+            element: targetEl,
+            j,
+            scope: SCOPE,
+            source,
+            text: `Field has spread props that cannot be auto-merged into ${targetComponent}. Please migrate manually.`,
+          })
+          hasChanges = true
+          return
+        }
+
+        for (const attr of fieldAttrs) {
+          if (attr.type !== "JSXAttribute") continue
+          if (attr.name.type !== "JSXIdentifier") continue
+
+          const attrName = attr.name.name
+          const targetAttrs = targetEl.openingElement.attributes || []
+
+          if (attrName === "label") {
+            const hasLabel = targetAttrs.some(
+              (a) =>
+                a.type === "JSXAttribute" &&
+                a.name?.type === "JSXIdentifier" &&
+                a.name.name === "label"
+            )
+            if (hasLabel) {
+              addComment({
+                element: targetEl,
+                j,
+                scope: SCOPE,
+                source,
+                text: `Field had label prop but ${targetComponent} already has label. Please migrate manually.`,
+              })
+            } else {
+              targetEl.openingElement.attributes.push(attr)
+            }
+          } else if (attrName === "feedbackText") {
+            const hasDescription = targetAttrs.some(
+              (a) =>
+                a.type === "JSXAttribute" &&
+                a.name?.type === "JSXIdentifier" &&
+                a.name.name === "description"
+            )
+            if (hasDescription) {
+              addComment({
+                element: targetEl,
+                j,
+                scope: SCOPE,
+                source,
+                text: `Field had feedbackText prop but ${targetComponent} already has description. Please migrate manually.`,
+              })
+            } else {
+              const newAttr = j.jsxAttribute(
+                j.jsxIdentifier("description"),
+                attr.value
+              )
+              targetEl.openingElement.attributes.push(newAttr)
+            }
+          } else if (attrName === "state") {
+            const hasState = targetAttrs.some(
+              (a) =>
+                a.type === "JSXAttribute" &&
+                a.name?.type === "JSXIdentifier" &&
+                a.name.name === "state"
+            )
+            if (hasState) {
+              addComment({
+                element: targetEl,
+                j,
+                scope: SCOPE,
+                source,
+                text: `Field had state prop but ${targetComponent} already has state. Please migrate manually.`,
+              })
+            } else {
+              targetEl.openingElement.attributes.push(attr)
+            }
+          } else if (attrName === "key") {
+            const hasKey = targetAttrs.some(
+              (a) =>
+                a.type === "JSXAttribute" &&
+                a.name?.type === "JSXIdentifier" &&
+                a.name.name === "key"
+            )
+            if (!hasKey) {
+              targetEl.openingElement.attributes.push(attr)
+            }
+          } else {
+            // Unsupported prop — add comment to target
+            addComment({
+              element: targetEl,
+              j,
+              scope: SCOPE,
+              source,
+              text: `Field prop '${attrName}' is not supported by ${targetComponent}. Please migrate manually.`,
+            })
+          }
+        }
+
+        const parent = path.parent?.value
+        if (parent?.children) {
+          const idx = parent.children.indexOf(el)
+          if (idx === -1) return
+          parent.children.splice(idx, 1, ...(el.children || []))
+        } else {
+          // Root JSX (e.g. directly inside return parens) — use path.replace
+          const nonWsChildren = (el.children || []).filter(
+            (child) =>
+              child.type !== "JSXText" || (child as JSXText).value.trim() !== ""
+          )
+          if (nonWsChildren.length === 1) {
+            path.replace(nonWsChildren[0])
+          } else {
+            path.replace(
+              j.jsxFragment(
+                j.jsxOpeningFragment(),
+                j.jsxClosingFragment(),
+                el.children || []
+              )
+            )
+          }
+        }
+        hasChanges = true
+        anyFieldRemoved = true
+        return
+      }
+
+      // Case: more than 1 non-whitespace child — comment each target child, leave Field
+      if (elementChildren.length > 1) {
+        for (const child of targetChildren) {
+          // Skip if condition fails
+          if (condition && !condition(child)) continue
+          addComment({
+            element: child,
+            j,
+            scope: SCOPE,
+            source,
+            text: `Field has multiple children and cannot be auto-merged into ${targetComponent}. Please migrate manually.`,
+          })
+          hasChanges = true
+        }
+        return
+      }
+
+      // Case: exactly 1 child but not the target — skip without comment
+    })
+
+    // Remove Field from imports only if all Field usages were converted
+    if (anyFieldRemoved) {
+      const stillUsesField =
+        source.find(j.JSXOpeningElement, {
+          name: { name: fieldLocalName },
+        }).length > 0
+
+      if (!stillUsesField) {
+        const fieldImports = source.find(j.ImportDeclaration, {
+          source: { value: "@planningcenter/tapestry-react" },
+        })
+        for (let i = 0; i < fieldImports.length; i++) {
+          removeImportFromDeclaration(fieldImports.at(i), "Field")
+        }
+      }
+    }
+
+    return hasChanges ? source.toSource() : null
+  }
+
+  return transform
+}