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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "3.2.3-rc.3",
+  "version": "3.2.3-rc.5",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
-    "@planningcenter/tapestry": "^3.2.3-rc.3",
+    "@planningcenter/tapestry": "^3.2.3-rc.5",
     "@planningcenter/tapestry-react": "^4.11.5",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^20.0.0",
@@ -52,5 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "683d012d5c203309b275e145ecd6d1e7a02ef414"
+  "gitHead": "709a2ca95766701dd9466ee22c1e8a96fa3da9df"
 }

package/src/components/date-picker/index.ts

@@ -0,0 +1,56 @@
+import { Transform } from "jscodeshift"
+
+import auditSpreadProps from "./transforms/auditSpreadProps"
+import convertStyleProps from "./transforms/convertStyleProps"
+import maxDateToMax from "./transforms/maxDateToMax"
+import mergeFieldIntoDateField from "./transforms/mergeFieldIntoDateField"
+import minDateToMin from "./transforms/minDateToMin"
+import momentToDateString from "./transforms/momentToDateString"
+import moveDatePickerImport from "./transforms/moveDatePickerImport"
+import nativeDateToString from "./transforms/nativeDateToString"
+import removeDuplicateKeys from "./transforms/removeDuplicateKeys"
+import removeFormatValue from "./transforms/removeFormatValue"
+import removePlaceholder from "./transforms/removePlaceholder"
+import sizeMapping from "./transforms/sizeMapping"
+import stateToInvalid from "./transforms/stateToInvalid"
+import stateToInvalidTernary from "./transforms/stateToInvalidTernary"
+import unsupportedProps from "./transforms/unsupportedProps"
+
+const transform: Transform = (fileInfo, api, options) => {
+  let currentSource = fileInfo.source
+  let hasAnyChanges = false
+
+  const transforms = [
+    mergeFieldIntoDateField,
+    auditSpreadProps,
+    sizeMapping,
+    stateToInvalidTernary,
+    stateToInvalid,
+    momentToDateString,
+    nativeDateToString,
+    minDateToMin,
+    maxDateToMax,
+    convertStyleProps,
+    removeFormatValue,
+    removePlaceholder,
+    removeDuplicateKeys,
+    unsupportedProps,
+    moveDatePickerImport,
+  ]
+
+  for (const individualTransform of transforms) {
+    const result = individualTransform(
+      { ...fileInfo, source: currentSource },
+      api,
+      options
+    )
+    if (result && result !== currentSource) {
+      currentSource = result as string
+      hasAnyChanges = true
+    }
+  }
+
+  return hasAnyChanges ? currentSource : null
+}
+
+export default transform

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

@@ -0,0 +1,97 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./auditSpreadProps"
+
+const j = jscodeshift.withParser("tsx")
+
+const AUDIT_COMMENT =
+  "TODO: tapestry-migration (spreadAttribute): Spread props can contain unsupported props, please explore usages and migrate as needed."
+
+function applyTransform(source: string) {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("auditSpreadProps transform", () => {
+  describe("basic transformations", () => {
+    it("should add comment to DateField with spread props", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <DateField {...props} value={date} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+    })
+
+    it("should add comment to DateField with multiple spread props", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const baseProps = { onChange: handleChange }
+  const extraProps = { disabled: true }
+  return <DateField {...baseProps} {...extraProps} value={date} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...baseProps}")
+      expect(result).toContain("{...extraProps}")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not transform DateField without spread props", () => {
+      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("should not transform if DateField is not imported from @planningcenter/tapestry-react", () => {
+      const input = `
+import { DateField } from "other-library"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <DateField {...props} value={date} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when no DateField imports exist", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onClick: handleClick }
+  return <Button {...props}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+  })
+})

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

@@ -0,0 +1,10 @@
+import { Transform } from "jscodeshift"
+
+import { commentOnSpreadPropsFactory } from "../../shared/transformFactories/commentOnSpreadPropsFactory"
+
+const transform: Transform = commentOnSpreadPropsFactory({
+  targetComponent: "DateField",
+  targetPackage: "@planningcenter/tapestry-react",
+})
+
+export default transform

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

@@ -0,0 +1,58 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./convertStyleProps"
+
+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("convertStyleProps transform", () => {
+  it("should convert marginTop style prop to inline style", () => {
+    const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField marginTop="16px" value={date} onChange={setDate} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("style=")
+    expect(result).not.toContain('marginTop="16px"')
+  })
+
+  it("should not transform DateField without style props", () => {
+    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 { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button marginTop="16px">Click</Button>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(input)
+  })
+})

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

@@ -0,0 +1,10 @@
+import { stackViewPlugin } from "../../../stubs/stackViewPlugin"
+import { stylePropTransformFactory } from "../../shared/transformFactories/stylePropTransformFactory"
+
+export default stylePropTransformFactory({
+  plugin: stackViewPlugin,
+  stylesToKeep: ["visible"],
+  stylesToRemove: [],
+  targetComponent: "DateField",
+  targetPackage: "@planningcenter/tapestry-react",
+})

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

@@ -0,0 +1,87 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./maxDateToMax"
+
+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("maxDateToMax transform", () => {
+  it("should rename maxDate to max", () => {
+    const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField maxDate={endDate} value={date} onChange={setDate} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("max={endDate}")
+    expect(result).not.toContain("maxDate")
+  })
+
+  it("should rename maxDate with inline Date value", () => {
+    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).toContain("max={")
+    expect(result).not.toContain("maxDate=")
+  })
+
+  it("should not transform DateField without maxDate 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 maxDate={endDate} 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("max={endDate}")
+    expect(result).toContain("minDate={startDate}")
+    expect(result).toContain("value={date}")
+  })
+})

package/src/components/date-picker/transforms/maxDateToMax.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("maxDate"),
+  targetComponent: "DateField",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, options }) => {
+    return transformAttributeName("maxDate", "max", { element, j, options })
+  },
+})
+
+export default transform

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}")
+  })
+})