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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "3.2.3-rc.5",
+  "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.5",
+    "@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": "709a2ca95766701dd9466ee22c1e8a96fa3da9df"
+  "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/transforms/unsupportedProps.ts

@@ -1,37 +1,10 @@
-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"
+import { unsupportedPropsFactory } from "../../shared/transformFactories/unsupportedPropsFactory"
 
-const transform: Transform = attributeTransformFactory({
+const transform = unsupportedPropsFactory({
+  supportedProps: DATE_PICKER_SUPPORTED_PROPS,
   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/input/transforms/unsupportedProps.ts

@@ -6,6 +6,7 @@ import { getAttributeValue } from "../../shared/actions/getAttributeValue"
 import {
   ACCEPTED_INPUT_TYPES,
   INPUT_SUPPORTED_PROPS,
+  isAriaOrDataAttribute,
   TYPE_SPECIFIC_PROPS,
 } from "../../shared/helpers/unsupportedPropsHelpers"
 import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
@@ -55,8 +56,7 @@ const transform: Transform = attributeTransformFactory({
           attr.type === "JSXAttribute" &&
           !INPUT_SUPPORTED_PROPS.includes(attr.name.name as string) &&
           !typeAllowedProps.includes(attr.name.name as string) &&
-          !(attr.name.name as string).startsWith("aria-") &&
-          !(attr.name.name as string).startsWith("data-")
+          !isAriaOrDataAttribute(attr.name.name as string)
       )
       .map((attr) => (attr as JSXAttribute).name.name as string)
 

package/src/components/link/transforms/unsupportedProps.test.ts

@@ -28,7 +28,9 @@ export default function Test() {
       const result = applyTransform(input)
       expect(result).toContain("TODO: tapestry-migration (css)")
       expect(result).toContain("'css' is not supported")
-      expect(result).toContain("Use 'className' prop with CSS classes")
+      expect(result).toContain(
+        "CSS prop is not supported. Use className or style prop instead."
+      )
       expect(result).toContain('css={{ color: "red" }}')
     })
 

package/src/components/link/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"
 
 // Note: 'target' and 'rel' are NOT included because they are handled by targetBlankToExternal transform
 const LINK_SPECIFIC_PROPS = [
@@ -18,41 +15,16 @@ const LINK_SPECIFIC_PROPS = [
 
 const SUPPORTED_PROPS = [...BUTTON_LINK_SUPPORTED_PROPS, ...LINK_SPECIFIC_PROPS]
 
-const transform: Transform = attributeTransformFactory({
+const transform = unsupportedPropsFactory({
+  commentNotes: (prop) => {
+    if (prop === "disabled") {
+      return "\n * Links do not support the disabled prop. Consider using a button, hiding the link, or using CSS to style it as disabled.\n"
+    }
+    return ""
+  },
+  supportedProps: SUPPORTED_PROPS,
   targetComponent: "Link",
   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 * Use 'className' prop with CSS classes instead of the css prop.\n"
-        }
-        if (prop === "disabled") {
-          return "\n * Links do not support the disabled prop. Consider using a button, hiding the link, or using CSS to style it as disabled.\n"
-        }
-        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/radio/transforms/unsupportedProps.ts

@@ -1,35 +1,10 @@
-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 transform: Transform = attributeTransformFactory({
+const transform = unsupportedPropsFactory({
+  supportedProps: CHECKBOX_RADIO_SUPPORTED_PROPS,
   targetComponent: "Radio",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j }) => {
-    const UNSUPPORTED_PROPS = (element.openingElement.attributes || [])
-      .filter(
-        (attr) =>
-          attr.type === "JSXAttribute" &&
-          !CHECKBOX_RADIO_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/select/transforms/unsupportedProps.ts

@@ -1,44 +1,18 @@
-import { JSXAttribute, Transform } from "jscodeshift"
-
-import { addCommentToUnsupportedProps } from "../../shared/actions/addCommentToUnsupportedProps"
 import { SELECT_SUPPORTED_PROPS } from "../../shared/helpers/unsupportedPropsHelpers"
-import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { unsupportedPropsFactory } from "../../shared/transformFactories/unsupportedPropsFactory"
 import { transformableSelect } from "../transformableSelect"
 
-const transform: Transform = attributeTransformFactory({
+const transform = unsupportedPropsFactory({
+  commentNotes: (prop) => {
+    if (prop === "renderValue") {
+      return "\n * renderValue is not supported. The select displays the selected option label.\n"
+    }
+    return ""
+  },
   condition: transformableSelect,
+  supportedProps: SELECT_SUPPORTED_PROPS,
   targetComponent: "Select",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j }) => {
-    const UNSUPPORTED_PROPS = (element.openingElement.attributes || [])
-      .filter(
-        (attr) =>
-          attr.type === "JSXAttribute" &&
-          attr.name.type === "JSXIdentifier" &&
-          !SELECT_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"
-        }
-        if (prop === "tooltip") {
-          return "\n * Wrapping a select in a tooltip is an unsupported anti-pattern.\n"
-        }
-        if (prop === "renderValue") {
-          return "\n * renderValue is not supported. The select displays the selected option label.\n"
-        }
-        return ""
-      },
-      props: UNSUPPORTED_PROPS,
-    })
-  },
 })
 
 export default transform

package/src/components/shared/helpers/unsupportedPropsHelpers.ts

@@ -4,6 +4,10 @@ export const STYLE_PROP_NAMES_WITHOUT_CSS = stylePropNames.filter(
   (prop: string) => prop !== "css"
 )
 
+export const isAriaOrDataAttribute = (name: unknown) =>
+  typeof name === "string" &&
+  (name.startsWith("aria-") || name.startsWith("data-"))
+
 export const COMMON_PROPS = [
   "className",
   "id",

package/src/components/shared/transformFactories/unsupportedPropsFactory.test.ts

@@ -0,0 +1,162 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import { hasAttribute } from "../conditions/hasAttribute"
+import { unsupportedPropsFactory } from "./unsupportedPropsFactory"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(transform: ReturnType<typeof unsupportedPropsFactory>) {
+  return (source: string): string | null => {
+    const fileInfo = { path: "test.tsx", source }
+    const api = { j, jscodeshift: j, report: () => {}, stats: () => {} }
+    return transform(fileInfo, api, {}) as string | null
+  }
+}
+
+describe("unsupportedPropsFactory", () => {
+  it("adds a TODO comment for unsupported props", () => {
+    const transform = unsupportedPropsFactory({
+      supportedProps: ["label"],
+      targetComponent: "Button",
+      targetPackage: "@planningcenter/tapestry-react",
+    })
+    const source = `import { Button } from "@planningcenter/tapestry-react"
+<Button customProp="value" label="Save" />`
+
+    const result = applyTransform(transform)(source)
+
+    expect(result).toContain(
+      "/* TODO: tapestry-migration (customProp): 'customProp' is not supported, please migrate as needed."
+    )
+    expect(result).toContain('customProp="value"')
+  })
+
+  it("does not flag supported props", () => {
+    const transform = unsupportedPropsFactory({
+      supportedProps: ["label", "kind"],
+      targetComponent: "Button",
+      targetPackage: "@planningcenter/tapestry-react",
+    })
+    const source = `import { Button } from "@planningcenter/tapestry-react"
+<Button label="Save" kind="primary" />`
+
+    const result = applyTransform(transform)(source)
+
+    expect(result).toBeNull()
+  })
+
+  it("always allows aria-* and data-* attributes", () => {
+    const transform = unsupportedPropsFactory({
+      supportedProps: ["label"],
+      targetComponent: "Button",
+      targetPackage: "@planningcenter/tapestry-react",
+    })
+    const source = `import { Button } from "@planningcenter/tapestry-react"
+<Button aria-label="Save" data-testid="btn" label="Save" />`
+
+    const result = applyTransform(transform)(source)
+
+    expect(result).toBeNull()
+  })
+
+  it("includes a default note for the css prop without explicit commentNotes", () => {
+    const transform = unsupportedPropsFactory({
+      supportedProps: ["label"],
+      targetComponent: "Button",
+      targetPackage: "@planningcenter/tapestry-react",
+    })
+    const source = `import { Button } from "@planningcenter/tapestry-react"
+<Button css={{ color: 'red' }} label="Save" />`
+
+    const result = applyTransform(transform)(source)
+
+    expect(result).toContain("/* TODO: tapestry-migration (css):")
+    expect(result).toContain(
+      "CSS prop is not supported. Use className or style prop instead."
+    )
+  })
+
+  it("falls back to the default css note when commentNotes returns empty", () => {
+    const transform = unsupportedPropsFactory({
+      commentNotes: (prop) =>
+        prop === "tooltip" ? "\n * Tooltip note.\n" : "",
+      supportedProps: ["label"],
+      targetComponent: "Button",
+      targetPackage: "@planningcenter/tapestry-react",
+    })
+    const source = `import { Button } from "@planningcenter/tapestry-react"
+<Button css={{ color: 'red' }} label="Save" />`
+
+    const result = applyTransform(transform)(source)
+
+    expect(result).toContain(
+      "CSS prop is not supported. Use className or style prop instead."
+    )
+  })
+
+  it("lets commentNotes override the default css note", () => {
+    const transform = unsupportedPropsFactory({
+      commentNotes: (prop) => (prop === "css" ? "\n * Custom css note.\n" : ""),
+      supportedProps: ["label"],
+      targetComponent: "Button",
+      targetPackage: "@planningcenter/tapestry-react",
+    })
+    const source = `import { Button } from "@planningcenter/tapestry-react"
+<Button css={{ color: 'red' }} label="Save" />`
+
+    const result = applyTransform(transform)(source)
+
+    expect(result).toContain("Custom css note.")
+    expect(result).not.toContain(
+      "CSS prop is not supported. Use className or style prop instead."
+    )
+  })
+
+  it("appends commentNotes output to the comment text", () => {
+    const transform = unsupportedPropsFactory({
+      commentNotes: (prop) =>
+        prop === "css" ? "\n * Use className instead.\n" : "",
+      supportedProps: ["label"],
+      targetComponent: "Button",
+      targetPackage: "@planningcenter/tapestry-react",
+    })
+    const source = `import { Button } from "@planningcenter/tapestry-react"
+<Button css={{ color: 'red' }} label="Save" />`
+
+    const result = applyTransform(transform)(source)
+
+    expect(result).toContain("/* TODO: tapestry-migration (css):")
+    expect(result).toContain("Use className instead.")
+  })
+
+  it("respects an optional condition", () => {
+    const transform = unsupportedPropsFactory({
+      condition: hasAttribute("required"),
+      supportedProps: ["label"],
+      targetComponent: "Button",
+      targetPackage: "@planningcenter/tapestry-react",
+    })
+    const sourceWithoutRequired = `import { Button } from "@planningcenter/tapestry-react"
+<Button customProp="value" label="Save" />`
+    const sourceWithRequired = `import { Button } from "@planningcenter/tapestry-react"
+<Button customProp="value" required label="Save" />`
+
+    expect(applyTransform(transform)(sourceWithoutRequired)).toBeNull()
+    expect(applyTransform(transform)(sourceWithRequired)).toContain(
+      "/* TODO: tapestry-migration (customProp):"
+    )
+  })
+
+  it("returns null when target component is not imported", () => {
+    const transform = unsupportedPropsFactory({
+      supportedProps: ["label"],
+      targetComponent: "Button",
+      targetPackage: "@planningcenter/tapestry-react",
+    })
+    const source = `import { Link } from "@planningcenter/tapestry-react"
+<Link customProp="value">Click</Link>`
+
+    expect(applyTransform(transform)(source)).toBeNull()
+  })
+})

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

@@ -0,0 +1,60 @@
+import { JSXAttribute, Transform } from "jscodeshift"
+
+import { addCommentToUnsupportedProps } from "../actions/addCommentToUnsupportedProps"
+import { isAriaOrDataAttribute } from "../helpers/unsupportedPropsHelpers"
+import { TransformCondition } from "../types"
+import { attributeTransformFactory } from "./attributeTransformFactory"
+
+const defaultCommentNotes = (prop: string): string => {
+  if (prop === "css") {
+    return "\n * CSS prop is not supported. Use className or style prop instead.\n"
+  }
+  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"
+  }
+  if (prop === "tooltip") {
+    return "\n * Wrapping a component in a tooltip is an unsupported anti-pattern.\n"
+  }
+  return ""
+}
+
+export function unsupportedPropsFactory(options: {
+  /** Optional function returning prop-specific notes appended to the comment. Returning an empty string falls back to the factory's default note for that prop. */
+  commentNotes?: (prop: string) => string
+  /** Optional condition that must be met for the transform to occur */
+  condition?: TransformCondition
+  /** List of prop names considered supported. aria-* and data-* attributes are always allowed. */
+  supportedProps: string[]
+  /** Component to target for attribute transformation */
+  targetComponent: string
+  /** Package the target component is imported from */
+  targetPackage: string
+}): Transform {
+  const { commentNotes, condition, supportedProps, ...rest } = options
+  const messageSuffix = (prop: string): string =>
+    commentNotes?.(prop) || defaultCommentNotes(prop)
+  return attributeTransformFactory({
+    condition,
+    transform: (element, { j }) => {
+      const unsupportedProps = (element.openingElement.attributes || [])
+        .filter(
+          (attr) =>
+            attr.type === "JSXAttribute" &&
+            !supportedProps.includes(attr.name.name as string) &&
+            !isAriaOrDataAttribute(attr.name.name as string)
+        )
+        .map((attr) => (attr as JSXAttribute).name.name as string)
+
+      return addCommentToUnsupportedProps({
+        element,
+        j,
+        messageSuffix,
+        props: unsupportedProps,
+      })
+    },
+    ...rest,
+  })
+}

package/src/components/text-area/transforms/unsupportedProps.ts

@@ -1,35 +1,10 @@
-import { JSXAttribute, Transform } from "jscodeshift"
-
-import { addCommentToUnsupportedProps } from "../../shared/actions/addCommentToUnsupportedProps"
 import { TEXTAREA_SUPPORTED_PROPS } from "../../shared/helpers/unsupportedPropsHelpers"
-import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { unsupportedPropsFactory } from "../../shared/transformFactories/unsupportedPropsFactory"
 
-const transform: Transform = attributeTransformFactory({
+const transform = unsupportedPropsFactory({
+  supportedProps: TEXTAREA_SUPPORTED_PROPS,
   targetComponent: "TextArea",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j }) => {
-    const UNSUPPORTED_PROPS = (element.openingElement.attributes || [])
-      .filter(
-        (attr) =>
-          attr.type === "JSXAttribute" &&
-          !TEXTAREA_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/time-field/transforms/unsupportedProps.ts

@@ -1,37 +1,10 @@
-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"
+import { unsupportedPropsFactory } from "../../shared/transformFactories/unsupportedPropsFactory"
 
-const transform: Transform = attributeTransformFactory({
+const transform = unsupportedPropsFactory({
+  supportedProps: TIME_FIELD_SUPPORTED_PROPS,
   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/components/toggle-switch/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 TOGGLE_SWITCH_SPECIFIC_PROPS = ["hideLabel"]
 
@@ -11,32 +8,10 @@ const SUPPORTED_PROPS = [
   ...TOGGLE_SWITCH_SPECIFIC_PROPS,
 ]
 
-const transform: Transform = attributeTransformFactory({
+const transform = unsupportedPropsFactory({
+  supportedProps: SUPPORTED_PROPS,
   targetComponent: "ToggleSwitch",
   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/index.ts

@@ -24,12 +24,17 @@ const COMPONENTS_SET = new Set([
   "toggle-switch",
 ])
 
+const COMPONENTS_SENTENCE = new Intl.ListFormat("en", {
+  style: "long",
+  type: "conjunction",
+}).format([...COMPONENTS_SET])
+
 program
   .command("run")
   .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, time-field, toggle-switch)"
+    `The name of the component to migrate (${COMPONENTS_SENTENCE})`
   )
   .requiredOption(
     "-p, --path <path>",