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

package/src/components/shared/transformFactories/ternaryConditionalToPropFactory.ts

@@ -35,27 +35,32 @@ export function ternaryConditionalToPropFactory({
       const expr = attr.value.expression
       if (expr.type !== "ConditionalExpression") return false
 
-      if (
-        expr.consequent.type !== "StringLiteral" ||
-        expr.consequent.value !== matchValue
-      ) {
-        return false
-      }
+      const isNullish = (node: Expression) =>
+        node.type === "NullLiteral" ||
+        (node.type === "Identifier" && node.name === "undefined")
 
-      const isNullAlternate = expr.alternate.type === "NullLiteral"
-      const isUndefinedAlternate =
-        expr.alternate.type === "Identifier" &&
-        expr.alternate.name === "undefined"
+      const isMatchString = (node: Expression) =>
+        node.type === "StringLiteral" && node.value === matchValue
 
-      if (!isNullAlternate && !isUndefinedAlternate) return false
+      const matchInConsequent =
+        isMatchString(expr.consequent as Expression) &&
+        isNullish(expr.alternate as Expression)
+      const matchInAlternate =
+        isMatchString(expr.alternate as Expression) &&
+        isNullish(expr.consequent as Expression)
+
+      if (!matchInConsequent && !matchInAlternate) return false
 
       const testExpr = expr.test as Expression
+      const propValue = matchInConsequent
+        ? testExpr
+        : j.unaryExpression("!", testExpr)
 
       removeAttribute(fromProp, { element, j, source })
       element.openingElement.attributes.push(
         j.jsxAttribute(
           j.jsxIdentifier(toProp),
-          j.jsxExpressionContainer(testExpr)
+          j.jsxExpressionContainer(propValue)
         )
       )
 

package/src/components/time-field/index.ts

@@ -0,0 +1,48 @@
+import { Transform } from "jscodeshift"
+
+import auditSpreadProps from "./transforms/auditSpreadProps"
+import convertStyleProps from "./transforms/convertStyleProps"
+import flagMinMax from "./transforms/flagMinMax"
+import mergeFieldIntoTimeField from "./transforms/mergeFieldIntoTimeField"
+import moveTimeFieldImport from "./transforms/moveTimeFieldImport"
+import sizeMapping from "./transforms/sizeMapping"
+import stateToInvalid from "./transforms/stateToInvalid"
+import stateToInvalidTernary from "./transforms/stateToInvalidTernary"
+import tupleToTime from "./transforms/tupleToTime"
+import twelveHourClockToHourCycle from "./transforms/twelveHourClockToHourCycle"
+import unsupportedProps from "./transforms/unsupportedProps"
+
+const transform: Transform = (fileInfo, api, options) => {
+  let currentSource = fileInfo.source
+  let hasAnyChanges = false
+
+  const transforms = [
+    mergeFieldIntoTimeField,
+    auditSpreadProps,
+    sizeMapping,
+    stateToInvalidTernary,
+    stateToInvalid,
+    twelveHourClockToHourCycle,
+    tupleToTime,
+    flagMinMax,
+    convertStyleProps,
+    unsupportedProps,
+    moveTimeFieldImport,
+  ]
+
+  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/time-field/transforms/auditSpreadProps.test.ts

@@ -0,0 +1,76 @@
+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", () => {
+  it("adds comment to TimeField with spread props", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <TimeField {...props} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain(AUDIT_COMMENT)
+    expect(result).toContain("{...props}")
+  })
+
+  it("returns null when TimeField has no spread props", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <TimeField value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(null)
+  })
+
+  it("returns null when TimeField is from another package", () => {
+    const input = `
+import { TimeField } from "other-library"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <TimeField {...props} value={time} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(null)
+  })
+
+  it("returns null when TimeField is not imported at all", () => {
+    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/time-field/transforms/auditSpreadProps.ts

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

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

@@ -0,0 +1,43 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./convertStyleProps"
+
+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("convertStyleProps transform", () => {
+  it("returns null when TimeField has no style props", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBeNull()
+  })
+
+  it("does not affect TimeField from other packages", () => {
+    const input = `
+import { TimeField } from "some-other-lib"
+
+function Test() {
+  return <TimeField p={2} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBeNull()
+  })
+})

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

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

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

@@ -0,0 +1,103 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./flagMinMax"
+
+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("flagMinMax transform", () => {
+  it("adds TODO comment to min prop", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField min={9} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).toContain("TODO: tapestry-migration (min)")
+    expect(result).toContain("TimeValue")
+    expect(result).toContain("min={9}")
+  })
+
+  it("adds TODO comment to max prop", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField max={17} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).toContain("TODO: tapestry-migration (max)")
+    expect(result).toContain("TimeValue")
+    expect(result).toContain("max={17}")
+  })
+
+  it("flags both min and max when present", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField min={9} max={17} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).toContain("TODO: tapestry-migration (min)")
+    expect(result).toContain("TODO: tapestry-migration (max)")
+  })
+
+  it("returns null when neither min nor max is present", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField value={time} onChange={setTime} />
+}
+    `.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 min={1} max={10} label="Count" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBeNull()
+  })
+
+  it("does not affect TimeField from other packages", () => {
+    const input = `
+import { TimeField } from "some-other-lib"
+
+function Test() {
+  return <TimeField min={9} max={17} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBeNull()
+  })
+})

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