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

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",
+})