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

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

@@ -0,0 +1,352 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./removeInputBox"
+
+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("removeInputBox transform", () => {
+  describe("basic unwrap", () => {
+    it("removes InputBox wrapper and promotes Input child", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox>
+        <Input id="name" value={name} />
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("InputBox")
+      expect(result).toContain("<Input")
+    })
+  })
+
+  describe("aliased import", () => {
+    it("handles aliased Input imports", () => {
+      const input = `
+import { Input as TapInput } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <TapInput.InputBox>
+        <TapInput id="name" value={name} />
+      </TapInput.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("InputBox")
+      expect(result).toContain("<TapInput")
+    })
+  })
+
+  describe("InputBox has props", () => {
+    it("adds TODO to Input child and does not unwrap when InputBox has a single prop", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox size="sm">
+        <Input id="name" value={name} />
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("InputBox")
+      expect(result).toContain("TODO: tapestry-migration (removeInputBox)")
+      expect(result).toContain(
+        "Tapestry doesn't support InputBox passing props to children (size)"
+      )
+    })
+
+    it("lists all props in the TODO comment when InputBox has multiple props", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox size="sm" spacing={1}>
+        <Input id="name" value={name} />
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("InputBox")
+      expect(result).toContain("size, spacing")
+    })
+
+    it("does not add TODO when Input has renderLeft/renderRight (not a convertible child)", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox size="sm">
+        <Input id="name" renderLeft={<Icon />} value={name} />
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("InputBox with multiple children", () => {
+    it("adds TODO to Input child and does not unwrap when InputBox has multiple non-whitespace children", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox>
+        <Input id="name" value={name} />
+        <Text>helper</Text>
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("InputBox")
+      expect(result).toContain("TODO: tapestry-migration (removeInputBox)")
+      expect(result).toContain("multiple children")
+    })
+
+    it("returns null when InputBox has multiple children but none are convertible Input", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox>
+        <Select value={val} />
+        <Text>helper</Text>
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("renderLeft/renderRight child with no props → no change", () => {
+    it("returns null when the single Input child has renderLeft", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox>
+        <Input id="name" renderLeft={<Icon />} value={name} />
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when the single Input child has renderRight", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox>
+        <Input id="name" renderRight={<Icon />} value={name} />
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("non-Input child only → no change", () => {
+    it("returns null when InputBox contains only a non-Input child", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox>
+        <Select value={val} />
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when InputBox contains a JSX expression as its only child", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox>
+        {condition && <Input id="name" value={name} />}
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when InputBox has no non-whitespace children", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox>
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("root-level InputBox", () => {
+    it("unwraps root-level InputBox with single convertible Input child", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function NameInput() {
+  return (
+    <Input.InputBox>
+      <Input id="name" value={name} />
+    </Input.InputBox>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("Input.InputBox")
+      expect(result).toContain('<Input id="name"')
+    })
+  })
+
+  describe("not from tapestry-react → no change", () => {
+    it("returns null when Input is not imported from tapestry-react", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputBox>
+        <Input id="name" value={name} />
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when no Input import exists at all", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button label="Click" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("integration with mergeInputLabel pipeline", () => {
+    it("after removeInputBox runs, Input is a direct sibling of InputLabel so mergeInputLabel can merge them", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Input.InputLabel controls="input-name">Name</Input.InputLabel>
+      <Input.InputBox>
+        <Input id="input-name" value={name} />
+      </Input.InputBox>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("InputBox")
+      expect(result).toContain("<Input.InputLabel")
+      expect(result).toContain("<Input")
+    })
+  })
+})

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

@@ -0,0 +1,109 @@
+import { JSXAttribute, JSXElement, JSXText, Transform } from "jscodeshift"
+
+type JSXChild = NonNullable<JSXElement["children"]>[number]
+
+import { addComment } from "../../shared/actions/addComment"
+import { getImportName } from "../../shared/transformFactories/helpers/manageImports"
+
+const SCOPE = "removeInputBox"
+
+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
+
+  let hasChanges = false
+
+  const isConvertibleInputChild = (child: JSXChild): child is JSXElement => {
+    if (child.type !== "JSXElement") return false
+    if (child.openingElement.name.type !== "JSXIdentifier") return false
+    if (child.openingElement.name.name !== inputLocalName) return false
+    const attrs = child.openingElement.attributes || []
+    return !attrs.some(
+      (a) =>
+        a.type === "JSXAttribute" &&
+        a.name.type === "JSXIdentifier" &&
+        (a.name.name === "renderLeft" || a.name.name === "renderRight")
+    )
+  }
+
+  source.find(j.JSXElement).forEach((path) => {
+    const el = path.value
+    const opening = el.openingElement
+
+    if (opening.name.type !== "JSXMemberExpression") return
+    const { object, property } = opening.name
+    if (object.type !== "JSXIdentifier" || object.name !== inputLocalName)
+      return
+    if (property.name !== "InputBox") return
+
+    const elementChildren = (el.children || []).filter(
+      (child) =>
+        child.type !== "JSXText" || (child as JSXText).value.trim() !== ""
+    )
+    const inputChildren = elementChildren.filter(isConvertibleInputChild)
+
+    // Case: InputBox has props — add TODO to each Input child, don't unwrap
+    const attrs = opening.attributes || []
+    if (attrs.length > 0) {
+      const propNames = attrs
+        .filter(
+          (a): a is JSXAttribute =>
+            a.type === "JSXAttribute" && a.name?.type === "JSXIdentifier"
+        )
+        .map((a) => a.name.name)
+        .join(", ")
+
+      for (const child of inputChildren) {
+        addComment({
+          element: child,
+          j,
+          scope: SCOPE,
+          source,
+          text: `Tapestry doesn't support InputBox passing props to children (${propNames}). Please migrate manually.`,
+        })
+        hasChanges = true
+      }
+      return
+    }
+
+    // Case: InputBox has more than one non-whitespace child — add TODO to each Input child, don't unwrap
+    if (elementChildren.length > 1) {
+      for (const child of inputChildren) {
+        addComment({
+          element: child,
+          j,
+          scope: SCOPE,
+          source,
+          text: "InputBox has multiple children and cannot be auto-unwrapped. Please migrate manually.",
+        })
+        hasChanges = true
+      }
+      return
+    }
+
+    // Only unwrap when there is exactly one non-whitespace child and it is a convertible Input
+    if (elementChildren.length !== 1 || inputChildren.length !== 1) return
+
+    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-level JSX — use path.replace
+      path.replace(inputChildren[0])
+    }
+    hasChanges = true
+  })
+
+  return hasChanges ? source.toSource() : null
+}
+
+export default transform

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

