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

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

@@ -0,0 +1,31 @@
+import { Transform } from "jscodeshift"
+
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const TIME_PROPS = ["min", "max"]
+
+const transform: Transform = attributeTransformFactory({
+  targetComponent: "TimeField",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    let hasChanges = false
+
+    for (const propName of TIME_PROPS) {
+      const attr = getAttribute({ element, name: propName })
+      if (!attr) continue
+
+      addCommentToAttribute({
+        attribute: attr,
+        j,
+        text: `'${propName}' previously accepted an hour number (0–23). TimeField now expects a TimeValue (e.g. new Time(hour, minute)) from @internationalized/date. Migrate this value manually.`,
+      })
+      hasChanges = true
+    }
+
+    return hasChanges
+  },
+})
+
+export default transform

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

@@ -0,0 +1,106 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./mergeFieldIntoTimeField"
+
+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("mergeFieldIntoTimeField transform", () => {
+  it("merges Field label into TimeField and unwraps Field", () => {
+    const input = `
+import { Field, TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Start time"><TimeField value={time} onChange={setTime} /></Field>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).not.toContain("<Field")
+    expect(result).toContain('label="Start time"')
+    expect(result).toContain("<TimeField")
+  })
+
+  it("renames feedbackText to description on TimeField", () => {
+    const input = `
+import { Field, TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field feedbackText="Required"><TimeField value={time} onChange={setTime} /></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("flags helpContent as unsupported and removes Field", () => {
+    const input = `
+import { Field, TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field helpContent="Help"><TimeField value={time} onChange={setTime} /></Field>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).not.toContain("<Field")
+    expect(result).toContain(
+      "TODO: tapestry-migration (mergeFieldIntoTimeField)"
+    )
+    expect(result).toContain("helpContent")
+    expect(result).toContain("not supported by TimeField")
+  })
+
+  it("returns null when Field is not imported from tapestry-react", () => {
+    const input = `
+import { Field } from "some-other-library"
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Time"><TimeField value={time} onChange={setTime} /></Field>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBeNull()
+  })
+
+  it("returns null when TimeField is not imported from tapestry-react", () => {
+    const input = `
+import { Field } from "@planningcenter/tapestry-react"
+import { TimeField } from "some-other-library"
+
+function Test() {
+  return (
+    <Field label="Time"><TimeField value={time} onChange={setTime} /></Field>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBeNull()
+  })
+})

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

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

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

@@ -0,0 +1,153 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./moveTimeFieldImport"
+
+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("moveTimeFieldImport transform", () => {
+  describe("import migration", () => {
+    it("should change import package and keep TimeField name", () => {
+      const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField value={time} onChange={setTime} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { TimeField } from "@planningcenter/tapestry"'
+      )
+      expect(result).not.toContain("@planningcenter/tapestry-react")
+      expect(result).toContain("<TimeField")
+    })
+
+    it("should only move TimeField, leaving other tapestry-react imports", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>Click</Button>
+      <TimeField value={time} onChange={setTime} />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { TimeField } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<TimeField")
+    })
+  })
+
+  describe("import conflict handling", () => {
+    it("should use TdsTimeField alias when TimeField is already imported elsewhere", () => {
+      const input = `
+import { TimeField } from "some-other-library"
+import { TimeField as LegacyTimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <TimeField />
+      <LegacyTimeField value={time} onChange={setTime} />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('import { TimeField } from "some-other-library"')
+      expect(result).toContain(
+        'import { TimeField as TdsTimeField } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<TdsTimeField")
+    })
+  })
+
+  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 { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <TimeField
+      value={time}
+      onChange={setTime}
+      disabled
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { TimeField } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("value={time}")
+      expect(result).toContain("onChange={setTime}")
+      expect(result).toContain("disabled")
+    })
+
+    it("should handle alias import", () => {
+      const input = `
+import { TimeField as TapestryTimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TapestryTimeField value={time} onChange={setTime} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("@planningcenter/tapestry")
+      expect(result).not.toContain("@planningcenter/tapestry-react")
+    })
+  })
+})

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

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

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

@@ -0,0 +1,173 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./sizeMapping"
+
+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("sizeMapping transform", () => {
+  describe("size value transformations", () => {
+    it("should transform xs to md", () => {
+      const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField size="xs" value={time} onChange={setTime} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).not.toContain('size="xs"')
+      expect(result).toContain('Size "xs" was mapped to "md"')
+    })
+
+    it("should transform sm to md", () => {
+      const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField size="sm" value={time} onChange={setTime} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).not.toContain('size="sm"')
+      expect(result).toContain('Size "sm" was mapped to "md"')
+    })
+
+    it("should transform xl to lg", () => {
+      const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField size="xl" value={time} onChange={setTime} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="lg"')
+      expect(result).not.toContain('size="xl"')
+      expect(result).toContain('Size "xl" was mapped to "lg"')
+    })
+
+    it('should transform size={"sm"} expression container', () => {
+      const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField size={"sm"} value={time} onChange={setTime} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).toContain('Size "sm" was mapped to "md"')
+    })
+
+    it("should not transform already valid sizes", () => {
+      const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <TimeField size="md" value={time1} onChange={setTime1} />
+      <TimeField size="lg" value={time2} onChange={setTime2} />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).toContain('size="lg"')
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect TimeField without size prop", () => {
+      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("should not transform expression values (variables)", () => {
+      const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const size = "sm"
+  return <TimeField size={size} value={time} onChange={setTime} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("size={size}")
+      expect(result).not.toContain("Size")
+    })
+
+    it("should not affect other components", () => {
+      const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Input size="sm" label="Name" />
+      <TimeField size="md" value={time} onChange={setTime} />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Input size="sm"')
+      expect(result).toContain('size="md"')
+    })
+
+    it("should handle multiple TimeFields with different sizes", () => {
+      const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <TimeField size="xs" value={time1} onChange={setTime1} />
+      <TimeField size="sm" value={time2} onChange={setTime2} />
+      <TimeField size="md" value={time3} onChange={setTime3} />
+      <TimeField size="xl" value={time4} onChange={setTime4} />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain('size="xs"')
+      expect(result).not.toContain('size="sm"')
+      expect(result).not.toContain('size="xl"')
+      const sizeMappingMatches = result.match(/Size ".*" was mapped to/g)
+      expect(sizeMappingMatches).toHaveLength(3)
+    })
+  })
+})

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

@@ -0,0 +1,15 @@
+import { Transform } from "jscodeshift"
+
+import { sizeMappingFactory } from "../../shared/transformFactories/sizeMappingFactory"
+
+const transform: Transform = sizeMappingFactory({
+  sizeMapping: {
+    sm: "md",
+    xl: "lg",
+    xs: "md",
+  },
+  targetComponent: "TimeField",
+  targetPackage: "@planningcenter/tapestry-react",
+})
+
+export default transform

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

@@ -0,0 +1,87 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./stateToInvalid"
+
+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("stateToInvalid transform", () => {
+  it("converts state='error' to invalid", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField state="error" value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("invalid")
+    expect(result).not.toContain('state="error"')
+  })
+
+  it("removes state='success' and adds TODO", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField state="success" value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toContain('<TimeField state="success"')
+    expect(result).toContain("TODO: tapestry-migration")
+    expect(result).toContain("no equivalent")
+  })
+
+  it("adds TODO comment for dynamic state value", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField state={fieldState} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration")
+    expect(result).toContain("Migrate this prop manually")
+  })
+
+  it("returns null 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="error">Click</Button>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(input)
+  })
+})

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

@@ -0,0 +1,56 @@
+import { Transform } from "jscodeshift"
+
+import { addAttribute } from "../../shared/actions/addAttribute"
+import { addComment } from "../../shared/actions/addComment"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { getAttributeValue } from "../../shared/actions/getAttributeValue"
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform: Transform = attributeTransformFactory({
+  condition: hasAttribute("state"),
+  targetComponent: "TimeField",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const attr = getAttribute({ element, name: "state" })
+    if (!attr) return false
+
+    const value = getAttributeValue({ attribute: attr, j })
+
+    if (value === "error") {
+      removeAttribute("state", { element, j, source })
+      addAttribute({
+        booleanAsShorthand: true,
+        element,
+        j,
+        name: "invalid",
+        value: true,
+      })
+      return true
+    }
+
+    if (value === "success") {
+      removeAttribute("state", { element, j, source })
+      addComment({
+        element,
+        j,
+        scope: "state",
+        source,
+        text: "'state=\"success\"' has no equivalent in the new TimeField API. Remove this prop and implement success feedback separately.",
+      })
+      return true
+    }
+
+    addComment({
+      element,
+      j,
+      scope: "state",
+      source,
+      text: "'state' has been replaced by 'invalid' (boolean). For error state, use invalid={true}. 'success' has no equivalent. Migrate this prop manually.",
+    })
+    return true
+  },
+})
+
+export default transform