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

package/src/components/date-picker/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 { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField size="xs" value={date} onChange={setDate} />
+}
+      `.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 { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField size="sm" value={date} onChange={setDate} />
+}
+      `.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 { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField size="xl" value={date} onChange={setDate} />
+}
+      `.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 { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField size={"sm"} value={date} onChange={setDate} />
+}
+      `.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 { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <DateField size="md" value={date1} onChange={setDate1} />
+      <DateField size="lg" value={date2} onChange={setDate2} />
+    </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 DateField without size 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 transform expression values (variables)", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const size = "sm"
+  return <DateField size={size} value={date} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("size={size}")
+      expect(result).not.toContain("Size")
+    })
+
+    it("should not affect other components", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Input size="sm" label="Name" />
+      <DateField size="md" value={date} onChange={setDate} />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Input size="sm"')
+      expect(result).toContain('size="md"')
+    })
+
+    it("should handle multiple DateFields with different sizes", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <DateField size="xs" value={date1} onChange={setDate1} />
+      <DateField size="sm" value={date2} onChange={setDate2} />
+      <DateField size="md" value={date3} onChange={setDate3} />
+      <DateField size="xl" value={date4} onChange={setDate4} />
+    </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/date-picker/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: "DateField",
+  targetPackage: "@planningcenter/tapestry-react",
+})
+
+export default transform

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

@@ -0,0 +1,109 @@
+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", () => {
+  describe("state='error' to invalid", () => {
+    it("should convert state='error' to invalid boolean", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField state="error" value={date} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("invalid")
+      expect(result).not.toContain('state="error"')
+    })
+
+    it('should convert state={"error"} expression to invalid', () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField state={"error"} value={date} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("invalid")
+      expect(result).not.toContain("state=")
+    })
+  })
+
+  describe("state='success' removal", () => {
+    it("should remove state='success' and add TODO comment", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField state="success" value={date} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain('<DateField state="success"')
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain("no equivalent")
+    })
+  })
+
+  describe("dynamic state value", () => {
+    it("should add TODO comment for dynamic state value", () => {
+      const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField state={fieldState} value={date} onChange={setDate} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain("Migrate this prop manually")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not transform DateField without state 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 { 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/date-picker/transforms/stateToInvalid.ts

@@ -0,0 +1,57 @@
+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: "DateField",
+  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 DatePicker API. Remove this prop and implement success feedback separately.",
+      })
+      return true
+    }
+
+    // Dynamic value — can't determine at compile time
+    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

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

@@ -0,0 +1,72 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./stateToInvalidTernary"
+
+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("stateToInvalidTernary transform", () => {
+  it("should convert ternary state={x ? 'error' : undefined} to invalid={x}", () => {
+    const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField state={hasError ? "error" : undefined} value={date} onChange={setDate} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("invalid={hasError}")
+    expect(result).not.toContain("state=")
+  })
+
+  it("should convert ternary state={x ? 'error' : null} to invalid={x}", () => {
+    const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField state={hasError ? "error" : null} value={date} onChange={setDate} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("invalid={hasError}")
+    expect(result).not.toContain("state=")
+  })
+
+  it("should not transform without state 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 { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button state={hasError ? "error" : undefined}>Click</Button>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(input)
+  })
+})

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

@@ -0,0 +1,11 @@
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { ternaryConditionalToPropFactory } from "../../shared/transformFactories/ternaryConditionalToPropFactory"
+
+export default ternaryConditionalToPropFactory({
+  condition: hasAttribute("state"),
+  fromProp: "state",
+  matchValue: "error",
+  targetComponent: "DateField",
+  targetPackage: "@planningcenter/tapestry-react",
+  toProp: "invalid",
+})

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

@@ -0,0 +1,170 @@
+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("should flag placement as unsupported", () => {
+    const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField placement="bottom" value={date} onChange={setDate} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration")
+    expect(result).toContain("placement")
+  })
+
+  it("should flag defaultOpen as unsupported", () => {
+    const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField defaultOpen value={date} onChange={setDate} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration")
+    expect(result).toContain("defaultOpen")
+  })
+
+  it("should flag calendarProps as unsupported", () => {
+    const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField calendarProps={{ size: "sm" }} value={date} onChange={setDate} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration")
+    expect(result).toContain("calendarProps")
+  })
+
+  it("should flag popoverProps as unsupported", () => {
+    const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField popoverProps={{ placement: "top" }} value={date} onChange={setDate} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration")
+    expect(result).toContain("popoverProps")
+  })
+
+  it("should flag lockScrollWhileOpen as unsupported", () => {
+    const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField lockScrollWhileOpen={false} value={date} onChange={setDate} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration")
+    expect(result).toContain("lockScrollWhileOpen")
+  })
+
+  it("should flag keepInView as unsupported", () => {
+    const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField keepInView value={date} onChange={setDate} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration")
+    expect(result).toContain("keepInView")
+  })
+
+  it("should not flag supported props", () => {
+    const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <DateField
+      value={date}
+      onChange={setDate}
+      disabled
+      required
+      size="md"
+      label="Start date"
+      description="Pick a date"
+      invalid
+      min={minDate}
+      max={maxDate}
+      className="my-date"
+      id="date-field"
+    />
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toContain("TODO: tapestry-migration")
+  })
+
+  it("should allow aria-* and data-* attributes", () => {
+    const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField aria-describedby="help" data-testid="date" value={date} onChange={setDate} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toContain("TODO: tapestry-migration")
+  })
+
+  it("should flag css prop with specific message", () => {
+    const input = `
+import { DateField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <DateField css={{ color: "red" }} value={date} onChange={setDate} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration")
+    expect(result).toContain("CSS prop is not supported")
+  })
+
+  it("should not affect other components", () => {
+    const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button formatValue="test">Click</Button>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(input)
+  })
+})

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

@@ -0,0 +1,37 @@
+import { JSXAttribute, Transform } from "jscodeshift"
+
+import { addCommentToUnsupportedProps } from "../../shared/actions/addCommentToUnsupportedProps"
+import { DATE_PICKER_SUPPORTED_PROPS } from "../../shared/helpers/unsupportedPropsHelpers"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform: Transform = attributeTransformFactory({
+  targetComponent: "DateField",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const attrs = element.openingElement.attributes || []
+
+    const UNSUPPORTED_PROPS = attrs
+      .filter(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          !DATE_PICKER_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/components/shared/helpers/unsupportedPropsHelpers.ts

@@ -175,3 +175,21 @@ export const TIME_FIELD_SUPPORTED_PROPS = [
   ...COMMON_PROPS,
   ...TIME_FIELD_SPECIFIC_PROPS,
 ]
+export const DATE_PICKER_SPECIFIC_PROPS = [
+  "description",
+  "disabled",
+  "firstDayOfWeek",
+  "hideLabel",
+  "invalid",
+  "isDateUnavailable",
+  "max",
+  "min",
+  "onChange",
+  "readOnly",
+  "required",
+  "value",
+]
+export const DATE_PICKER_SUPPORTED_PROPS = [
+  ...COMMON_PROPS,
+  ...DATE_PICKER_SPECIFIC_PROPS,
+]

package/src/index.ts

@@ -14,6 +14,7 @@ program
 const COMPONENTS_SET = new Set([
   "button",
   "checkbox",
+  "date-picker",
   "input",
   "link",
   "radio",