@planningcenter/tapestry-migration-cli 3.1.0-rc.6 → 3.1.0-rc.7

package/src/components/input/transforms/inputLabelToLabelProp.ts

@@ -0,0 +1,203 @@
+import { JSXElement, JSXText, Transform } from "jscodeshift"
+
+type JSXChild = NonNullable<JSXElement["children"]>[number]
+
+import { addAttribute } from "../../shared/actions/addAttribute"
+import { addComment } from "../../shared/actions/addComment"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { extractTextContent } from "../../shared/helpers/childrenToLabelHelpers"
+import { getImportName } from "../../shared/transformFactories/helpers/manageImports"
+
+const SCOPE = "inputLabelToLabelProp"
+
+function isInputLabelElement(node: JSXChild, localName: string): boolean {
+  return (
+    node.type === "JSXElement" &&
+    node.openingElement.name.type === "JSXMemberExpression" &&
+    node.openingElement.name.object.type === "JSXIdentifier" &&
+    node.openingElement.name.object.name === localName &&
+    node.openingElement.name.property.name === "InputLabel"
+  )
+}
+
+function isInputElement(node: JSXChild, localName: string): boolean {
+  return (
+    node.type === "JSXElement" &&
+    node.openingElement.name.type === "JSXIdentifier" &&
+    node.openingElement.name.name === localName
+  )
+}
+
+function isHorizontalAxis(stackViewElement: JSXElement): boolean {
+  const axisAttr = getAttribute({ element: stackViewElement, name: "axis" })
+  if (!axisAttr) return false
+  const value = axisAttr.value
+  if (!value) return false
+  if (value.type === "StringLiteral" && value.value === "horizontal")
+    return true
+  if (
+    value.type === "JSXExpressionContainer" &&
+    value.expression.type === "StringLiteral" &&
+    value.expression.value === "horizontal"
+  )
+    return true
+  return false
+}
+
+function hasRenderSideProp(inputElement: JSXElement): boolean {
+  const attrs = inputElement.openingElement.attributes || []
+  return attrs.some(
+    (attr) =>
+      attr.type === "JSXAttribute" &&
+      attr.name.type === "JSXIdentifier" &&
+      (attr.name.name === "renderLeft" || attr.name.name === "renderRight")
+  )
+}
+
+const transform: Transform = (fileInfo, api) => {
+  const j = api.jscodeshift
+  const source = j(fileInfo.source)
+
+  const inputLocalName = getImportName(
+    "Input",
+    "@planningcenter/tapestry-react",
+    {
+      j,
+      source,
+    }
+  )
+  if (!inputLocalName) return null
+
+  const stackViewLocalName = getImportName(
+    "StackView",
+    "@planningcenter/tapestry-react",
+    {
+      j,
+      source,
+    }
+  )
+  if (!stackViewLocalName) return null
+
+  let hasChanges = 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 !== stackViewLocalName) return
+
+    if (isHorizontalAxis(el)) return
+
+    const children = el.children || []
+    let i = 0
+
+    while (i < children.length) {
+      const child = children[i]
+
+      // Skip whitespace JSXText nodes
+      if (child.type === "JSXText" && child.value.trim() === "") {
+        i++
+        continue
+      }
+
+      // Find next non-whitespace sibling
+      let nextIdx = i + 1
+      while (
+        nextIdx < children.length &&
+        children[nextIdx].type === "JSXText" &&
+        (children[nextIdx] as JSXText).value.trim() === ""
+      ) {
+        nextIdx++
+      }
+
+      if (nextIdx >= children.length) {
+        i++
+        continue
+      }
+
+      const nextChild = children[nextIdx]
+
+      let inputLabelEl: JSXElement | null = null
+      let inputEl: JSXElement | null = null
+      let labelFirst = false
+
+      if (
+        isInputLabelElement(child, inputLocalName) &&
+        isInputElement(nextChild, inputLocalName)
+      ) {
+        inputLabelEl = child as JSXElement
+        inputEl = nextChild as JSXElement
+        labelFirst = true
+      } else if (
+        isInputElement(child, inputLocalName) &&
+        isInputLabelElement(nextChild, inputLocalName)
+      ) {
+        inputEl = child as JSXElement
+        inputLabelEl = nextChild as JSXElement
+        labelFirst = false
+      }
+
+      if (!inputLabelEl || !inputEl) {
+        i++
+        continue
+      }
+
+      // Skip if Input has renderLeft or renderRight
+      if (hasRenderSideProp(inputEl)) {
+        i++
+        continue
+      }
+
+      const { isSimpleText, textContent } = extractTextContent(
+        inputLabelEl.children || []
+      )
+
+      if (!isSimpleText) {
+        addComment({
+          element: inputEl,
+          j,
+          scope: SCOPE,
+          source,
+          text: "InputLabel children are complex and cannot be auto-converted to a label prop. Please migrate manually.",
+        })
+        hasChanges = true
+        i = nextIdx + 1
+        continue
+      }
+
+      const existingLabel = getAttribute({ element: inputEl, name: "label" })
+      if (existingLabel) {
+        addComment({
+          element: inputEl,
+          j,
+          scope: SCOPE,
+          source,
+          text: `Input already has a label prop. The InputLabel had text: "${textContent}". Please review manually.`,
+        })
+        hasChanges = true
+        i = nextIdx + 1
+        continue
+      }
+
+      addAttribute({ element: inputEl, j, name: "label", value: textContent })
+
+      if (labelFirst) {
+        // InputLabel is at i, Input is at nextIdx — remove InputLabel + whitespace between
+        children.splice(i, nextIdx - i)
+        // Input is now at i; advance past it
+      } else {
+        // Input is at i, InputLabel is at nextIdx — remove whitespace + InputLabel after Input
+        children.splice(i + 1, nextIdx - i)
+        // Input is still at i; advance past it
+      }
+
+      hasChanges = true
+      i++
+    }
+  })
+
+  return hasChanges ? source.toSource() : null
+}
+
+export default transform

