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

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

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

@@ -0,0 +1,220 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./nativeDateToString"
+
+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("nativeDateToString transform", () => {
+  describe("new Date with string literal", () => {
+    it("converts new Date('2024-01-01') in value to string literal", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField value={new Date("2024-01-01")} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('{"2024-01-01"}')
+      expect(result).not.toContain("value={new Date")
+      expect(result).toContain("CHANGED: tapestry-migration")
+      expect(result).toContain("string literal")
+    })
+
+    it("converts new Date('2024-01-01') in minDate to string literal", () => {
+      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).not.toBeNull()
+      expect(result).toContain('{"2024-01-01"}')
+      expect(result).toContain("Verify the date string")
+    })
+
+    it("converts new Date('2024-12-31') in maxDate to string literal", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField maxDate={new Date("2024-12-31")} value={date} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('{"2024-12-31"}')
+      expect(result).not.toContain("maxDate={new Date")
+    })
+  })
+
+  describe("new Date with dynamic arguments", () => {
+    it("adds TODO for new Date() with no arguments", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField minDate={new Date()} value={date} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain("native Date is not supported")
+    })
+
+    it("adds TODO for new Date(variable)", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField value={new Date(starts)} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain("native Date is not supported")
+      expect(result).toContain("ISO date string")
+    })
+
+    it("adds TODO for new Date with numeric arguments", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField value={new Date(2024, 0, 1)} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain("native Date is not supported")
+    })
+
+    it("adds TODO for new Date in maxDate prop", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField maxDate={new Date(ends)} value={date} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain("native Date is not supported")
+    })
+  })
+
+  describe("multiple props with new Date", () => {
+    it("handles new Date in both minDate and maxDate", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <DateField
+      minDate={new Date("2024-01-01")}
+      maxDate={new Date(ends)}
+      value={date}
+      onChange={setDate}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain('{"2024-01-01"}')
+      expect(result).toContain("native Date is not supported")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("does not affect non-date props with new Date", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField onChange={new Date()} value={date} />
+}
+      `.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={new Date()} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("does not affect DateField from other packages", () => {
+      const input = `
+import { DateField } from "other-library"
+
+function Test() {
+  return <DateField value={new Date("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 value={startDate} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("does not transform moment expressions (handled by separate transform)", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField value={moment().toDate()} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+})

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

@@ -0,0 +1,59 @@
+import { Expression, NewExpression, 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"]
+
+function isNewDate(expr: Expression): expr is NewExpression {
+  return (
+    expr.type === "NewExpression" &&
+    expr.callee.type === "Identifier" &&
+    expr.callee.name === "Date"
+  )
+}
+
+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 (!isNewDate(expr as Expression)) continue
+
+      const newExpr = expr as NewExpression
+      const arg = newExpr.arguments[0]
+
+      if (arg && arg.type === "StringLiteral") {
+        attr.value = j.jsxExpressionContainer(j.stringLiteral(arg.value))
+
+        addCommentToAttribute({
+          attribute: attr,
+          commentKind: "change",
+          j,
+          text: `Converted new Date("${arg.value}") to string literal — DatePicker accepts ISO date strings. Verify the date string is in YYYY-MM-DD format.`,
+        })
+        hasChanges = true
+      } else {
+        addCommentToAttribute({
+          attribute: attr,
+          j,
+          text: `native Date is not supported by DatePicker. Convert to an ISO date string (YYYY-MM-DD) or DateValue from @internationalized/date.`,
+        })
+        hasChanges = true
+      }
+    }
+
+    return hasChanges
+  },
+})
+
+export default transform

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

@@ -0,0 +1,120 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./removeDuplicateKeys"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string) {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("removeDuplicateKeys transform", () => {
+  it("removes duplicate attributes and keeps the first occurrence", () => {
+    const source = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+export function Test() {
+  return <DateField size="md" disabled size="lg" value={date} onChange={setDate} />
+}
+    `.trim()
+
+    const result = applyTransform(source)
+    expect(result).not.toBeNull()
+    expect(result).toContain('size="md"')
+    expect(result).not.toContain('size="lg"')
+    expect(result).toContain("disabled")
+    expect(result).toContain("TODO: tapestry-migration (duplicate-props)")
+    expect(result).toContain("Removed duplicate key: size = lg")
+  })
+
+  it("handles multiple duplicates on a single element", () => {
+    const source = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+export function Test() {
+  return (
+    <DateField
+      value={first}
+      onChange={firstHandler}
+      value={second}
+      onChange={secondHandler}
+    />
+  )
+}
+    `.trim()
+
+    const result = applyTransform(source)
+    expect(result).not.toBeNull()
+    expect(result).toContain("value={first}")
+    expect(result).toContain("onChange={firstHandler}")
+    expect(result).not.toContain("value={second}")
+    expect(result).not.toContain("onChange={secondHandler}")
+  })
+
+  it("returns null when there are no duplicates", () => {
+    const source = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+export function Test() {
+  return <DateField size="md" value={date} onChange={setDate} />
+}
+    `.trim()
+
+    expect(applyTransform(source)).toBeNull()
+  })
+
+  it("handles aliased DateField imports", () => {
+    const source = `
+import { DateField as TapestryDateField } from "@planningcenter/tapestry-react"
+
+export function Test() {
+  return <TapestryDateField size="md" size="lg" value={date} onChange={setDate} />
+}
+    `.trim()
+
+    const result = applyTransform(source)
+    expect(result).not.toBeNull()
+    expect(result).toContain('size="md"')
+    expect(result).not.toContain('size="lg"')
+  })
+
+  it("does not affect DateField imported from a different package", () => {
+    const source = `
+import { DateField } from "@planningcenter/tapestry"
+
+export function Test() {
+  return <DateField size="md" size="lg" />
+}
+    `.trim()
+
+    expect(applyTransform(source)).toBeNull()
+  })
+
+  it("does not touch other components with duplicate attributes", () => {
+    const source = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+export function Test() {
+  return (
+    <div>
+      <DateField size="md" size="lg" value={date} onChange={setDate} />
+      <input type="text" type="email" />
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(source)
+    expect(result).not.toBeNull()
+    expect(result).toContain('size="md"')
+    expect(result).not.toContain('size="lg"')
+    expect(result).toContain('type="text"')
+    expect(result).toContain('type="email"')
+  })
+})

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

@@ -0,0 +1,8 @@
+import { removeDuplicateKeys } from "../../shared/actions/removeDuplicateKeys"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+export default attributeTransformFactory({
+  targetComponent: "DateField",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: removeDuplicateKeys,
+})

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

@@ -0,0 +1,119 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./removeFormatValue"
+
+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
+}
+
+function stripComments(source: string): string {
+  return source.replace(/\/\*[\s\S]*?\*\//g, "")
+}
+
+describe("removeFormatValue transform", () => {
+  it("removes formatValue and adds a TODO comment with the removed value", () => {
+    const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <DateField formatValue="MM/dd/yyyy" value={date} onChange={setDate} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(stripComments(result || "")).not.toContain("formatValue")
+    expect(result).toContain("TODO: tapestry-migration (formatValue)")
+    expect(result).toContain(
+      "DateField formats dates automatically based on the user's locale"
+    )
+    expect(result).toContain('removed: formatValue="MM/dd/yyyy"')
+    expect(result).toContain("value={date}")
+    expect(result).toContain("onChange={setDate}")
+  })
+
+  it("preserves other attributes", () => {
+    const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <DateField
+      formatValue="MM/dd/yyyy"
+      label="Start date"
+      value={date}
+      onChange={setDate}
+      disabled
+    />
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('label="Start date"')
+    expect(result).toContain("value={date}")
+    expect(result).toContain("onChange={setDate}")
+    expect(result).toContain("disabled")
+    expect(stripComments(result || "")).not.toContain("formatValue")
+  })
+
+  it("handles aliased DateField imports", () => {
+    const input = `
+import { DateField as TapestryDateField } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <TapestryDateField formatValue="MM/dd/yyyy" value={date} onChange={setDate} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(stripComments(result || "")).not.toContain("formatValue")
+    expect(result).toContain("TODO: tapestry-migration (formatValue)")
+  })
+
+  it("returns null when DateField has no formatValue", () => {
+    const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <DateField value={date} onChange={setDate} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(null)
+  })
+
+  it("does not affect DateField imported from a different package", () => {
+    const input = `
+import { DateField } from "@planningcenter/tapestry"
+
+export default function Test() {
+  return <DateField formatValue="MM/dd/yyyy" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(null)
+  })
+
+  it("does not affect other components with the same prop", () => {
+    const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Input formatValue="abc" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(null)
+  })
+})