@@ -0,0 +1,128 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./removeRedundantAriaLabel"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  const api = {
+    j,
+    jscodeshift: j,
+    report: () => {},
+    stats: () => {},
+  }
+  const result = transform(fileInfo, api, {})
+  return result as string | null
+}
+
+describe("removeRedundantAriaLabel transform", () => {
+  describe("basic transformation", () => {
+    it("should remove aria-label when both aria-label and label are present", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input aria-label="Name" label="Name" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('<Input label="Name" />')
+      expect(result).not.toContain("aria-label")
+    })
+
+    it("should preserve aria-label when no label prop exists", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input aria-label="Name" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should return null when Input has neither aria-label nor label", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input onChange={handleChange} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect other components with the same props", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Input aria-label="Name" label="Name" />
+              <input aria-label="Name" label="Name" />
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('<Input label="Name" />')
+      expect(result).toContain('<input aria-label="Name" label="Name" />')
+    })
+
+    it("should handle expression syntax aria-label={'text'}", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input aria-label={"Name"} label="Name" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      if (result) {
+        expect(result).toContain('<Input label="Name" />')
+        expect(result).not.toContain("aria-label")
+      } else {
+        expect(input).toContain('aria-label={"Name"}')
+      }
+    })
+
+    it("should handle multiple Inputs in one file with mixed cases", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Input aria-label="Name" label="Name" />
+              <Input aria-label="Email" />
+              <Input label="Phone" />
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('<Input label="Name" />')
+      expect(result).toContain('aria-label="Email"')
+      expect(result).toContain('<Input label="Phone" />')
+    })
+  })
+})

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

@@ -0,0 +1,21 @@
+import { Transform } from "jscodeshift"
+
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { andConditions } from "../../shared/conditions/andConditions"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { transformableInput } from "../transformableInput"
+
+const transform: Transform = attributeTransformFactory({
+  condition: andConditions(
+    transformableInput,
+    hasAttribute("aria-label"),
+    hasAttribute("label")
+  ),
+  targetComponent: "Input",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) =>
+    removeAttribute("aria-label", { element, j, source }),
+})
+
+export default transform