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

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

@@ -0,0 +1,213 @@
+import { JSXElement, JSXText, Transform } from "jscodeshift"
+
+import { addComment } from "../../shared/actions/addComment"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { orConditions } from "../../shared/conditions/orConditions"
+import {
+  getImportName,
+  removeImportFromDeclaration,
+} from "../../shared/transformFactories/helpers/manageImports"
+
+const SCOPE = "mergeFieldIntoInput"
+
+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 inputLocalName = getImportName(
+    "Input",
+    "@planningcenter/tapestry-react",
+    { j, source }
+  )
+  if (!inputLocalName) 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 inputChildren = elementChildren.filter((child) => {
+      if (child.type !== "JSXElement") return false
+      const childOpening = (child as JSXElement).openingElement
+      return (
+        childOpening.name.type === "JSXIdentifier" &&
+        childOpening.name.name === inputLocalName
+      )
+    }) as JSXElement[]
+
+    const hasRenderSide = orConditions(
+      hasAttribute("renderLeft"),
+      hasAttribute("renderRight")
+    )
+
+    // Case: exactly 1 child and it is an Input — merge props and unwrap
+    if (elementChildren.length === 1 && inputChildren.length === 1) {
+      const inputEl = inputChildren[0]
+
+      // Skip inputs with renderLeft/renderRight — they are not transformable
+      if (hasRenderSide(inputEl)) return
+
+      const fieldAttrs = opening.attributes || []
+
+      for (const attr of fieldAttrs) {
+        if (attr.type !== "JSXAttribute") continue
+        if (attr.name.type !== "JSXIdentifier") continue
+
+        const attrName = attr.name.name
+        const inputAttrs = inputEl.openingElement.attributes || []
+
+        if (attrName === "label") {
+          const hasLabel = inputAttrs.some(
+            (a) =>
+              a.type === "JSXAttribute" &&
+              a.name?.type === "JSXIdentifier" &&
+              a.name.name === "label"
+          )
+          if (hasLabel) {
+            addComment({
+              element: inputEl,
+              j,
+              scope: SCOPE,
+              source,
+              text: "Field had label prop but Input already has label. Please migrate manually.",
+            })
+          } else {
+            inputEl.openingElement.attributes.push(attr)
+          }
+        } else if (attrName === "feedbackText") {
+          const hasDescription = inputAttrs.some(
+            (a) =>
+              a.type === "JSXAttribute" &&
+              a.name?.type === "JSXIdentifier" &&
+              a.name.name === "description"
+          )
+          if (hasDescription) {
+            addComment({
+              element: inputEl,
+              j,
+              scope: SCOPE,
+              source,
+              text: "Field had feedbackText prop but Input already has description. Please migrate manually.",
+            })
+          } else {
+            const newAttr = j.jsxAttribute(
+              j.jsxIdentifier("description"),
+              attr.value
+            )
+            inputEl.openingElement.attributes.push(newAttr)
+          }
+        } else if (attrName === "state") {
+          const hasState = inputAttrs.some(
+            (a) =>
+              a.type === "JSXAttribute" &&
+              a.name?.type === "JSXIdentifier" &&
+              a.name.name === "state"
+          )
+          if (hasState) {
+            addComment({
+              element: inputEl,
+              j,
+              scope: SCOPE,
+              source,
+              text: "Field had state prop but Input already has state. Please migrate manually.",
+            })
+          } else {
+            inputEl.openingElement.attributes.push(attr)
+          }
+        } else {
+          addComment({
+            element: inputEl,
+            j,
+            scope: SCOPE,
+            source,
+            text: `Field prop '${attrName}' is not supported by Input. 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 Input child, leave Field
+    if (elementChildren.length > 1) {
+      for (const child of inputChildren) {
+        // Skip inputs with renderLeft/renderRight — they are not transformable
+        if (hasRenderSide(child)) continue
+        addComment({
+          element: child,
+          j,
+          scope: SCOPE,
+          source,
+          text: "Field has multiple children and cannot be auto-merged into Input. Please migrate manually.",
+        })
+        hasChanges = true
+      }
+      return
+    }
+
+    // Case: exactly 1 child but not an Input — 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
+}
+
+export default transform

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")
+    })
+  })
+})