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

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

@@ -0,0 +1,166 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./moveInputImport"
+
+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("moveInputImport transform", () => {
+  describe("import migration", () => {
+    it("should change import from tapestry-react to tapestry", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Input } from "@planningcenter/tapestry"'
+      )
+      expect(result).not.toContain("@planningcenter/tapestry-react")
+    })
+
+    it("should only move Input, leaving other imports in place", () => {
+      const input = `
+import { Button, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>Click</Button>
+      <Input label="Name" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { Input } from "@planningcenter/tapestry"'
+      )
+    })
+
+    it("should handle Input as sole import in declaration", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>Click</Button>
+      <Input label="Name" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { Input } 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 { Input } from "@planningcenter/tapestry"
+
+function Test() {
+  return <Input label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Input } 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 { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Input
+      label="Name"
+      placeholder="Enter name"
+      disabled
+      onChange={() => {}}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Input } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('label="Name"')
+      expect(result).toContain('placeholder="Enter name"')
+      expect(result).toContain("disabled")
+      expect(result).toContain("onChange={() => {}}")
+    })
+
+    it("should handle alias import", () => {
+      const input = `
+import { Input as TapestryInput } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TapestryInput label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("@planningcenter/tapestry")
+      expect(result).not.toContain("@planningcenter/tapestry-react")
+    })
+  })
+})

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

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

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

@@ -0,0 +1,92 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./numberFieldAddTypeNumber"
+
+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("numberFieldAddTypeNumber transform", () => {
+  it("adds type='number' to NumberField", () => {
+    const input = `
+import { NumberField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <NumberField label="Amount" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).toContain('type="number"')
+  })
+
+  it("preserves other props when adding type", () => {
+    const input = `
+import { NumberField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <NumberField label="Amount" value={42} onChange={handleChange} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('type="number"')
+    expect(result).toContain('label="Amount"')
+    expect(result).toContain("value={42}")
+    expect(result).toContain("onChange={handleChange}")
+  })
+
+  it("does not add type if already present", () => {
+    const input = `
+import { NumberField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <NumberField label="Amount" type="number" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBeNull()
+  })
+
+  it("returns null when not imported from @planningcenter/tapestry-react", () => {
+    const input = `
+import { NumberField } from "other-library"
+
+function Test() {
+  return <NumberField label="Amount" />
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBeNull()
+  })
+
+  it("handles multiple NumberField elements", () => {
+    const input = `
+import { NumberField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <NumberField label="Qty" />
+      <NumberField label="Price" />
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    const matches = result!.match(/type="number"/g)
+    expect(matches).toHaveLength(2)
+  })
+})

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

@@ -0,0 +1,14 @@
+import { addAttribute } from "../../shared/actions/addAttribute"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+export default attributeTransformFactory({
+  targetComponent: "NumberField",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    if (getAttribute({ element, name: "type" })) return false
+
+    addAttribute({ element, j, name: "type", value: "number" })
+    return true
+  },
+})

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

@@ -0,0 +1,126 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./numberFieldRenameToInput"
+
+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("numberFieldRenameToInput transform", () => {
+  it("renames NumberField to Input", () => {
+    const input = `
+import { NumberField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <NumberField label="Amount" type="number" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).toContain("<Input")
+    expect(result).not.toContain("NumberField")
+  })
+
+  it("updates import from tapestry-react to tapestry", () => {
+    const input = `
+import { NumberField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <NumberField label="Amount" type="number" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('@planningcenter/tapestry"')
+    expect(result).not.toContain("@planningcenter/tapestry-react")
+  })
+
+  it("returns null when not imported from @planningcenter/tapestry-react", () => {
+    const input = `
+import { NumberField } from "other-library"
+
+function Test() {
+  return <NumberField label="Amount" />
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBeNull()
+  })
+
+  it("handles multiple NumberField elements", () => {
+    const input = `
+import { NumberField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <NumberField label="Qty" type="number" />
+      <NumberField label="Price" type="number" />
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).not.toContain("NumberField")
+    const inputMatches = result!.match(/<Input/g)
+    expect(inputMatches).toHaveLength(2)
+  })
+
+  it("does not create duplicate Input identifier when file already imports Input from tapestry-react", () => {
+    const input = `
+import { Input, NumberField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Input label="Name" />
+      <NumberField label="Amount" type="number" />
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).not.toContain("NumberField")
+    // Should not produce two separate Input declarations (would cause parse error)
+    const importDeclarationMatches = result!.match(/import.*Input/g)
+    expect(importDeclarationMatches).toHaveLength(1)
+  })
+
+  it("merges Input import when file already imports Input from tapestry", () => {
+    const input = `
+import { Input } from "@planningcenter/tapestry"
+import { NumberField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Input label="Name" />
+      <NumberField label="Amount" type="number" />
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).not.toContain("NumberField")
+    // Should not produce two separate Input imports
+    const importMatches = result!.match(
+      /import.*Input.*from.*@planningcenter\/tapestry/g
+    )
+    expect(importMatches).toHaveLength(1)
+  })
+})

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

@@ -0,0 +1,9 @@
+import { componentTransformFactory } from "../../shared/transformFactories/componentTransformFactory"
+
+export default componentTransformFactory({
+  condition: () => true,
+  fromComponent: "NumberField",
+  fromPackage: "@planningcenter/tapestry-react",
+  toComponent: "Input",
+  toPackage: "@planningcenter/tapestry",
+})

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

@@ -0,0 +1,139 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./removeAsInput"
+
+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("removeAsInput transform", () => {
+  describe("basic transformation", () => {
+    it("should remove as='input' from Input", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input as="input" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Input />")
+      expect(result).not.toContain('as="input"')
+    })
+
+    it('should remove as="input" from Input with other props', () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input as="input" onChange={handleChange} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Input onChange={handleChange} />")
+      expect(result).not.toContain('as="input"')
+    })
+
+    it("should preserve Input without as prop", () => {
+      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 as='textarea'", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input as="textarea" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect other components", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Input as="input" />
+              <input as="input" />
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Input />")
+      expect(result).toContain('<input as="input" />')
+    })
+
+    it("should handle expression syntax as={'input'}", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input as={"input"} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      if (result) {
+        expect(result).toContain("<Input />")
+        expect(result).not.toContain('as={"input"}')
+      } else {
+        expect(input).toContain('as={"input"}')
+      }
+    })
+  })
+
+  describe("import handling", () => {
+    it("should not affect imports", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input as="input" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Input } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+})

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

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