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

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

@@ -0,0 +1,41 @@
+import { Transform } from "jscodeshift"
+
+import { addComment } from "../../shared/actions/addComment"
+import { getAttribute } from "../../shared/actions/getAttribute"
+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(hasAttribute("autoWidth"), transformableInput),
+  targetComponent: "Input",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const attr = getAttribute({ element, name: "autoWidth" })
+    if (!attr) return false
+
+    // Shorthand boolean (<Input autoWidth />) — pass through
+    if (attr.value === null) return false
+
+    // Explicit boolean ({true} or {false}) — pass through
+    if (
+      attr.value.type === "JSXExpressionContainer" &&
+      attr.value.expression.type === "BooleanLiteral"
+    ) {
+      return false
+    }
+
+    // Non-boolean value — add comment
+    addComment({
+      element,
+      j,
+      scope: "autoWidth",
+      source,
+      text: "'autoWidth' no longer accepts measurement values. Use autoWidth={true} to grow to content width, or remove the prop.",
+    })
+    return true
+  },
+})
+
+export default transform

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