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

package/src/components/time-field/transforms/stateToInvalidTernary.test.ts

@@ -0,0 +1,100 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./stateToInvalidTernary"
+
+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("stateToInvalidTernary transform", () => {
+  it("converts state={x ? 'error' : undefined} to invalid={x}", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField state={hasError ? "error" : undefined} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("invalid={hasError}")
+    expect(result).not.toContain("state=")
+  })
+
+  it("converts state={x ? 'error' : null} to invalid={x}", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField state={hasError ? "error" : null} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("invalid={hasError}")
+    expect(result).not.toContain("state=")
+  })
+
+  it("converts state={x ? undefined : 'error'} to invalid={!x}", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField state={validateServiceTime(serviceTime) ? undefined : "error"} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("invalid={!validateServiceTime(serviceTime)}")
+    expect(result).not.toContain("state=")
+  })
+
+  it("converts state={x ? null : 'error'} to invalid={!x}", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField state={isValid ? null : "error"} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("invalid={!isValid}")
+    expect(result).not.toContain("state=")
+  })
+
+  it("returns input unchanged when state prop is absent", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(input)
+  })
+
+  it("does not affect other components", () => {
+    const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button state={hasError ? "error" : undefined}>Click</Button>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(input)
+  })
+})

package/src/components/time-field/transforms/stateToInvalidTernary.ts

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

package/src/components/time-field/transforms/tupleToTime.test.ts

