@planningcenter/tapestry-migration-cli 3.1.0-rc.8 → 3.1.0

package/src/components/select/transforms/emptyValueToPlaceholder.test.ts

@@ -0,0 +1,122 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./emptyValueToPlaceholder"
+
+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("emptyValueToPlaceholder transform", () => {
+  it("should rename emptyValue string literal to placeholder", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select emptyValue="Pick one" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('placeholder="Pick one"')
+    expect(result).not.toContain("emptyValue")
+  })
+
+  it('should rename emptyValue={"text"} expression to placeholder', () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select emptyValue={"Pick one"} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("placeholder=")
+    expect(result).not.toContain("emptyValue")
+  })
+
+  it("should rename emptyValue with JSX expression value", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const text = "Pick one"
+  return <Select emptyValue={text} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("placeholder={text}")
+    expect(result).not.toContain("emptyValue")
+  })
+
+  it("should not transform Select without emptyValue", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select value="test" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(input)
+  })
+
+  it("should not transform other components", () => {
+    const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button emptyValue="test">Click</Button>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(input)
+  })
+
+  it("should handle multiple Select components", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Select emptyValue="Pick one" />
+      <Select emptyValue="Pick another" />
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toContain("emptyValue")
+    expect(result).toMatch(/placeholder="Pick one"/)
+    expect(result).toMatch(/placeholder="Pick another"/)
+  })
+
+  it("should preserve other props", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select emptyValue="Pick one" disabled onChange={handler} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('placeholder="Pick one"')
+    expect(result).toContain("disabled")
+    expect(result).toContain("onChange={handler}")
+  })
+})

package/src/components/select/transforms/emptyValueToPlaceholder.ts

@@ -0,0 +1,22 @@
+import { Transform } from "jscodeshift"
+
+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 { transformableSelect } from "../transformableSelect"
+
+const transform: Transform = attributeTransformFactory({
+  condition: andConditions(transformableSelect, hasAttribute("emptyValue")),
+  targetComponent: "Select",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, options }) => {
+    return transformAttributeName("emptyValue", "placeholder", {
+      element,
+      j,
+      options,
+    })
+  },
+})
+
+export default transform

package/src/components/select/transforms/innerRefToRef.test.ts

@@ -0,0 +1,89 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./innerRefToRef"
+
+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("innerRefToRef transform", () => {
+  it("should rename innerRef to ref", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const ref = useRef()
+  return <Select innerRef={ref} emptyValue="Pick one" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("ref={ref}")
+    expect(result).not.toContain("innerRef")
+  })
+
+  it("should handle innerRef with callback ref", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select innerRef={(node) => { myRef = node }} emptyValue="Pick one" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("ref={(node)")
+    expect(result).not.toContain("innerRef")
+  })
+
+  it("should not transform Select without innerRef", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select emptyValue="Pick one" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(input)
+  })
+
+  it("should not transform other components", () => {
+    const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button innerRef={ref}>Click</Button>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(input)
+  })
+
+  it("should preserve other props", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select innerRef={ref} emptyValue="Pick" disabled onChange={handler} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("ref={ref}")
+    expect(result).toContain("disabled")
+    expect(result).toContain("onChange={handler}")
+    expect(result).not.toContain("innerRef")
+  })
+})

package/src/components/select/transforms/innerRefToRef.ts

@@ -0,0 +1,18 @@
+import { Transform } from "jscodeshift"
+
+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 { transformableSelect } from "../transformableSelect"
+
+const transform: Transform = attributeTransformFactory({
+  condition: andConditions(transformableSelect, hasAttribute("innerRef")),
+  targetComponent: "Select",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, options }) => {
+    return transformAttributeName("innerRef", "ref", { element, j, options })
+  },
+})
+
+export default transform