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

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

@@ -0,0 +1,458 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./mergeSelectLabel"
+
+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("mergeSelectLabel transform", () => {
+  describe("basic merge", () => {
+    it("merges InputLabel with simple text into Select label prop inside Box", () => {
+      const input = `
+import { Box, Input, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box grow={1}>
+      <Input.InputLabel controls="select-product">Product</Input.InputLabel>
+      <Select id="select-product" emptyValue="Pick" />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="Product"')
+      expect(result).not.toContain("<Input.InputLabel")
+    })
+
+    it("merges InputLabel with simple text into Select label prop inside StackView", () => {
+      const input = `
+import { Input, Select, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView>
+      <Input.InputLabel controls="select-name">Name</Input.InputLabel>
+      <Select id="select-name" emptyValue="Pick" />
+    </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, Select, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView axis="horizontal">
+      <Input.InputLabel controls="select-id">Name</Input.InputLabel>
+      <Select id="select-id" emptyValue="Pick" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("processes vertical StackView (explicit axis)", () => {
+      const input = `
+import { Input, Select, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView axis="vertical">
+      <Input.InputLabel controls="select-id">Name</Input.InputLabel>
+      <Select id="select-id" emptyValue="Pick" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="Name"')
+    })
+  })
+
+  describe("complex InputLabel children", () => {
+    it("adds comment when children are complex JSX", () => {
+      const input = `
+import { Box, Input, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputLabel controls="select-id">
+        <span>Product <em>*</em></span>
+      </Input.InputLabel>
+      <Select id="select-id" emptyValue="Pick" />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Input.InputLabel")
+      expect(result).toContain("TODO: tapestry-migration (mergeSelectLabel)")
+      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, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputLabel controls="select-id">{labelText}</Input.InputLabel>
+      <Select id="select-id" emptyValue="Pick" />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Input.InputLabel")
+      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, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputLabel controls="select-id" color={token("--t-text-color")}>Product</Input.InputLabel>
+      <Select id="select-id" emptyValue="Pick" />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="Product"')
+      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, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputLabel controls="select-id">Name</Input.InputLabel>
+      <Select id="select-id" emptyValue="Pick" />
+    </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 Select", () => {
+      const input = `
+import { Box, Input, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputLabel controls="select-id">Phone</Input.InputLabel>
+
+      <Select id="select-id" emptyValue="Pick" />
+    </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 Select", () => {
+    it("adds comment and does not duplicate label when Select already has label prop", () => {
+      const input = `
+import { Box, Input, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputLabel controls="select-id">New Label</Input.InputLabel>
+      <Select id="select-id" label="Existing Label" emptyValue="Pick" />
+    </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 (mergeSelectLabel)")
+      expect(result).toContain("already has a label prop")
+      expect(result).toContain("New Label")
+      expect(result?.match(/label=/g)?.length).toBe(1)
+    })
+  })
+
+  describe("multiple pairs", () => {
+    it("merges multiple InputLabel+Select pairs in the same parent", () => {
+      const input = `
+import { Box, Input, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputLabel controls="select-first">First</Input.InputLabel>
+      <Select id="select-first" emptyValue="Pick" />
+      <Input.InputLabel controls="select-last">Last</Input.InputLabel>
+      <Select id="select-last" emptyValue="Pick" />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="First"')
+      expect(result).toContain('label="Last"')
+      expect(result).not.toContain("<Input.InputLabel")
+    })
+  })
+
+  describe("no required imports", () => {
+    it("returns null when Input is not imported from tapestry-react", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Select id="select-id" emptyValue="Pick" />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when Select is not imported from tapestry-react", () => {
+      const input = `
+import { 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).toBeNull()
+    })
+  })
+
+  describe("aliased imports", () => {
+    it("handles aliased Input import for InputLabel resolution", () => {
+      const input = `
+import { Box, Input as TapestryInput, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <TapestryInput.InputLabel controls="select-id">City</TapestryInput.InputLabel>
+      <Select id="select-id" emptyValue="Pick" />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="City"')
+      expect(result).not.toContain("<TapestryInput.InputLabel")
+    })
+
+    it("handles aliased Select import", () => {
+      const input = `
+import { Box, Input, Select as TapSelect } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputLabel controls="select-id">City</Input.InputLabel>
+      <TapSelect id="select-id" emptyValue="Pick" />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="City"')
+      expect(result).not.toContain("<Input.InputLabel")
+    })
+  })
+
+  describe("parent layout props", () => {
+    it("skips Box with inline prop", () => {
+      const input = `
+import { Box, Input, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box inline>
+      <Input.InputLabel controls="select-id">Name</Input.InputLabel>
+      <Select id="select-id" emptyValue="Pick" />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("skips Box with compact prop", () => {
+      const input = `
+import { Box, Input, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box compact>
+      <Input.InputLabel controls="select-id">Name</Input.InputLabel>
+      <Select id="select-id" emptyValue="Pick" />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("skips StackView with labelBasis prop", () => {
+      const input = `
+import { Input, Select, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView labelBasis="200px">
+      <Input.InputLabel controls="select-id">Name</Input.InputLabel>
+      <Select id="select-id" emptyValue="Pick" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("still merges Box without layout props", () => {
+      const input = `
+import { Box, Input, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box grow={1}>
+      <Input.InputLabel controls="select-id">Name</Input.InputLabel>
+      <Select id="select-id" emptyValue="Pick" />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="Name"')
+    })
+  })
+
+  describe("non-Box/StackView parents", () => {
+    it("skips InputLabel+Select pairs inside non-Box/StackView parents", () => {
+      const input = `
+import { Box, Input, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Input.InputLabel controls="select-id">Name</Input.InputLabel>
+      <Select id="select-id" emptyValue="Pick" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("InputLabel not followed by Select", () => {
+    it("skips InputLabel when the next element is not a Select", () => {
+      const input = `
+import { Box, Input, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputLabel controls="input-id">Name</Input.InputLabel>
+      <Input id="input-id" value={name} />
+      <Select id="select-id" emptyValue="Pick" />
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+})

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

@@ -0,0 +1,225 @@
+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 { extractTextContent } from "../../shared/helpers/childrenToLabelHelpers"
+import { getImportName } from "../../shared/transformFactories/helpers/manageImports"
+
+const SCOPE = "mergeSelectLabel"
+
+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 selectLocalName = getImportName(
+    "Select",
+    "@planningcenter/tapestry-react",
+    {
+      j,
+      source,
+    }
+  )
+  if (!selectLocalName) 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
+
+    // Skip parents with layout props that indicate a complex layout
+    // where label merging would be inappropriate
+    const SKIP_PARENT_PROPS = ["compact", "inline", "labelBasis"]
+    const parentAttrs = openingElement.attributes || []
+    const hasLayoutProp = parentAttrs.some(
+      (attr) =>
+        attr.type === "JSXAttribute" &&
+        attr.name.type === "JSXIdentifier" &&
+        SKIP_PARENT_PROPS.includes(attr.name.name)
+    )
+    if (hasLayoutProp) 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 selectEl = children[nextIdx] as JSXElement
+      const selectOpening = selectEl.openingElement
+
+      if (
+        selectOpening.name.type !== "JSXIdentifier" ||
+        selectOpening.name.name !== selectLocalName
+      ) {
+        i++
+        continue
+      }
+
+      // Skip multiple selects — they are not transformable
+      if (hasAttribute("multiple")(selectEl)) {
+        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)
+        }
+      }
+
+      // Remove InputLabel and any whitespace nodes before Select
+      children.splice(i, nextIdx - i)
+      // Select is now at index i
+
+      hasChanges = true
+
+      if (!isSimpleText) {
+        addComment({
+          element: selectEl,
+          j,
+          scope: SCOPE,
+          source,
+          text: "InputLabel children are complex and cannot be auto-converted to a label prop. Please migrate manually.",
+        })
+      } else {
+        const existingLabel = getAttribute({ element: selectEl, name: "label" })
+        if (existingLabel) {
+          addComment({
+            element: selectEl,
+            j,
+            scope: SCOPE,
+            source,
+            text: `Select already has a label prop. The InputLabel had text: "${textContent}". Please review manually.`,
+          })
+        } else {
+          addAttribute({
+            element: selectEl,
+            j,
+            name: "label",
+            value: textContent,
+          })
+        }
+      }
+
+      if (removedProps.length > 0) {
+        addComment({
+          element: selectEl,
+          j,
+          scope: SCOPE,
+          source,
+          text: `The following props from Input.InputLabel were removed: ${removedProps.join(", ")}. Please review manually.`,
+        })
+      }
+
+      i++
+    }
+  })
+
+  return hasChanges ? source.toSource() : null
+}
+
+export default transform