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

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

@@ -0,0 +1,128 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./convertStyleProps"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string, options = {}) {
+  const fileInfo = { path: "test.tsx", source }
+  const result = transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    options
+  ) as string | null
+  return result || source
+}
+
+describe("convertStyleProps transform", () => {
+  describe("visible prop", () => {
+    it("should convert visible={false} to display: none", () => {
+      const source = `
+import { Input } from "@planningcenter/tapestry-react"
+
+export function TestComponent() {
+  return <Input visible={false} label="Name" />
+}
+      `
+
+      const result = applyTransform(source)
+      expect(result).toContain("style={{")
+      expect(result).toContain('display: "none"')
+      expect(result).not.toContain("visible={false}")
+    })
+
+    it("should remove visible={true} with no style changes", () => {
+      const source = `
+import { Input } from "@planningcenter/tapestry-react"
+
+export function TestComponent() {
+  return <Input visible={true} label="Name" />
+}
+      `
+
+      const result = applyTransform(source)
+      expect(result).not.toContain("visible={true}")
+      expect(result).not.toContain("style={{")
+    })
+  })
+
+  describe("style prop removal", () => {
+    it("should remove marginTop prop", () => {
+      const source = `
+import { Input } from "@planningcenter/tapestry-react"
+
+export function TestComponent() {
+  return <Input marginTop={16} label="Name" />
+}
+      `
+
+      const result = applyTransform(source)
+      expect(result).not.toContain("marginTop=")
+    })
+
+    it("should remove alignItems prop", () => {
+      const source = `
+import { Input } from "@planningcenter/tapestry-react"
+
+export function TestComponent() {
+  return <Input alignItems="center" label="Name" />
+}
+      `
+
+      const result = applyTransform(source)
+      expect(result).not.toContain("alignItems=")
+    })
+  })
+
+  describe("import handling", () => {
+    it("should not affect imports", () => {
+      const source = `
+import { Input } from "@planningcenter/tapestry-react"
+
+export function TestComponent() {
+  return <Input visible={false} label="Name" />
+}
+      `
+
+      const result = applyTransform(source)
+      expect(result).toContain(
+        'import { Input } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect Input with no style props", () => {
+      const source = `
+import { Input } from "@planningcenter/tapestry-react"
+
+export function TestComponent() {
+  return <Input label="Name" placeholder="Enter name" />
+}
+      `
+
+      const result = applyTransform(source)
+      expect(result).toBe(source)
+    })
+
+    it("should not affect other components", () => {
+      const source = `
+import { Input, Button } from "@planningcenter/tapestry-react"
+
+export function TestComponent() {
+  return (
+    <div>
+      <Button visible={false}>Hidden</Button>
+      <Input visible={false} label="Name" />
+    </div>
+  )
+}
+      `
+
+      const result = applyTransform(source)
+      expect(result).toContain("visible={false}")
+      expect(result).toContain('display: "none"')
+    })
+  })
+})

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

@@ -0,0 +1,12 @@
+import { stackViewPlugin } from "../../../stubs/stackViewPlugin"
+import { stylePropTransformFactory } from "../../shared/transformFactories/stylePropTransformFactory"
+import { transformableInput } from "../transformableInput"
+
+export default stylePropTransformFactory({
+  condition: transformableInput,
+  plugin: stackViewPlugin,
+  stylesToKeep: ["visible"],
+  stylesToRemove: [],
+  targetComponent: "Input",
+  targetPackage: "@planningcenter/tapestry-react",
+})

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

@@ -0,0 +1,186 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./highlightOnInteractionToSelectTextOnFocus"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string, verbose = false): string {
+  const fileInfo = { path: "test.tsx", source }
+  const result = transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    { verbose }
+  ) as string | null
+  return result || source
+}
+
+describe("highlightOnInteractionToSelectTextOnFocus transform", () => {
+  describe("basic rename", () => {
+    it("should rename highlightOnInteraction to selectTextOnFocus", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input highlightOnInteraction label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("selectTextOnFocus")
+      expect(result).not.toContain("highlightOnInteraction")
+    })
+
+    it("should rename highlightOnInteraction={true}", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input highlightOnInteraction={true} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("selectTextOnFocus={true}")
+      expect(result).not.toContain("highlightOnInteraction")
+    })
+
+    it("should rename highlightOnInteraction={false}", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input highlightOnInteraction={false} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("selectTextOnFocus={false}")
+      expect(result).not.toContain("highlightOnInteraction")
+    })
+
+    it("should rename highlightOnInteraction with variable expression", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input highlightOnInteraction={shouldHighlight} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("selectTextOnFocus={shouldHighlight}")
+      expect(result).not.toContain("highlightOnInteraction")
+    })
+
+    it("should preserve other props", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Input
+      highlightOnInteraction
+      label="Name"
+      placeholder="Enter name"
+      disabled
+      onChange={handleChange}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("selectTextOnFocus")
+      expect(result).not.toContain("highlightOnInteraction")
+      expect(result).toContain('label="Name"')
+      expect(result).toContain('placeholder="Enter name"')
+      expect(result).toContain("disabled")
+      expect(result).toContain("onChange={handleChange}")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect Input without highlightOnInteraction prop", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not affect other components", () => {
+      const input = `
+import { Input, Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button highlightOnInteraction>Click</Button>
+      <Input highlightOnInteraction label="Name" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<Button highlightOnInteraction>Click</Button>")
+      expect(result).toContain("selectTextOnFocus")
+    })
+
+    it("should handle multiple Input components", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Input highlightOnInteraction label="First" />
+      <Input highlightOnInteraction={true} label="Second" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("highlightOnInteraction")
+      const matches = result.match(/selectTextOnFocus/g)
+      expect(matches).toHaveLength(2)
+    })
+
+    it("should add CHANGED comment when verbose is enabled", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input highlightOnInteraction label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input, true)
+      expect(result).toContain("selectTextOnFocus")
+      expect(result).not.toContain("highlightOnInteraction=")
+      expect(result).toContain(
+        "CHANGED: tapestry-migration (selectTextOnFocus): renamed from highlightOnInteraction"
+      )
+    })
+
+    it("should not transform if not imported from @planningcenter/tapestry-react", () => {
+      const input = `
+import { Input } from "other-library"
+
+function Test() {
+  return <Input highlightOnInteraction label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+  })
+})

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

