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

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

@@ -0,0 +1,107 @@
+import { ArrayExpression, Expression, Transform } from "jscodeshift"
+
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { addImport } from "../../shared/transformFactories/helpers/manageImports"
+
+const TUPLE_PROPS = ["value", "defaultValue"]
+
+function isNumberLike(expr: Expression): boolean {
+  if (expr.type === "NumericLiteral") return true
+  if (
+    expr.type === "UnaryExpression" &&
+    expr.operator === "-" &&
+    expr.argument.type === "NumericLiteral"
+  ) {
+    return true
+  }
+  return false
+}
+
+function isHourMinuteTuple(expr: Expression): expr is ArrayExpression {
+  if (expr.type !== "ArrayExpression") return false
+  if (expr.elements.length !== 2) return false
+  return expr.elements.every(
+    (el) => el !== null && el.type !== "SpreadElement" && isNumberLike(el)
+  )
+}
+
+const transform: Transform = (fileInfo, api) => {
+  const j = api.jscodeshift
+  const source = j(fileInfo.source)
+  let hasChanges = false
+  let needsTimeImport = false
+
+  // Find local name for TimeField imported from tapestry-react
+  let timeFieldLocalName: string | null = null
+  source
+    .find(j.ImportDeclaration, {
+      source: { value: "@planningcenter/tapestry-react" },
+    })
+    .forEach((path) => {
+      const specs = path.value.specifiers || []
+      specs.forEach((spec) => {
+        if (
+          spec.type === "ImportSpecifier" &&
+          spec.imported?.name === "TimeField"
+        ) {
+          timeFieldLocalName = (spec.local?.name as string) || "TimeField"
+        }
+      })
+    })
+
+  if (!timeFieldLocalName) return null
+
+  source.find(j.JSXOpeningElement).forEach((path) => {
+    const opening = path.value
+    if (opening.name.type !== "JSXIdentifier") return
+    if (opening.name.name !== timeFieldLocalName) return
+
+    const element = path.parent.value
+    for (const propName of TUPLE_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 (isHourMinuteTuple(expr as Expression)) {
+        const arr = expr as ArrayExpression
+        const [hourEl, minuteEl] = arr.elements as Expression[]
+        attr.value = j.jsxExpressionContainer(
+          j.newExpression(j.identifier("Time"), [hourEl, minuteEl])
+        )
+        addCommentToAttribute({
+          attribute: attr,
+          commentKind: "change",
+          j,
+          text: "Converted [hours, minutes] tuple to new Time(hours, minutes) — TimeField now uses TimeValue from @internationalized/date.",
+        })
+        hasChanges = true
+        needsTimeImport = true
+      } else {
+        addCommentToAttribute({
+          attribute: attr,
+          j,
+          text: "TimeField now expects a TimeValue (e.g. new Time(hours, minutes)) from @internationalized/date instead of a [hours, minutes] tuple. Migrate this value manually.",
+        })
+        hasChanges = true
+      }
+    }
+  })
+
+  if (needsTimeImport) {
+    addImport({
+      component: "Time",
+      conflictAlias: "Time",
+      j,
+      pkg: "@internationalized/date",
+      source,
+    })
+  }
+
+  return hasChanges ? source.toSource() : null
+}
+
+export default transform

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

