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

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

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

@@ -0,0 +1,212 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./removeTypeInput"
+
+const j = jscodeshift.withParser("tsx")
+
+// Helper to run transform and get result
+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("removeTypeInput transform", () => {
+  describe("basic transformation", () => {
+    it("should remove type='input' from Input", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="input" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Input />")
+      expect(result).not.toContain('type="input"')
+    })
+
+    it('should remove type="input" from Input with other props', () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="input" onChange={handleChange} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Input onChange={handleChange} />")
+      expect(result).not.toContain('type="input"')
+    })
+
+    it("should preserve Input without type='input'", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input onChange={handleChange} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should preserve Input with type='email'", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="email" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should preserve Input with type='number'", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="number" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should remove type='text' from Input", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="text" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Input />")
+      expect(result).not.toContain('type="text"')
+    })
+
+    it("should remove type='text' from Input with other props", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="text" value={searchTerm} placeholder="Search" onChange={handleChange} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).not.toContain('type="text"')
+      expect(result).toContain("value={searchTerm}")
+      expect(result).toContain('placeholder="Search"')
+      expect(result).toContain("onChange={handleChange}")
+    })
+  })
+
+  describe("multiple inputs", () => {
+    it("should handle mixed Input usage", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Input type="input" />
+              <Input type="text" />
+              <Input type="email" />
+              <Input type="input" onChange={handleChange} />
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('<Input type="email" />')
+      expect(result).toContain("<Input onChange={handleChange} />")
+      expect(result).not.toContain('type="input"')
+      expect(result).not.toContain('type="text"')
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect HTML input elements", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Input type="input" />
+              <input type="input" />
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Input />")
+      expect(result).toContain('<input type="input" />')
+    })
+
+    it("should handle expression syntax type={'input'}", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type={"input"} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      if (result) {
+        expect(result).toContain("<Input />")
+        expect(result).not.toContain('type={"input"}')
+      } else {
+        expect(input).toContain('type={"input"}')
+      }
+    })
+  })
+
+  describe("import handling", () => {
+    it("should not affect imports", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="input" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Input } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+})

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

@@ -0,0 +1,22 @@
+import { Transform } from "jscodeshift"
+
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { hasAttributeValue } from "../../shared/conditions/hasAttributeValue"
+import { orConditions } from "../../shared/conditions/orConditions"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { transformableInput } from "../transformableInput"
+
+const transform: Transform = attributeTransformFactory({
+  condition: (element) =>
+    transformableInput(element) &&
+    orConditions(
+      hasAttributeValue("type", "input"),
+      hasAttributeValue("type", "text")
+    )(element),
+  targetComponent: "Input",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) =>
+    removeAttribute("type", { element, j, source }),
+})
+
+export default transform

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

@@ -0,0 +1,160 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./removeTypeText"
+
+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("removeTypeText transform", () => {
+  describe("basic transformation", () => {
+    it("should preserve Input without type", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input onChange={handleChange} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should preserve Input with type='email'", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="email" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should preserve Input with type='number'", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="number" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should remove type='text' from Input", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="text" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Input />")
+      expect(result).not.toContain('type="text"')
+    })
+
+    it("should remove type='text' from Input with other props", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="text" value={searchTerm} placeholder="Search" onChange={handleChange} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).not.toContain('type="text"')
+      expect(result).toContain("value={searchTerm}")
+      expect(result).toContain('placeholder="Search"')
+      expect(result).toContain("onChange={handleChange}")
+    })
+  })
+
+  describe("multiple inputs", () => {
+    it("should handle mixed Input usage", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Input type="text" />
+              <Input type="email" />
+              <Input type="text" onChange={handleChange} />
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('<Input type="email" />')
+      expect(result).toContain("<Input onChange={handleChange} />")
+      expect(result).not.toContain('type="text"')
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect HTML input elements", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Input type="text" />
+              <input type="text" />
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Input />")
+      expect(result).toContain('<input type="text" />')
+    })
+  })
+
+  describe("import handling", () => {
+    it("should not affect imports", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="text" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Input } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+})

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

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