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

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

@@ -0,0 +1,458 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./mergeInputLabel"
+
+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("mergeInputLabel transform", () => {
+  describe("basic merge", () => {
+    it("merges InputLabel with simple text into Input label prop inside Box", () => {
+      const input = `
+import { Box, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box grow={1}>
+      <Input.InputLabel controls="input-address">Address</Input.InputLabel>
+      <Input id="input-address" disabled={isEditing} value={address} />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="Address"')
+      expect(result).not.toContain("<Input.InputLabel")
+    })
+
+    it("merges InputLabel with simple text into Input label prop inside StackView", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView>
+      <Input.InputLabel controls="input-name">Name</Input.InputLabel>
+      <Input id="input-name" value={name} />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="Name"')
+      expect(result).not.toContain("<Input.InputLabel")
+    })
+  })
+
+  describe("StackView axis", () => {
+    it("skips horizontal StackView and returns null", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView axis="horizontal">
+      <Input.InputLabel controls="input-name">Name</Input.InputLabel>
+      <Input id="input-name" value={name} />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it('skips horizontal StackView with axis={"horizontal"} expression container', () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView axis={"horizontal"}>
+      <Input.InputLabel controls="input-name">Name</Input.InputLabel>
+      <Input id="input-name" value={name} />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("processes vertical StackView (no axis prop)", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView axis="vertical">
+      <Input.InputLabel controls="input-name">Name</Input.InputLabel>
+      <Input id="input-name" value={name} />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="Name"')
+    })
+  })
+
+  describe("controls/id matching", () => {
+    it("still merges when controls and id are different strings", () => {
+      const input = `
+import { Box, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputLabel controls="label-id">Email</Input.InputLabel>
+      <Input id="input-id" value={email} />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="Email"')
+    })
+
+    it("still merges when controls and id are dynamic expressions", () => {
+      const input = `
+import { Box, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputLabel controls={inputId}>Email</Input.InputLabel>
+      <Input id={inputId} value={email} />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="Email"')
+    })
+  })
+
+  describe("complex InputLabel children", () => {
+    it("adds comment to Input and removes InputLabel when children are complex JSX", () => {
+      const input = `
+import { Box, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputLabel controls="input-id">
+        <span>Address <em>*</em></span>
+      </Input.InputLabel>
+      <Input id="input-id" value={address} />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Input.InputLabel")
+      expect(result).toContain("TODO: tapestry-migration (mergeInputLabel)")
+      expect(result).toContain("complex and cannot be auto-converted")
+      expect(result).not.toContain('label="')
+    })
+
+    it("adds comment when children are dynamic expressions", () => {
+      const input = `
+import { Box, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputLabel controls="input-id">{labelText}</Input.InputLabel>
+      <Input id="input-id" value={val} />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Input.InputLabel")
+      expect(result).toContain("TODO: tapestry-migration (mergeInputLabel)")
+      expect(result).toContain("complex and cannot be auto-converted")
+    })
+  })
+
+  describe("InputLabel extra props", () => {
+    it("adds comment listing removed props when InputLabel has non-controls props", () => {
+      const input = `
+import { Box, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputLabel controls="input-address" color={token("--t-text-color")}>Address</Input.InputLabel>
+      <Input id="input-address" value={address} />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="Address"')
+      expect(result).toContain(
+        "The following props from Input.InputLabel were removed: color"
+      )
+      expect(result).not.toContain("<Input.InputLabel")
+    })
+
+    it("does not add removed props comment when only controls prop is present", () => {
+      const input = `
+import { Box, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputLabel controls="input-id">Name</Input.InputLabel>
+      <Input id="input-id" value={name} />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="Name"')
+      expect(result).not.toContain("were removed")
+    })
+  })
+
+  describe("whitespace handling", () => {
+    it("handles whitespace text nodes between InputLabel and Input", () => {
+      const input = `
+import { Box, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputLabel controls="input-id">Phone</Input.InputLabel>
+
+      <Input id="input-id" value={phone} />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="Phone"')
+      expect(result).not.toContain("<Input.InputLabel")
+    })
+  })
+
+  describe("existing label prop on Input", () => {
+    it("adds comment and does not duplicate label when Input already has label prop", () => {
+      const input = `
+import { Box, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputLabel controls="input-id">New Label</Input.InputLabel>
+      <Input id="input-id" label="Existing Label" value={val} />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Input.InputLabel")
+      expect(result).toContain('label="Existing Label"')
+      expect(result).toContain("TODO: tapestry-migration (mergeInputLabel)")
+      expect(result).toContain("already has a label prop")
+      expect(result).toContain("New Label")
+      // Should not add a second label attribute
+      expect(result?.match(/label=/g)?.length).toBe(1)
+    })
+  })
+
+  describe("multiple pairs", () => {
+    it("merges multiple InputLabel+Input pairs in the same parent", () => {
+      const input = `
+import { Box, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputLabel controls="input-first">First Name</Input.InputLabel>
+      <Input id="input-first" value={firstName} />
+      <Input.InputLabel controls="input-last">Last Name</Input.InputLabel>
+      <Input id="input-last" value={lastName} />
+    </Box>
+  )
+}
+      `.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 Input import", () => {
+    it("returns null when Input is not imported from tapestry-react", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry"
+
+function Test() {
+  return (
+    <Box>
+      <Input id="input-id" value={val} />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when no Input 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 Input imports", () => {
+      const input = `
+import { Box, Input as TapestryInput } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <TapestryInput.InputLabel controls="input-id">City</TapestryInput.InputLabel>
+      <TapestryInput id="input-id" value={city} />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="City"')
+      expect(result).not.toContain("<Input.InputLabel")
+    })
+  })
+
+  describe("non-Box/StackView parents", () => {
+    it("skips InputLabel+Input pairs inside non-Box/StackView parents", () => {
+      const input = `
+import { Box, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Input.InputLabel controls="input-id">Name</Input.InputLabel>
+      <Input id="input-id" value={name} />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("skips Box/StackView not imported from @planningcenter/tapestry-react", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+import { Box } from "./my-components"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputLabel controls="input-id">Name</Input.InputLabel>
+      <Input id="input-id" value={name} />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("aliased Box/StackView imports", () => {
+    it("handles aliased Box import", () => {
+      const input = `
+import { Box as TapestryBox, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <TapestryBox>
+      <Input.InputLabel controls="input-id">Name</Input.InputLabel>
+      <Input id="input-id" value={name} />
+    </TapestryBox>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="Name"')
+      expect(result).not.toContain("<Input.InputLabel")
+    })
+
+    it("handles aliased StackView import", () => {
+      const input = `
+import { Input, StackView as Stack } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Stack>
+      <Input.InputLabel controls="input-id">Name</Input.InputLabel>
+      <Input id="input-id" value={name} />
+    </Stack>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="Name"')
+      expect(result).not.toContain("<Input.InputLabel")
+    })
+  })
+})

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

@@ -0,0 +1,204 @@
+import { JSXElement, Transform } from "jscodeshift"
+
+import { addAttribute } from "../../shared/actions/addAttribute"
+import { addComment } from "../../shared/actions/addComment"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { orConditions } from "../../shared/conditions/orConditions"
+import { extractTextContent } from "../../shared/helpers/childrenToLabelHelpers"
+import { getImportName } from "../../shared/transformFactories/helpers/manageImports"
+
+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 boxLocalName = getImportName("Box", "@planningcenter/tapestry-react", {
+    j,
+    source,
+  })
+  const stackViewLocalName = getImportName(
+    "StackView",
+    "@planningcenter/tapestry-react",
+    {
+      j,
+      source,
+    }
+  )
+
+  if (!boxLocalName && !stackViewLocalName) return null
+
+  let hasChanges = false
+
+  source.find(j.JSXElement).forEach((path) => {
+    const parentEl = path.value
+    const openingElement = parentEl.openingElement
+
+    if (openingElement.name.type !== "JSXIdentifier") return
+    const parentName = openingElement.name.name
+    const isBox = boxLocalName && parentName === boxLocalName
+    const isStackView = stackViewLocalName && parentName === stackViewLocalName
+    if (!isBox && !isStackView) return
+
+    if (isStackView) {
+      const axisAttr = getAttribute({ element: parentEl, name: "axis" })
+      if (axisAttr) {
+        const axisValue = axisAttr.value
+        if (
+          axisValue &&
+          ((axisValue.type === "StringLiteral" &&
+            axisValue.value === "horizontal") ||
+            (axisValue.type === "JSXExpressionContainer" &&
+              axisValue.expression.type === "StringLiteral" &&
+              axisValue.expression.value === "horizontal"))
+        ) {
+          return
+        }
+      }
+    }
+
+    const children = parentEl.children || []
+    let i = 0
+
+    while (i < children.length) {
+      const child = children[i]
+
+      if (child.type !== "JSXElement") {
+        i++
+        continue
+      }
+
+      const childOpening = child.openingElement
+      const childName = childOpening.name
+
+      if (childName.type !== "JSXMemberExpression") {
+        i++
+        continue
+      }
+      const objectPart = childName.object
+      if (
+        objectPart.type !== "JSXIdentifier" ||
+        objectPart.name !== inputLocalName
+      ) {
+        i++
+        continue
+      }
+      if (childName.property.name !== "InputLabel") {
+        i++
+        continue
+      }
+
+      // Find the next JSXElement sibling (skip JSXText whitespace nodes)
+      let nextIdx = i + 1
+      while (
+        nextIdx < children.length &&
+        children[nextIdx].type === "JSXText"
+      ) {
+        nextIdx++
+      }
+
+      if (
+        nextIdx >= children.length ||
+        children[nextIdx].type !== "JSXElement"
+      ) {
+        i++
+        continue
+      }
+
+      const inputEl = children[nextIdx] as JSXElement
+      const inputOpening = inputEl.openingElement
+
+      if (
+        inputOpening.name.type !== "JSXIdentifier" ||
+        inputOpening.name.name !== inputLocalName
+      ) {
+        i++
+        continue
+      }
+
+      // Skip inputs with renderLeft/renderRight — they are not transformable
+      const hasRenderSide = orConditions(
+        hasAttribute("renderLeft"),
+        hasAttribute("renderRight")
+      )
+      if (hasRenderSide(inputEl)) {
+        i++
+        continue
+      }
+
+      const { isSimpleText, textContent } = extractTextContent(
+        child.children || []
+      )
+
+      // Collect non-controls attrs from InputLabel to warn about
+      const inputLabelAttrs = childOpening.attributes || []
+      const removedProps: string[] = []
+      for (const attr of inputLabelAttrs) {
+        if (
+          attr.type === "JSXAttribute" &&
+          attr.name.type === "JSXIdentifier" &&
+          attr.name.name !== "controls"
+        ) {
+          removedProps.push(attr.name.name)
+        }
+      }
+
+      children.splice(i, nextIdx - i)
+
+      hasChanges = true
+
+      if (!isSimpleText) {
+        addComment({
+          element: inputEl,
+          j,
+          scope: "mergeInputLabel",
+          source,
+          text: "InputLabel children are complex and cannot be auto-converted to a label prop. Please migrate manually.",
+        })
+      } else {
+        const existingLabel = getAttribute({ element: inputEl, name: "label" })
+        if (existingLabel) {
+          addComment({
+            element: inputEl,
+            j,
+            scope: "mergeInputLabel",
+            source,
+            text: `Input already has a label prop. The InputLabel had text: "${textContent}". Please review manually.`,
+          })
+        } else {
+          addAttribute({
+            element: inputEl,
+            j,
+            name: "label",
+            value: textContent,
+          })
+        }
+      }
+
+      if (removedProps.length > 0) {
+        addComment({
+          element: inputEl,
+          j,
+          scope: "mergeInputLabel",
+          source,
+          text: `The following props from Input.InputLabel were removed: ${removedProps.join(", ")}. Please review manually.`,
+        })
+      }
+
+      i++
+    }
+  })
+
+  return hasChanges ? source.toSource() : null
+}
+
+export default transform