package/src/components/input/transforms/mergeFieldIntoInput.test.ts

@@ -0,0 +1,391 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./mergeFieldIntoInput"
+
+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("mergeFieldIntoInput transform", () => {
+  describe("basic prop merging", () => {
+    it("merges label prop from Field into Input", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Field label="Name"><Input /></Field>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('label="Name"')
+      expect(result).toContain("<Input")
+    })
+
+    it("renames feedbackText to description on Input", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field feedbackText="Required"><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).not.toContain("feedbackText")
+      expect(result).toContain('description="Required"')
+    })
+
+    it("copies state prop as-is to Input", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field state="error"><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('state="error"')
+    })
+
+    it("preserves dynamic label value", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label={labelText}><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain("label={labelText}")
+    })
+  })
+
+  describe("unsupported props", () => {
+    it("adds TODO comment for helpContent and removes Field", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field helpContent="Help"><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain("TODO: tapestry-migration (mergeFieldIntoInput)")
+      expect(result).toContain("helpContent")
+      expect(result).toContain("not supported by Input")
+    })
+
+    it("adds a comment per unsupported prop when multiple unsupported props are present", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field inline compact spacing={8}><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain("inline")
+      expect(result).toContain("compact")
+      expect(result).toContain("spacing")
+    })
+  })
+
+  describe("Field with no props", () => {
+    it("unwraps Field with no props cleanly", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain("<Input")
+      expect(result).not.toContain("TODO")
+    })
+  })
+
+  describe("conflict detection", () => {
+    it("adds warning comment when Input already has label and keeps Input's existing label", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Name"><Input label="Other" /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('label="Other"')
+      expect(result).toContain("TODO: tapestry-migration (mergeFieldIntoInput)")
+      expect(result).toContain("already has label")
+    })
+
+    it("merges label from Field when Input has description but not label", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Name"><Input description="x" /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('label="Name"')
+      expect(result).toContain('description="x"')
+    })
+  })
+
+  describe("multiple children", () => {
+    it("adds comment to Input and leaves Field when Field has multiple children", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field><Input /><button /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("<Field")
+      expect(result).toContain("TODO: tapestry-migration (mergeFieldIntoInput)")
+      expect(result).toContain("multiple children")
+    })
+  })
+
+  describe("non-Input child", () => {
+    it("returns null when Field contains only a non-Input child", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field><textarea /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("import cleanup", () => {
+    it("removes Field from import specifiers when all Fields are converted", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Name"><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("Field")
+      expect(result).toContain("Input")
+    })
+
+    it("removes entire import declaration when Field was the only specifier", () => {
+      const input = `
+import { Field } from "@planningcenter/tapestry-react"
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("{ Field }")
+    })
+
+    it("keeps Field in import when some Fields cannot be converted", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Field label="Name"><Input /></Field>
+      <Field><Input /><button /></Field>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("Field")
+    })
+  })
+
+  describe("full prop set", () => {
+    it("merges label, feedbackText, state and flags helpContent as unsupported", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Name" feedbackText="Required" state="error" helpContent="Help">
+      <Input />
+    </Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('label="Name"')
+      expect(result).toContain('description="Required"')
+      expect(result).toContain('state="error"')
+      expect(result).toContain("helpContent")
+      expect(result).toContain("not supported by Input")
+    })
+  })
+
+  describe("not from tapestry-react", () => {
+    it("returns null when Field is not imported from tapestry-react", () => {
+      const input = `
+import { Field } from "some-other-library"
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Name"><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when Input is not imported from tapestry-react", () => {
+      const input = `
+import { Field } from "@planningcenter/tapestry-react"
+import { Input } from "some-other-library"
+
+function Test() {
+  return (
+    <Field label="Name"><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when neither import exists", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button label="Click" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("aliased imports", () => {
+    it("handles aliased Field import", () => {
+      const input = `
+import { Field as TapField, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <TapField label="Name"><Input /></TapField>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<TapField")
+      expect(result).toContain('label="Name"')
+    })
+
+    it("handles aliased Input import", () => {
+      const input = `
+import { Field, Input as TapInput } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Name"><TapInput /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('label="Name"')
+      expect(result).toContain("<TapInput")
+    })
+  })
+})