@@ -0,0 +1,27 @@
+import { transformAttributeName } from "../../shared/actions/transformAttributeName"
+import { andConditions } from "../../shared/conditions/andConditions"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { transformableInput } from "../transformableInput"
+
+const transform = attributeTransformFactory({
+  condition: andConditions(
+    hasAttribute("highlightOnInteraction"),
+    transformableInput
+  ),
+  targetComponent: "Input",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, options }) => {
+    return transformAttributeName(
+      "highlightOnInteraction",
+      "selectTextOnFocus",
+      {
+        element,
+        j,
+        options,
+      }
+    )
+  },
+})
+
+export default transform

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

@@ -0,0 +1,319 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./inputLabelToLabelProp"
+
+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("inputLabelToLabelProp transform", () => {
+  describe("successful conversions", () => {
+    it("InputLabel before Input → label prop added, InputLabel removed", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView>
+      <Input.InputLabel htmlFor="f1">Name</Input.InputLabel>
+      <Input id="f1" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="Name"')
+      expect(result).not.toContain("<Input.InputLabel")
+    })
+
+    it("Input before InputLabel → label prop added, InputLabel removed", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView>
+      <Input id="f1" />
+      <Input.InputLabel htmlFor="f1">Email</Input.InputLabel>
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="Email"')
+      expect(result).not.toContain("<Input.InputLabel")
+    })
+
+    it("no axis prop (default vertical) → transforms", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView>
+      <Input.InputLabel>Address</Input.InputLabel>
+      <Input id="addr" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="Address"')
+    })
+
+    it('axis="vertical" explicitly → transforms', () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView axis="vertical">
+      <Input.InputLabel>City</Input.InputLabel>
+      <Input id="city" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="City"')
+    })
+
+    it("axis={someVar} (dynamic, non-string-literal) → transforms (best-effort)", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView axis={someVar}>
+      <Input.InputLabel>State</Input.InputLabel>
+      <Input id="state" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="State"')
+    })
+
+    it("multiple label+input pairs in one StackView → both transformed", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView>
+      <Input.InputLabel>First Name</Input.InputLabel>
+      <Input id="first" />
+      <Input.InputLabel>Last Name</Input.InputLabel>
+      <Input id="last" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="First Name"')
+      expect(result).toContain('label="Last Name"')
+      expect(result).not.toContain("<Input.InputLabel")
+    })
+  })
+
+  describe("no-op / comment cases", () => {
+    it('axis="horizontal" → no transform, returns null', () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView axis="horizontal">
+      <Input.InputLabel>Name</Input.InputLabel>
+      <Input id="f1" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("Input has renderLeft → no transform for that pair, returns null", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView>
+      <Input.InputLabel>Name</Input.InputLabel>
+      <Input id="f1" renderLeft={() => <span />} />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("Input has renderRight → no transform for that pair, returns null", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView>
+      <Input.InputLabel>Name</Input.InputLabel>
+      <Input id="f1" renderRight={() => <span />} />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("Input already has label prop → TODO comment added, InputLabel not removed", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView>
+      <Input.InputLabel>New Label</Input.InputLabel>
+      <Input id="f1" label="Existing" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain(
+        "TODO: tapestry-migration (inputLabelToLabelProp)"
+      )
+      expect(result).toContain("already has a label prop")
+      expect(result).toContain("New Label")
+      expect(result).toContain('label="Existing"')
+      // Should not add a second label attribute
+      expect(result?.match(/label=/g)?.length).toBe(1)
+    })
+
+    it("InputLabel has complex children (JSX nodes) → TODO comment added, InputLabel not removed", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView>
+      <Input.InputLabel><span>Name <em>*</em></span></Input.InputLabel>
+      <Input id="f1" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain(
+        "TODO: tapestry-migration (inputLabelToLabelProp)"
+      )
+      expect(result).toContain("complex and cannot be auto-converted")
+      expect(result).toContain("<Input.InputLabel")
+      expect(result).not.toContain('label="')
+    })
+
+    it("Input and InputLabel not adjacent (other element between them) → no transform", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView>
+      <Input.InputLabel>Name</Input.InputLabel>
+      <span>hint</span>
+      <Input id="f1" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("no StackView wrapper → no transform, returns null", () => {
+      const input = `
+import { Input, StackView } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Input.InputLabel>Name</Input.InputLabel>
+      <Input id="f1" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("StackView from different package → no transform, returns null", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+import { StackView } from "other-library"
+
+function Test() {
+  return (
+    <StackView>
+      <Input.InputLabel>Name</Input.InputLabel>
+      <Input id="f1" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("StackView not imported at all → no transform, returns null", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <StackView>
+      <Input.InputLabel>Name</Input.InputLabel>
+      <Input id="f1" />
+    </StackView>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+})