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

package/src/components/text-area/transforms/mergeFieldIntoTextArea.test.ts

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

package/src/components/text-area/transforms/mergeFieldIntoTextArea.ts

@@ -0,0 +1,5 @@
+import { mergeFieldFactory } from "../../shared/transformFactories/mergeFieldFactory"
+
+export default mergeFieldFactory({
+  targetComponent: "TextArea",
+})

package/src/components/text-area/transforms/moveTextAreaImport.test.ts

@@ -0,0 +1,168 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./moveTextAreaImport"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string {
+  const fileInfo = { path: "test.tsx", source }
+  const result = transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+  return result || source
+}
+
+describe("moveTextAreaImport transform", () => {
+  describe("import migration", () => {
+    it("should change import from tapestry-react to tapestry", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { TextArea } from "@planningcenter/tapestry"'
+      )
+      expect(result).not.toContain("@planningcenter/tapestry-react")
+    })
+
+    it("should only move TextArea, leaving other imports in place", () => {
+      const input = `
+import { Button, TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>Click</Button>
+      <TextArea label="Notes" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { TextArea } from "@planningcenter/tapestry"'
+      )
+    })
+
+    it("should handle TextArea as sole import in declaration", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>Click</Button>
+      <TextArea label="Notes" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { TextArea } from "@planningcenter/tapestry"'
+      )
+    })
+
+    it("should not affect other components", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button>Click me</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle already migrated imports", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry"
+
+function Test() {
+  return <TextArea label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { TextArea } from "@planningcenter/tapestry"'
+      )
+    })
+
+    it("should handle no imports", () => {
+      const input = `
+function Test() {
+  return <div>No imports</div>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should preserve all attributes", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <TextArea
+      label="Notes"
+      placeholder="Enter notes"
+      rows={5}
+      disabled
+      onChange={() => {}}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { TextArea } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('label="Notes"')
+      expect(result).toContain('placeholder="Enter notes"')
+      expect(result).toContain("rows={5}")
+      expect(result).toContain("disabled")
+      expect(result).toContain("onChange={() => {}}")
+    })
+
+    it("should handle alias import", () => {
+      const input = `
+import { TextArea as MyTextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <MyTextArea label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("@planningcenter/tapestry")
+      expect(result).not.toContain("@planningcenter/tapestry-react")
+    })
+  })
+})

package/src/components/text-area/transforms/moveTextAreaImport.ts

@@ -0,0 +1,13 @@
+import { Transform } from "jscodeshift"
+
+import { componentTransformFactory } from "../../shared/transformFactories/componentTransformFactory"
+
+const transform: Transform = componentTransformFactory({
+  condition: () => true,
+  fromComponent: "TextArea",
+  fromPackage: "@planningcenter/tapestry-react",
+  toComponent: "TextArea",
+  toPackage: "@planningcenter/tapestry",
+})
+
+export default transform