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

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

@@ -0,0 +1,17 @@
+import { Transform } from "jscodeshift"
+
+import { sizeMappingFactory } from "../../shared/transformFactories/sizeMappingFactory"
+import { transformableSelect } from "../transformableSelect"
+
+const transform: Transform = sizeMappingFactory({
+  condition: transformableSelect,
+  sizeMapping: {
+    sm: "md",
+    xl: "lg",
+    xs: "md",
+  },
+  targetComponent: "Select",
+  targetPackage: "@planningcenter/tapestry-react",
+})
+
+export default transform

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

@@ -0,0 +1,148 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import pipeline from "../index"
+import transform from "./skipMultipleSelect"
+
+const j = jscodeshift.withParser("tsx")
+
+const SKIP_COMMENT =
+  "TODO: tapestry-migration (migration): Automatic migration skipped: Select uses the multiple prop which has no equivalent in the new API. Migrate this Select manually."
+
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("skipMultipleSelect transform", () => {
+  describe("selects that should be skipped", () => {
+    it("should add skip comment to Select with multiple", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select multiple label="Tags" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain(SKIP_COMMENT)
+    })
+
+    it("should add skip comment to Select with multiple={true}", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select multiple={true} label="Tags" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain(SKIP_COMMENT)
+    })
+
+    it("should preserve all props on skipped Select", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select
+      multiple
+      label="Tags"
+      size="lg"
+      onChange={handleChange}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(SKIP_COMMENT)
+      expect(result).toContain('label="Tags"')
+      expect(result).toContain('size="lg"')
+      expect(result).toContain("onChange={handleChange}")
+    })
+  })
+
+  describe("selects that should NOT be skipped", () => {
+    it("should return null for Select without multiple", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select label="Country" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("pipeline integration", () => {
+    it("should not migrate the import when all Selects have multiple", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select multiple label="Tags" size="sm" />
+}
+      `.trim()
+
+      const fileInfo = { path: "test.tsx", source: input }
+      const result = pipeline(
+        fileInfo,
+        { j, jscodeshift: j, report: () => {}, stats: () => {} },
+        {}
+      ) as string | null
+
+      // Import stays on tapestry-react since Select was skipped
+      expect(result).toContain("@planningcenter/tapestry-react")
+      expect(result).not.toContain('@planningcenter/tapestry"')
+      // Size is NOT migrated
+      expect(result).toContain('size="sm"')
+      // Skip comment is present
+      expect(result).toContain("Automatic migration skipped")
+    })
+
+    it("should migrate non-multiple Selects while skipping multiple ones", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Select multiple label="Skip me" size="sm" />
+      <Select label="Migrate me" size="sm" />
+    </div>
+  )
+}
+      `.trim()
+
+      const fileInfo = { path: "test.tsx", source: input }
+      const result = pipeline(
+        fileInfo,
+        { j, jscodeshift: j, report: () => {}, stats: () => {} },
+        {}
+      ) as string | null
+
+      expect(result).not.toBeNull()
+      // The skipped Select keeps size="sm"
+      expect(result).toContain('size="sm"')
+      // The migrated Select has size="md"
+      expect(result).toContain('size="md"')
+      // Import moves to tapestry (because at least one Select was migrated)
+      expect(result).toContain('@planningcenter/tapestry"')
+      // Skip comment is present
+      expect(result).toContain("Automatic migration skipped")
+    })
+  })
+})

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

@@ -0,0 +1,23 @@
+import { Transform } from "jscodeshift"
+
+import { addComment } from "../../shared/actions/addComment"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform: Transform = attributeTransformFactory({
+  condition: hasAttribute("multiple"),
+  targetComponent: "Select",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    addComment({
+      element,
+      j,
+      scope: "migration",
+      source,
+      text: "Automatic migration skipped: Select uses the multiple prop which has no equivalent in the new API. Migrate this Select manually.",
+    })
+    return true
+  },
+})
+
+export default transform

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

@@ -0,0 +1,217 @@
+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 { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select 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 { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select 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 { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select
+      state="error"
+      label="Name"
+      emptyValue="Pick"
+      onChange={handleChange}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("invalid")
+      expect(result).not.toContain("state=")
+      expect(result).toContain('label="Name"')
+      expect(result).toContain('emptyValue="Pick"')
+      expect(result).toContain("onChange={handleChange}")
+    })
+  })
+
+  describe("state='success' conversion", () => {
+    it("should remove state='success' and add comment", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select state="success" label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain('<Select 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 { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select state={"success"} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      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 { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const selectState = isError ? "error" : undefined
+  return <Select state={selectState} 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={selectState}")
+    })
+
+    it("should add comment for string variable", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select state={currentState} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (state)")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect Select without state prop", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not affect other components", () => {
+      const input = `
+import { Select, Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button state="error">Error</Button>
+      <Select state="error" label="Name" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Button state="error">Error</Button>')
+      expect(result).not.toContain('<Select state="error"')
+      expect(result).toContain("invalid")
+    })
+
+    it("should not transform if not imported from @planningcenter/tapestry-react", () => {
+      const input = `
+import { Select } from "other-library"
+
+function Test() {
+  return <Select state="error" label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not transform Select with multiple attribute", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select multiple state="error" label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should handle multiple selects with different states", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Select state="error" label="Error field" />
+      <Select state="success" label="Success field" />
+      <Select label="Normal field" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("invalid")
+      expect(result).toContain("TODO: tapestry-migration (state)")
+      expect(result).not.toContain('<Select state="error"')
+      expect(result).not.toContain('<Select state="success"')
+    })
+  })
+})

package/src/components/select/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 { transformableSelect } from "../transformableSelect"
+
+const transform: Transform = attributeTransformFactory({
+  condition: andConditions(hasAttribute("state"), transformableSelect),
+  targetComponent: "Select",
+  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 Select 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/select/transforms/stateToInvalidTernary.test.ts

@@ -0,0 +1,146 @@
+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 { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select 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 { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select 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 { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select 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 { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select 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 { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select 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 { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select state={hasError ? "error" : "success"} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when Select is from a different package", () => {
+      const input = `
+import { Select } from "other-library"
+
+function Test() {
+  return <Select state={hasError ? "error" : null} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when Select has multiple attribute", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select multiple state={hasError ? "error" : null} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when Select has no state prop", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+})

package/src/components/select/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 { transformableSelect } from "../transformableSelect"
+
+export default ternaryConditionalToPropFactory({
+  condition: andConditions(hasAttribute("state"), transformableSelect),
+  fromProp: "state",
+  matchValue: "error",
+  targetComponent: "Select",
+  targetPackage: "@planningcenter/tapestry-react",
+  toProp: "invalid",
+})