@planningcenter/tapestry-migration-cli 3.2.3-rc.3 → 3.2.3-rc.5

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

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

@@ -0,0 +1,157 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./moveDatePickerImport"
+
+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("moveDatePickerImport transform", () => {
+  describe("import migration", () => {
+    it("should rename DateField to DatePicker and change import", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField value={date} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { DatePicker } from "@planningcenter/tapestry"'
+      )
+      expect(result).not.toContain("@planningcenter/tapestry-react")
+      expect(result).toContain("<DatePicker")
+      expect(result).not.toContain("<DateField")
+    })
+
+    it("should only move DateField, leaving other imports in place", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>Click</Button>
+      <DateField value={date} onChange={setDate} />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { DatePicker } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<DatePicker")
+    })
+  })
+
+  describe("import conflict handling", () => {
+    it("should use TdsDatePicker alias when DatePicker is already imported from another package", () => {
+      const input = `
+import { DatePicker } from "some-other-library"
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <DatePicker />
+      <DateField value={date} onChange={setDate} />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { DatePicker } from "some-other-library"'
+      )
+      expect(result).toContain(
+        'import { DatePicker as TdsDatePicker } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<TdsDatePicker")
+      expect(result).not.toContain("<DateField")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect other components", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button>Click me</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+    })
+
+    it("should handle no imports", () => {
+      const input = `
+function Test() {
+  return <div>No imports</div>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should preserve all attributes", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <DateField
+      value={date}
+      onChange={setDate}
+      disabled
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { DatePicker } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("value={date}")
+      expect(result).toContain("onChange={setDate}")
+      expect(result).toContain("disabled")
+    })
+
+    it("should handle alias import", () => {
+      const input = `
+import { DateField as TapestryDateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TapestryDateField value={date} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("@planningcenter/tapestry")
+      expect(result).not.toContain("@planningcenter/tapestry-react")
+    })
+  })
+})

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

@@ -0,0 +1,14 @@
+import { Transform } from "jscodeshift"
+
+import { componentTransformFactory } from "../../shared/transformFactories/componentTransformFactory"
+
+const transform: Transform = componentTransformFactory({
+  condition: () => true,
+  conflictAlias: "TdsDatePicker",
+  fromComponent: "DateField",
+  fromPackage: "@planningcenter/tapestry-react",
+  toComponent: "DatePicker",
+  toPackage: "@planningcenter/tapestry",
+})
+
+export default transform