@planningcenter/tapestry-migration-cli 3.2.3-rc.4 → 3.2.3-rc.6

package/src/components/date-picker/transforms/mergeFieldIntoDateField.test.ts

@@ -0,0 +1,240 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./mergeFieldIntoDateField"
+
+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("mergeFieldIntoDateField transform", () => {
+  describe("basic prop merging", () => {
+    it("merges label prop from Field into DateField", () => {
+      const input = `
+import { DateField, Field } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Start date"><DateField value={date} onChange={setDate} /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('label="Start date"')
+      expect(result).toContain("<DateField")
+    })
+
+    it("renames feedbackText to description on DateField", () => {
+      const input = `
+import { DateField, Field } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field feedbackText="Required"><DateField value={date} onChange={setDate} /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).not.toContain("feedbackText")
+      expect(result).toContain('description="Required"')
+    })
+
+    it("copies state prop as-is to DateField", () => {
+      const input = `
+import { DateField, Field } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field state="error"><DateField value={date} onChange={setDate} /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('state="error"')
+    })
+  })
+
+  describe("unsupported props", () => {
+    it("adds TODO comment for helpContent and removes Field", () => {
+      const input = `
+import { DateField, Field } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field helpContent="Help"><DateField value={date} onChange={setDate} /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain(
+        "TODO: tapestry-migration (mergeFieldIntoDateField)"
+      )
+      expect(result).toContain("helpContent")
+      expect(result).toContain("not supported by DateField")
+    })
+  })
+
+  describe("conflict detection", () => {
+    it("adds warning when DateField already has label", () => {
+      const input = `
+import { DateField, Field } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Name"><DateField label="Other" value={date} onChange={setDate} /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('label="Other"')
+      expect(result).toContain(
+        "TODO: tapestry-migration (mergeFieldIntoDateField)"
+      )
+      expect(result).toContain("already has label")
+    })
+  })
+
+  describe("multiple children", () => {
+    it("adds comment when Field has multiple children", () => {
+      const input = `
+import { DateField, Field } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field><DateField value={date} onChange={setDate} /><button /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("<Field")
+      expect(result).toContain(
+        "TODO: tapestry-migration (mergeFieldIntoDateField)"
+      )
+      expect(result).toContain("multiple children")
+    })
+  })
+
+  describe("spread props on Field", () => {
+    it("bails out with TODO comment when Field has spread props", () => {
+      const input = `
+import { DateField, Field } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field {...fieldProps}><DateField value={date} onChange={setDate} /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("<Field")
+      expect(result).toContain(
+        "TODO: tapestry-migration (mergeFieldIntoDateField)"
+      )
+      expect(result).toContain("spread props")
+    })
+  })
+
+  describe("import cleanup", () => {
+    it("removes Field from import when all Fields are converted", () => {
+      const input = `
+import { DateField, Field } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Start date"><DateField value={date} onChange={setDate} /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("{ DateField, Field }")
+      expect(result).toContain("DateField")
+    })
+  })
+
+  describe("not from tapestry-react", () => {
+    it("returns null when Field is not imported from tapestry-react", () => {
+      const input = `
+import { Field } from "some-other-library"
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Name"><DateField value={date} onChange={setDate} /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when DateField is not imported from tapestry-react", () => {
+      const input = `
+import { Field } from "@planningcenter/tapestry-react"
+import { DateField } from "some-other-library"
+
+function Test() {
+  return (
+    <Field label="Name"><DateField value={date} onChange={setDate} /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("full prop set", () => {
+    it("merges label, feedbackText, state and flags helpContent as unsupported", () => {
+      const input = `
+import { DateField, Field } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Start date" feedbackText="Required" state="error" helpContent="Help">
+      <DateField value={date} onChange={setDate} />
+    </Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('label="Start date"')
+      expect(result).toContain('description="Required"')
+      expect(result).toContain('state="error"')
+      expect(result).toContain("helpContent")
+      expect(result).toContain("not supported by DateField")
+    })
+  })
+})

package/src/components/date-picker/transforms/mergeFieldIntoDateField.ts

@@ -0,0 +1,5 @@
+import { mergeFieldFactory } from "../../shared/transformFactories/mergeFieldFactory"
+
+export default mergeFieldFactory({
+  targetComponent: "DateField",
+})

package/src/components/date-picker/transforms/minDateToMin.test.ts

@@ -0,0 +1,87 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./minDateToMin"
+
+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("minDateToMin transform", () => {
+  it("should rename minDate to min", () => {
+    const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField minDate={startDate} value={date} onChange={setDate} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("min={startDate}")
+    expect(result).not.toContain("minDate")
+  })
+
+  it("should rename minDate with inline Date value", () => {
+    const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField minDate={new Date("2024-01-01")} value={date} onChange={setDate} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("min={")
+    expect(result).not.toContain("minDate=")
+  })
+
+  it("should not transform DateField without minDate prop", () => {
+    const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField value={date} onChange={setDate} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(input)
+  })
+
+  it("should not affect other components", () => {
+    const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input minDate={startDate} label="Name" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(input)
+  })
+
+  it("should preserve other props", () => {
+    const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField minDate={startDate} maxDate={endDate} value={date} onChange={setDate} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("min={startDate}")
+    expect(result).toContain("maxDate={endDate}")
+    expect(result).toContain("value={date}")
+  })
+})

package/src/components/date-picker/transforms/minDateToMin.ts

@@ -0,0 +1,16 @@
+import { Transform } from "jscodeshift"
+
+import { transformAttributeName } from "../../shared/actions/transformAttributeName"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform: Transform = attributeTransformFactory({
+  condition: hasAttribute("minDate"),
+  targetComponent: "DateField",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, options }) => {
+    return transformAttributeName("minDate", "min", { element, j, options })
+  },
+})
+
+export default transform

package/src/components/date-picker/transforms/momentToDateString.test.ts

@@ -0,0 +1,240 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./momentToDateString"
+
+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("momentToDateString transform", () => {
+  describe("minDate with moment().toDate()", () => {
+    it("converts moment(starts).add(1, 'day').toDate() to .format()", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField minDate={moment(starts).add(1, 'day').toDate()} value={date} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('.format("YYYY-MM-DD")')
+      expect(result).not.toContain(".toDate()}")
+      expect(result).toContain("moment(starts).add(1, 'day')")
+    })
+
+    it("converts moment().add(-10, 'years').toDate() to .format()", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField minDate={moment().add(-10, 'years').toDate()} value={date} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('.format("YYYY-MM-DD")')
+      expect(result).not.toContain(".toDate()}")
+    })
+
+    it("converts simple moment().toDate() to .format()", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField minDate={moment().toDate()} value={date} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('moment().format("YYYY-MM-DD")')
+      expect(result).not.toContain(".toDate()}")
+    })
+
+    it("adds a change comment noting the conversion", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField minDate={moment().toDate()} value={date} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("Converted .toDate()")
+      expect(result).toContain("ISO date strings")
+    })
+  })
+
+  describe("maxDate with moment().toDate()", () => {
+    it("converts maxDate moment chain to .format()", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField maxDate={moment(ends).subtract(1, 'day').toDate()} value={date} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('.format("YYYY-MM-DD")')
+      expect(result).not.toContain(".toDate()}")
+    })
+  })
+
+  describe("value with moment().toDate()", () => {
+    it("converts value moment chain to .format()", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField value={moment(selectedDate).toDate()} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('.format("YYYY-MM-DD")')
+      expect(result).not.toContain(".toDate()}")
+    })
+  })
+
+  describe("multiple props with moment", () => {
+    it("converts both minDate and maxDate moment chains", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <DateField
+      minDate={moment().add(-10, 'years').toDate()}
+      maxDate={moment().toDate()}
+      value={date}
+      onChange={setDate}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain(".toDate()}")
+      const formatMatches = result!.match(/\)\.format\("YYYY-MM-DD"\)\}/g)
+      expect(formatMatches).toHaveLength(2)
+    })
+  })
+
+  describe("moment without .toDate()", () => {
+    it("adds TODO comment when moment is used without .toDate()", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField minDate={moment(starts)} value={date} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain("manual conversion")
+    })
+
+    it("adds TODO for moment variable reference in value", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const d = moment()
+  return <DateField value={moment(d)} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("TODO: tapestry-migration")
+    })
+  })
+
+  describe("non-date values", () => {
+    it("does not transform string values", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField value="2024-01-01" onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("does not transform variable references", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField minDate={startDate} value={date} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("edge cases", () => {
+    it("does not affect other components", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input value={moment().toDate()} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("does not transform non-date props that use moment", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField onChange={moment().toDate()} value={date} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("does not transform DateField from other packages", () => {
+      const input = `
+import { DateField } from "other-library"
+
+function Test() {
+  return <DateField minDate={moment().toDate()} value={date} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+})

package/src/components/date-picker/transforms/momentToDateString.ts

@@ -0,0 +1,87 @@
+import {
+  CallExpression,
+  Expression,
+  MemberExpression,
+  Transform,
+} from "jscodeshift"
+
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const DATE_PROPS = ["minDate", "maxDate", "value"]
+
+/**
+ * Checks if an expression is a call to `.toDate()` at the end of a chain
+ */
+function isToDateCall(expr: Expression): expr is CallExpression {
+  return (
+    expr.type === "CallExpression" &&
+    expr.callee.type === "MemberExpression" &&
+    expr.callee.property.type === "Identifier" &&
+    expr.callee.property.name === "toDate" &&
+    expr.arguments.length === 0
+  )
+}
+
+/**
+ * Checks whether an expression references `moment` anywhere in its call chain
+ */
+function usesMoment(expr: Expression): boolean {
+  if (expr.type === "Identifier" && expr.name === "moment") return true
+  if (expr.type === "CallExpression") {
+    if (usesMoment(expr.callee as Expression)) return true
+    return expr.arguments.some((arg) =>
+      arg.type !== "SpreadElement" ? usesMoment(arg as Expression) : false
+    )
+  }
+  if (expr.type === "MemberExpression") {
+    return usesMoment(expr.object as Expression)
+  }
+  return false
+}
+
+const transform: Transform = attributeTransformFactory({
+  targetComponent: "DateField",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    let hasChanges = false
+
+    for (const propName of DATE_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 (!usesMoment(expr as Expression)) continue
+
+      if (isToDateCall(expr as Expression)) {
+        const callExpr = expr as CallExpression
+        const memberExpr = callExpr.callee as MemberExpression
+        memberExpr.property = j.identifier("format")
+        callExpr.arguments = [j.stringLiteral("YYYY-MM-DD")]
+
+        addCommentToAttribute({
+          attribute: attr,
+          commentKind: "change",
+          j,
+          text: `Converted .toDate() to .format("YYYY-MM-DD") — DatePicker accepts ISO date strings instead of Date objects. Verify the format is correct.`,
+        })
+        hasChanges = true
+      } else {
+        addCommentToAttribute({
+          attribute: attr,
+          j,
+          text: `This prop uses moment and may need manual conversion. DatePicker accepts DateValue or ISO date strings (YYYY-MM-DD) instead of Date objects.`,
+        })
+        hasChanges = true
+      }
+    }
+
+    return hasChanges
+  },
+})
+
+export default transform