@planningcenter/tapestry-migration-cli 3.1.0-rc.2 → 3.1.0-rc.21

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

@@ -0,0 +1,319 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./inputLabelToLabelProp"
+
+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("inputLabelToLabelProp transform", () => {
+  describe("successful conversions", () => {
+    it("InputLabel before Input → label prop added, InputLabel removed", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView>
+      <Input.InputLabel htmlFor="f1">Name</Input.InputLabel>
+      <Input id="f1" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="Name"')
+      expect(result).not.toContain("<Input.InputLabel")
+    })
+
+    it("Input before InputLabel → label prop added, InputLabel removed", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView>
+      <Input id="f1" />
+      <Input.InputLabel htmlFor="f1">Email</Input.InputLabel>
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="Email"')
+      expect(result).not.toContain("<Input.InputLabel")
+    })
+
+    it("no axis prop (default vertical) → transforms", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView>
+      <Input.InputLabel>Address</Input.InputLabel>
+      <Input id="addr" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="Address"')
+    })
+
+    it('axis="vertical" explicitly → transforms', () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView axis="vertical">
+      <Input.InputLabel>City</Input.InputLabel>
+      <Input id="city" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="City"')
+    })
+
+    it("axis={someVar} (dynamic, non-string-literal) → transforms (best-effort)", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView axis={someVar}>
+      <Input.InputLabel>State</Input.InputLabel>
+      <Input id="state" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="State"')
+    })
+
+    it("multiple label+input pairs in one StackView → both transformed", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView>
+      <Input.InputLabel>First Name</Input.InputLabel>
+      <Input id="first" />
+      <Input.InputLabel>Last Name</Input.InputLabel>
+      <Input id="last" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="First Name"')
+      expect(result).toContain('label="Last Name"')
+      expect(result).not.toContain("<Input.InputLabel")
+    })
+  })
+
+  describe("no-op / comment cases", () => {
+    it('axis="horizontal" → no transform, returns null', () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView axis="horizontal">
+      <Input.InputLabel>Name</Input.InputLabel>
+      <Input id="f1" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("Input has renderLeft → no transform for that pair, returns null", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView>
+      <Input.InputLabel>Name</Input.InputLabel>
+      <Input id="f1" renderLeft={() => <span />} />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("Input has renderRight → no transform for that pair, returns null", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView>
+      <Input.InputLabel>Name</Input.InputLabel>
+      <Input id="f1" renderRight={() => <span />} />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("Input already has label prop → TODO comment added, InputLabel not removed", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView>
+      <Input.InputLabel>New Label</Input.InputLabel>
+      <Input id="f1" label="Existing" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain(
+        "TODO: tapestry-migration (inputLabelToLabelProp)"
+      )
+      expect(result).toContain("already has a label prop")
+      expect(result).toContain("New Label")
+      expect(result).toContain('label="Existing"')
+      // Should not add a second label attribute
+      expect(result?.match(/label=/g)?.length).toBe(1)
+    })
+
+    it("InputLabel has complex children (JSX nodes) → TODO comment added, InputLabel not removed", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView>
+      <Input.InputLabel><span>Name <em>*</em></span></Input.InputLabel>
+      <Input id="f1" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain(
+        "TODO: tapestry-migration (inputLabelToLabelProp)"
+      )
+      expect(result).toContain("complex and cannot be auto-converted")
+      expect(result).toContain("<Input.InputLabel")
+      expect(result).not.toContain('label="')
+    })
+
+    it("Input and InputLabel not adjacent (other element between them) → no transform", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView>
+      <Input.InputLabel>Name</Input.InputLabel>
+      <span>hint</span>
+      <Input id="f1" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("no StackView wrapper → no transform, returns null", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Input.InputLabel>Name</Input.InputLabel>
+      <Input id="f1" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("StackView from different package → no transform, returns null", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+import { StackView } from "other-library"
+
+function Test() {
+  return (
+    <StackView>
+      <Input.InputLabel>Name</Input.InputLabel>
+      <Input id="f1" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("StackView not imported at all → no transform, returns null", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView>
+      <Input.InputLabel>Name</Input.InputLabel>
+      <Input id="f1" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+})

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