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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "3.2.3-rc.4",
+  "version": "3.2.3-rc.6",
   "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.4",
+    "@planningcenter/tapestry": "^3.2.3-rc.6",
     "@planningcenter/tapestry-react": "^4.11.5",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^20.0.0",
@@ -52,5 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cf31a8fd0131ba776c2f1c5b5018601590541400"
+  "gitHead": "66ef71c22b569382d2047f8cce603051322a451d"
 }

package/src/components/button/transforms/unsupportedProps.ts

@@ -1,8 +1,5 @@
-import { JSXAttribute, Transform } from "jscodeshift"
-
-import { addCommentToUnsupportedProps } from "../../shared/actions/addCommentToUnsupportedProps"
 import { BUTTON_LINK_SUPPORTED_PROPS } from "../../shared/helpers/unsupportedPropsHelpers"
-import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { unsupportedPropsFactory } from "../../shared/transformFactories/unsupportedPropsFactory"
 
 const BUTTON_SPECIFIC_PROPS = [
   "disabled",
@@ -19,35 +16,10 @@ const SUPPORTED_PROPS = [
   ...BUTTON_SPECIFIC_PROPS,
 ]
 
-const transform: Transform = attributeTransformFactory({
+const transform = unsupportedPropsFactory({
+  supportedProps: SUPPORTED_PROPS,
   targetComponent: "Button",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j }) => {
-    const UNSUPPORTED_PROPS = (element.openingElement.attributes || [])
-      .filter(
-        (attr) =>
-          attr.type === "JSXAttribute" &&
-          !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 === "mediaQueries") {
-          return "\n * It is recommended to use CSS media queries in a class that you apply to the component.\n"
-        }
-        if (prop === "hover" || prop === "focus" || prop === "active") {
-          return "\n * State-based styles (hover, focus, active) should be handled with CSS class selectors.\n"
-        }
-        return ""
-      },
-      props: UNSUPPORTED_PROPS,
-    })
-  },
 })
 
 export default transform

package/src/components/checkbox/transforms/unsupportedProps.ts

@@ -1,8 +1,5 @@
-import { JSXAttribute, Transform } from "jscodeshift"
-
-import { addCommentToUnsupportedProps } from "../../shared/actions/addCommentToUnsupportedProps"
 import { CHECKBOX_RADIO_SUPPORTED_PROPS } from "../../shared/helpers/unsupportedPropsHelpers"
-import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { unsupportedPropsFactory } from "../../shared/transformFactories/unsupportedPropsFactory"
 
 const CHECKBOX_SPECIFIC_PROPS = ["indeterminate"]
 
@@ -11,32 +8,10 @@ const SUPPORTED_PROPS = [
   ...CHECKBOX_SPECIFIC_PROPS,
 ]
 
-const transform: Transform = attributeTransformFactory({
+const transform = unsupportedPropsFactory({
+  supportedProps: SUPPORTED_PROPS,
   targetComponent: "Checkbox",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j }) => {
-    const UNSUPPORTED_PROPS = (element.openingElement.attributes || [])
-      .filter(
-        (attr) =>
-          attr.type === "JSXAttribute" &&
-          !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/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