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

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

@@ -0,0 +1,469 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./mergeFieldIntoInput"
+
+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("mergeFieldIntoInput transform", () => {
+  describe("basic prop merging", () => {
+    it("merges label prop from Field into Input", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Field label="Name"><Input /></Field>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('label="Name"')
+      expect(result).toContain("<Input")
+    })
+
+    it("renames feedbackText to description on Input", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field feedbackText="Required"><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).not.toContain("feedbackText")
+      expect(result).toContain('description="Required"')
+    })
+
+    it("copies state prop as-is to Input", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field state="error"><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('state="error"')
+    })
+
+    it("preserves dynamic label value", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label={labelText}><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain("label={labelText}")
+    })
+  })
+
+  describe("unsupported props", () => {
+    it("adds TODO comment for helpContent and removes Field", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field helpContent="Help"><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain("TODO: tapestry-migration (mergeFieldIntoInput)")
+      expect(result).toContain("helpContent")
+      expect(result).toContain("not supported by Input")
+    })
+
+    it("adds a comment per unsupported prop when multiple unsupported props are present", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field inline compact spacing={8}><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain("inline")
+      expect(result).toContain("compact")
+      expect(result).toContain("spacing")
+    })
+  })
+
+  describe("Field with no props", () => {
+    it("unwraps Field with no props cleanly", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain("<Input")
+      expect(result).not.toContain("TODO")
+    })
+  })
+
+  describe("conflict detection", () => {
+    it("adds warning comment when Input already has label and keeps Input's existing label", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Name"><Input label="Other" /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('label="Other"')
+      expect(result).toContain("TODO: tapestry-migration (mergeFieldIntoInput)")
+      expect(result).toContain("already has label")
+    })
+
+    it("merges label from Field when Input has description but not label", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Name"><Input description="x" /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('label="Name"')
+      expect(result).toContain('description="x"')
+    })
+  })
+
+  describe("multiple children", () => {
+    it("adds comment to Input and leaves Field when Field has multiple children", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field><Input /><button /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("<Field")
+      expect(result).toContain("TODO: tapestry-migration (mergeFieldIntoInput)")
+      expect(result).toContain("multiple children")
+    })
+  })
+
+  describe("non-Input child", () => {
+    it("returns null when Field contains only a non-Input child", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field><textarea /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("import cleanup", () => {
+    it("removes Field from import specifiers when all Fields are converted", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Name"><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("Field")
+      expect(result).toContain("Input")
+    })
+
+    it("removes entire import declaration when Field was the only specifier", () => {
+      const input = `
+import { Field } from "@planningcenter/tapestry-react"
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("{ Field }")
+    })
+
+    it("keeps Field in import when some Fields cannot be converted", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Field label="Name"><Input /></Field>
+      <Field><Input /><button /></Field>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("Field")
+    })
+  })
+
+  describe("full prop set", () => {
+    it("merges label, feedbackText, state and flags helpContent as unsupported", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Name" feedbackText="Required" state="error" helpContent="Help">
+      <Input />
+    </Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('label="Name"')
+      expect(result).toContain('description="Required"')
+      expect(result).toContain('state="error"')
+      expect(result).toContain("helpContent")
+      expect(result).toContain("not supported by Input")
+    })
+  })
+
+  describe("key prop handling", () => {
+    it("moves key from Field to Input when Input has no key", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Field key="item-1" label="Name"><Input /></Field>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('key="item-1"')
+      expect(result).toContain("<Input")
+    })
+
+    it("keeps Input's key when both Field and Input have key", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Field key="field-1" label="Name"><Input key="input-1" /></Field>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('key="input-1"')
+    })
+  })
+
+  describe("spread props on Field", () => {
+    it("bails out with TODO comment when Field has spread props", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field {...fieldProps}><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("<Field")
+      expect(result).toContain("TODO: tapestry-migration (mergeFieldIntoInput)")
+      expect(result).toContain("spread props")
+    })
+
+    it("bails out when Field has spread props mixed with regular props", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Name" {...fieldProps}><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("<Field")
+      expect(result).toContain("spread props")
+    })
+  })
+
+  describe("not from tapestry-react", () => {
+    it("returns null when Field is not imported from tapestry-react", () => {
+      const input = `
+import { Field } from "some-other-library"
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Name"><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when Input is not imported from tapestry-react", () => {
+      const input = `
+import { Field } from "@planningcenter/tapestry-react"
+import { Input } from "some-other-library"
+
+function Test() {
+  return (
+    <Field label="Name"><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when neither 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 Field import", () => {
+      const input = `
+import { Field as TapField, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <TapField label="Name"><Input /></TapField>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<TapField")
+      expect(result).toContain('label="Name"')
+    })
+
+    it("handles aliased Input import", () => {
+      const input = `
+import { Field, Input as TapInput } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Name"><TapInput /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('label="Name"')
+      expect(result).toContain("<TapInput")
+    })
+  })
+})

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

@@ -0,0 +1,7 @@
+import { mergeFieldFactory } from "../../shared/transformFactories/mergeFieldFactory"
+import { transformableInput } from "../transformableInput"
+
+export default mergeFieldFactory({
+  condition: transformableInput,
+  targetComponent: "Input",
+})