@@ -0,0 +1,117 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./twelveHourClockToHourCycle"
+
+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("twelveHourClockToHourCycle transform", () => {
+  it("converts shorthand twelveHourClock to hourCycle={12}", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField twelveHourClock value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).toContain("hourCycle={12}")
+    expect(result).not.toContain("twelveHourClock")
+  })
+
+  it("converts twelveHourClock={true} to hourCycle={12}", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField twelveHourClock={true} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).toContain("hourCycle={12}")
+    expect(result).not.toContain("twelveHourClock")
+  })
+
+  it("converts twelveHourClock={false} to hourCycle={24}", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField twelveHourClock={false} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).toContain("hourCycle={24}")
+    expect(result).not.toContain("twelveHourClock")
+  })
+
+  it("converts dynamic expression to hourCycle ternary with change comment", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField twelveHourClock={use12} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).toContain("hourCycle={use12 ? 12 : 24}")
+    expect(result).toContain("CHANGED: tapestry-migration")
+    expect(result).not.toContain("twelveHourClock=")
+  })
+
+  it("returns null when TimeField has no twelveHourClock prop", () => {
+    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 twelveHourClock value="abc" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBeNull()
+  })
+
+  it("does not affect TimeField imported from a different package", () => {
+    const input = `
+import { TimeField } from "some-other-lib"
+
+function Test() {
+  return <TimeField twelveHourClock value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBeNull()
+  })
+})

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

@@ -0,0 +1,65 @@
+import { Transform } from "jscodeshift"
+
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform: Transform = attributeTransformFactory({
+  condition: hasAttribute("twelveHourClock"),
+  targetComponent: "TimeField",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const attr = getAttribute({ element, name: "twelveHourClock" })
+    if (!attr) return false
+
+    // Shorthand `twelveHourClock` (no value) — boolean true → hourCycle={12}
+    if (attr.value === null || attr.value === undefined) {
+      attr.name.name = "hourCycle"
+      attr.value = j.jsxExpressionContainer(j.numericLiteral(12))
+      return true
+    }
+
+    if (attr.value.type === "JSXExpressionContainer") {
+      const expr = attr.value.expression
+
+      if (expr.type === "BooleanLiteral") {
+        attr.name.name = "hourCycle"
+        attr.value = j.jsxExpressionContainer(
+          j.numericLiteral(expr.value ? 12 : 24)
+        )
+        return true
+      }
+
+      // Dynamic expression — convert to ternary `hourCycle={x ? 12 : 24}`
+      if (expr.type !== "JSXEmptyExpression") {
+        attr.name.name = "hourCycle"
+        attr.value = j.jsxExpressionContainer(
+          j.conditionalExpression(
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            expr as any,
+            j.numericLiteral(12),
+            j.numericLiteral(24)
+          )
+        )
+        addCommentToAttribute({
+          attribute: attr,
+          commentKind: "change",
+          j,
+          text: "Converted 'twelveHourClock' to 'hourCycle' (12 or 24). Verify the conditional logic is correct. NOTE: i18n is built-in to Tapestry.",
+        })
+        return true
+      }
+    }
+
+    // Fallback: leave attribute, add TODO
+    addCommentToAttribute({
+      attribute: attr,
+      j,
+      text: "'twelveHourClock' has been replaced by 'hourCycle' (12 or 24). Migrate this prop manually. NOTE: i18n is built-in to Tapestry.",
+    })
+    return true
+  },
+})
+
+export default transform

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

@@ -0,0 +1,160 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./unsupportedProps"
+
+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("unsupportedProps transform", () => {
+  it("flags ignoredKeys as unsupported", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField ignoredKeys={["ArrowUp"]} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration")
+    expect(result).toContain("ignoredKeys")
+  })
+
+  it("flags interval as unsupported", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField interval={15} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration")
+    expect(result).toContain("interval")
+  })
+
+  it("flags isIOS as unsupported", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField isIOS value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration")
+    expect(result).toContain("isIOS")
+  })
+
+  it("flags controlled as unsupported", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField controlled value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration")
+    expect(result).toContain("controlled")
+  })
+
+  it("flags placeholder as unsupported", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField placeholder="Enter time" value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration")
+    expect(result).toContain("placeholder")
+  })
+
+  it("does not flag supported props", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <TimeField
+      value={time}
+      onChange={setTime}
+      disabled
+      required
+      size="md"
+      label="Start time"
+      description="Pick a time"
+      invalid
+      hourCycle={12}
+      hideLabel
+      hideTimeZone
+      forceLeadingZeros
+      readOnly
+      name="start"
+      className="my-time"
+      id="start-time"
+    />
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toContain("TODO: tapestry-migration")
+  })
+
+  it("allows aria-* and data-* attributes", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField aria-describedby="help" data-testid="time" value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toContain("TODO: tapestry-migration")
+  })
+
+  it("flags css prop with specific message", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField css={{ color: "red" }} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration")
+    expect(result).toContain("CSS prop is not supported")
+  })
+
+  it("does not affect other components", () => {
+    const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button ignoredKeys={["x"]}>Click</Button>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(input)
+  })
+})

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

@@ -0,0 +1,37 @@
+import { JSXAttribute, Transform } from "jscodeshift"
+
+import { addCommentToUnsupportedProps } from "../../shared/actions/addCommentToUnsupportedProps"
+import { TIME_FIELD_SUPPORTED_PROPS } from "../../shared/helpers/unsupportedPropsHelpers"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform: Transform = attributeTransformFactory({
+  targetComponent: "TimeField",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const attrs = element.openingElement.attributes || []
+
+    const UNSUPPORTED_PROPS = attrs
+      .filter(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          !TIME_FIELD_SUPPORTED_PROPS.includes(attr.name.name as string) &&
+          !(attr.name.name as string).startsWith("aria-") &&
+          !(attr.name.name as string).startsWith("data-")
+      )
+      .map((attr) => (attr as JSXAttribute).name.name as string)
+
+    return addCommentToUnsupportedProps({
+      element,
+      j,
+      messageSuffix: (prop) => {
+        if (prop === "css") {
+          return "\n * CSS prop is not supported. Use className or style prop instead.\n"
+        }
+        return ""
+      },
+      props: UNSUPPORTED_PROPS,
+    })
+  },
+})
+
+export default transform

package/src/index.ts

@@ -19,6 +19,7 @@ const COMPONENTS_SET = new Set([
   "radio",
   "select",
   "text-area",
+  "time-field",
   "toggle-switch",
 ])
 
@@ -27,7 +28,7 @@ program
   .description("Run a migration of a component from Tapestry React to Tapestry")
   .argument(
     "<component-name>",
-    "The name of the component to migrate (button, checkbox, input, link, radio, select, text-area, toggle-switch)"
+    "The name of the component to migrate (button, checkbox, input, link, radio, select, text-area, time-field, toggle-switch)"
   )
   .requiredOption(
     "-p, --path <path>",