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

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

@@ -0,0 +1,208 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./stateToInvalid"
+
+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("stateToInvalid transform", () => {
+  describe("state='error' conversion", () => {
+    it("should convert state='error' to invalid", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input state="error" label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("invalid")
+      expect(result).not.toContain('state="error"')
+    })
+
+    it('should convert state={"error"} expression to invalid', () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input state={"error"} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("invalid")
+      expect(result).not.toContain("state=")
+    })
+
+    it("should preserve other props when converting state='error'", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Input
+      state="error"
+      label="Name"
+      placeholder="Enter name"
+      onChange={handleChange}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("invalid")
+      expect(result).not.toContain("state=")
+      expect(result).toContain('label="Name"')
+      expect(result).toContain('placeholder="Enter name"')
+      expect(result).toContain("onChange={handleChange}")
+    })
+  })
+
+  describe("state='success' conversion", () => {
+    it("should remove state='success' and add comment", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input state="success" label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      // The prop is removed from the element (comment text may still contain the string)
+      expect(result).not.toContain('<Input state="success"')
+      expect(result).toContain("TODO: tapestry-migration (state)")
+      expect(result).toContain("no equivalent")
+    })
+
+    it('should remove state={"success"} and add comment', () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input state={"success"} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      // The prop is removed from the element
+      expect(result).not.toContain("state={")
+      expect(result).toContain("TODO: tapestry-migration (state)")
+    })
+  })
+
+  describe("dynamic state value", () => {
+    it("should add comment for variable state value", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const inputState = isError ? "error" : undefined
+  return <Input state={inputState} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (state)")
+      expect(result).toContain("'state' has been replaced by 'invalid'")
+      expect(result).toContain("state={inputState}")
+    })
+
+    it("should add comment for string variable", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input state={currentState} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (state)")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect Input without state 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 state="error">Error</Button>
+      <Input state="error" label="Name" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      // Button state should be unchanged
+      expect(result).toContain('<Button state="error">Error</Button>')
+      // Input state should be transformed
+      expect(result).not.toContain('<Input state="error"')
+      expect(result).toContain("invalid")
+    })
+
+    it("should not transform if not imported from @planningcenter/tapestry-react", () => {
+      const input = `
+import { Input } from "other-library"
+
+function Test() {
+  return <Input state="error" label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should handle multiple inputs with different states", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Input state="error" label="Error field" />
+      <Input state="success" label="Success field" />
+      <Input label="Normal field" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("invalid")
+      expect(result).toContain("TODO: tapestry-migration (state)")
+      expect(result).not.toContain('<Input state="error"')
+      expect(result).not.toContain('<Input state="success"')
+    })
+  })
+})

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

@@ -0,0 +1,59 @@
+import { Transform } from "jscodeshift"
+
+import { addAttribute } from "../../shared/actions/addAttribute"
+import { addComment } from "../../shared/actions/addComment"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { getAttributeValue } from "../../shared/actions/getAttributeValue"
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+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("state"), transformableInput),
+  targetComponent: "Input",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const attr = getAttribute({ element, name: "state" })
+    if (!attr) return false
+
+    const value = getAttributeValue({ attribute: attr, j })
+
+    if (value === "error") {
+      removeAttribute("state", { element, j, source })
+      addAttribute({
+        booleanAsShorthand: true,
+        element,
+        j,
+        name: "invalid",
+        value: true,
+      })
+      return true
+    }
+
+    if (value === "success") {
+      removeAttribute("state", { element, j, source })
+      addComment({
+        element,
+        j,
+        scope: "state",
+        source,
+        text: "'state=\"success\"' has no equivalent in the new Input API. Remove this prop and implement success feedback separately.",
+      })
+      return true
+    }
+
+    // Dynamic value — can't determine at compile time
+    addComment({
+      element,
+      j,
+      scope: "state",
+      source,
+      text: "'state' has been replaced by 'invalid' (boolean). For error state, use invalid={true}. 'success' has no equivalent. Migrate this prop manually.",
+    })
+    return true
+  },
+})
+
+export default transform

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

@@ -0,0 +1,159 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./stateToInvalidTernary"
+
+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("stateToInvalidTernary transform", () => {
+  describe("successful conversions", () => {
+    it("converts state={hasError ? 'error' : null} → invalid={hasError}", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input state={hasError ? "error" : null} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("invalid={hasError}")
+      expect(result).not.toContain("state=")
+    })
+
+    it("converts member expression: state={form.hasError ? 'error' : null} → invalid={form.hasError}", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input state={form.hasError ? "error" : null} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("invalid={form.hasError}")
+      expect(result).not.toContain("state=")
+    })
+
+    it("converts binary expression: state={errors.length > 0 ? 'error' : null} → invalid={errors.length > 0}", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input state={errors.length > 0 ? "error" : null} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("invalid={errors.length > 0}")
+      expect(result).not.toContain("state=")
+    })
+
+    it("converts state={hasError ? 'error' : undefined} → invalid={hasError}", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input state={hasError ? "error" : undefined} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("invalid={hasError}")
+      expect(result).not.toContain("state=")
+    })
+  })
+
+  describe("no-op cases", () => {
+    it("returns null when consequent is not 'error'", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input state={hasWarning ? "warning" : null} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when alternate is not null/undefined", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input state={hasError ? "error" : "success"} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when Input is from a different package", () => {
+      const input = `
+import { Input } from "other-library"
+
+function Test() {
+  return <Input state={hasError ? "error" : null} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when Input has renderLeft prop", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input state={hasError ? "error" : null} renderLeft={() => <span />} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when Input has renderRight prop", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input state={hasError ? "error" : null} renderRight={() => <span />} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when Input has no state prop", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+})

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

@@ -0,0 +1,13 @@
+import { andConditions } from "../../shared/conditions/andConditions"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { ternaryConditionalToPropFactory } from "../../shared/transformFactories/ternaryConditionalToPropFactory"
+import { transformableInput } from "../transformableInput"
+
+export default ternaryConditionalToPropFactory({
+  condition: andConditions(hasAttribute("state"), transformableInput),
+  fromProp: "state",
+  matchValue: "error",
+  targetComponent: "Input",
+  targetPackage: "@planningcenter/tapestry-react",
+  toProp: "invalid",
+})