@@ -0,0 +1,182 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./tupleToTime"
+
+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("tupleToTime transform", () => {
+  describe("literal tuple conversion", () => {
+    it("converts value={[9, 30]} to value={new Time(9, 30)}", () => {
+      const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField value={[9, 30]} onChange={setTime} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("new Time(9, 30)")
+      expect(result).not.toContain("[9, 30]")
+      expect(result).toContain("CHANGED: tapestry-migration")
+    })
+
+    it("converts defaultValue={[14, 0]} to new Time", () => {
+      const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField defaultValue={[14, 0]} onChange={setTime} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("new Time(14, 0)")
+      expect(result).not.toContain("[14, 0]")
+    })
+
+    it("imports Time from @internationalized/date when converting", () => {
+      const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField value={[9, 30]} onChange={setTime} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('import { Time } from "@internationalized/date"')
+    })
+
+    it("does not duplicate Time import if already present", () => {
+      const input = `
+import { Time } from "@internationalized/date"
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField value={[9, 30]} onChange={setTime} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      const matches = result!.match(/from ["']@internationalized\/date["']/g)
+      expect(matches).toHaveLength(1)
+    })
+
+    it("converts both value and defaultValue tuples in the same element", () => {
+      const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField value={[9, 30]} defaultValue={[8, 0]} onChange={setTime} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("new Time(9, 30)")
+      expect(result).toContain("new Time(8, 0)")
+    })
+  })
+
+  describe("non-tuple expressions", () => {
+    it("adds TODO comment for variable references", () => {
+      const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField value={currentTime} onChange={setTime} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain("TimeValue")
+      expect(result).toContain("currentTime")
+    })
+
+    it("adds TODO for tuples with non-numeric elements", () => {
+      const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField value={[hours, minutes]} onChange={setTime} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("TODO: tapestry-migration")
+    })
+
+    it("does not add Time import when only TODO comments are added", () => {
+      const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField value={currentTime} onChange={setTime} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain('from "@internationalized/date"')
+    })
+  })
+
+  describe("edge cases", () => {
+    it("returns null when TimeField has no value/defaultValue", () => {
+      const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField onChange={setTime} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("does not affect TimeField from other packages", () => {
+      const input = `
+import { TimeField } from "some-other-lib"
+
+function Test() {
+  return <TimeField value={[9, 30]} onChange={setTime} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("does not affect other components", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input value={[9, 30]} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+})

package/src/components/time-field/transforms/tupleToTime.ts

@@ -0,0 +1,107 @@
+import { ArrayExpression, Expression, Transform } from "jscodeshift"
+
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { addImport } from "../../shared/transformFactories/helpers/manageImports"
+
+const TUPLE_PROPS = ["value", "defaultValue"]
+
+function isNumberLike(expr: Expression): boolean {
+  if (expr.type === "NumericLiteral") return true
+  if (
+    expr.type === "UnaryExpression" &&
+    expr.operator === "-" &&
+    expr.argument.type === "NumericLiteral"
+  ) {
+    return true
+  }
+  return false
+}
+
+function isHourMinuteTuple(expr: Expression): expr is ArrayExpression {
+  if (expr.type !== "ArrayExpression") return false
+  if (expr.elements.length !== 2) return false
+  return expr.elements.every(
+    (el) => el !== null && el.type !== "SpreadElement" && isNumberLike(el)
+  )
+}
+
+const transform: Transform = (fileInfo, api) => {
+  const j = api.jscodeshift
+  const source = j(fileInfo.source)
+  let hasChanges = false
+  let needsTimeImport = false
+
+  // Find local name for TimeField imported from tapestry-react
+  let timeFieldLocalName: string | null = null
+  source
+    .find(j.ImportDeclaration, {
+      source: { value: "@planningcenter/tapestry-react" },
+    })
+    .forEach((path) => {
+      const specs = path.value.specifiers || []
+      specs.forEach((spec) => {
+        if (
+          spec.type === "ImportSpecifier" &&
+          spec.imported?.name === "TimeField"
+        ) {
+          timeFieldLocalName = (spec.local?.name as string) || "TimeField"
+        }
+      })
+    })
+
+  if (!timeFieldLocalName) return null
+
+  source.find(j.JSXOpeningElement).forEach((path) => {
+    const opening = path.value
+    if (opening.name.type !== "JSXIdentifier") return
+    if (opening.name.name !== timeFieldLocalName) return
+
+    const element = path.parent.value
+    for (const propName of TUPLE_PROPS) {
+      const attr = getAttribute({ element, name: propName })
+      if (!attr?.value) continue
+      if (attr.value.type !== "JSXExpressionContainer") continue
+
+      const expr = attr.value.expression
+      if (expr.type === "JSXEmptyExpression") continue
+
+      if (isHourMinuteTuple(expr as Expression)) {
+        const arr = expr as ArrayExpression
+        const [hourEl, minuteEl] = arr.elements as Expression[]
+        attr.value = j.jsxExpressionContainer(
+          j.newExpression(j.identifier("Time"), [hourEl, minuteEl])
+        )
+        addCommentToAttribute({
+          attribute: attr,
+          commentKind: "change",
+          j,
+          text: "Converted [hours, minutes] tuple to new Time(hours, minutes) — TimeField now uses TimeValue from @internationalized/date.",
+        })
+        hasChanges = true
+        needsTimeImport = true
+      } else {
+        addCommentToAttribute({
+          attribute: attr,
+          j,
+          text: "TimeField now expects a TimeValue (e.g. new Time(hours, minutes)) from @internationalized/date instead of a [hours, minutes] tuple. Migrate this value manually.",
+        })
+        hasChanges = true
+      }
+    }
+  })
+
+  if (needsTimeImport) {
+    addImport({
+      component: "Time",
+      conflictAlias: "Time",
+      j,
+      pkg: "@internationalized/date",
+      source,
+    })
+  }
+
+  return hasChanges ? source.toSource() : null
+}
+
+export default transform

package/src/components/time-field/transforms/twelveHourClockToHourCycle.test.ts

@@ -0,0 +1,117 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./twelveHourClockToHourCycle"
+
+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("twelveHourClockToHourCycle transform", () => {
+  it("converts shorthand twelveHourClock to hourCycle={12}", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField twelveHourClock value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).toContain("hourCycle={12}")
+    expect(result).not.toContain("twelveHourClock")
+  })
+
+  it("converts twelveHourClock={true} to hourCycle={12}", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField twelveHourClock={true} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).toContain("hourCycle={12}")
+    expect(result).not.toContain("twelveHourClock")
+  })
+
+  it("converts twelveHourClock={false} to hourCycle={24}", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField twelveHourClock={false} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).toContain("hourCycle={24}")
+    expect(result).not.toContain("twelveHourClock")
+  })
+
+  it("converts dynamic expression to hourCycle ternary with change comment", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField twelveHourClock={use12} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).toContain("hourCycle={use12 ? 12 : 24}")
+    expect(result).toContain("CHANGED: tapestry-migration")
+    expect(result).not.toContain("twelveHourClock=")
+  })
+
+  it("returns null when TimeField has no twelveHourClock prop", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBeNull()
+  })
+
+  it("does not affect other components", () => {
+    const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input twelveHourClock value="abc" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBeNull()
+  })
+
+  it("does not affect TimeField imported from a different package", () => {
+    const input = `
+import { TimeField } from "some-other-lib"
+
+function Test() {
+  return <TimeField twelveHourClock value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBeNull()
+  })
+})

package/src/components/time-field/transforms/twelveHourClockToHourCycle.ts

@@ -0,0 +1,65 @@
+import { Transform } from "jscodeshift"
+
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform: Transform = attributeTransformFactory({
+  condition: hasAttribute("twelveHourClock"),
+  targetComponent: "TimeField",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const attr = getAttribute({ element, name: "twelveHourClock" })
+    if (!attr) return false
+
+    // Shorthand `twelveHourClock` (no value) — boolean true → hourCycle={12}
+    if (attr.value === null || attr.value === undefined) {
+      attr.name.name = "hourCycle"
+      attr.value = j.jsxExpressionContainer(j.numericLiteral(12))
+      return true
+    }
+
+    if (attr.value.type === "JSXExpressionContainer") {
+      const expr = attr.value.expression
+
+      if (expr.type === "BooleanLiteral") {
+        attr.name.name = "hourCycle"
+        attr.value = j.jsxExpressionContainer(
+          j.numericLiteral(expr.value ? 12 : 24)
+        )
+        return true
+      }
+
+      // Dynamic expression — convert to ternary `hourCycle={x ? 12 : 24}`
+      if (expr.type !== "JSXEmptyExpression") {
+        attr.name.name = "hourCycle"
+        attr.value = j.jsxExpressionContainer(
+          j.conditionalExpression(
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            expr as any,
+            j.numericLiteral(12),
+            j.numericLiteral(24)
+          )
+        )
+        addCommentToAttribute({
+          attribute: attr,
+          commentKind: "change",
+          j,
+          text: "Converted 'twelveHourClock' to 'hourCycle' (12 or 24). Verify the conditional logic is correct. NOTE: i18n is built-in to Tapestry.",
+        })
+        return true
+      }
+    }
+
+    // Fallback: leave attribute, add TODO
+    addCommentToAttribute({
+      attribute: attr,
+      j,
+      text: "'twelveHourClock' has been replaced by 'hourCycle' (12 or 24). Migrate this prop manually. NOTE: i18n is built-in to Tapestry.",
+    })
+    return true
+  },
+})
+
+export default transform