@planningcenter/tapestry-migration-cli 2.8.0-rc.14 → 2.8.0-rc.15

package/src/components/radio/transforms/sizeMapping.ts

@@ -0,0 +1,49 @@
+import { Transform } from "jscodeshift"
+
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { getAttributeValue } from "../../shared/actions/getAttributeValue"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const SIZE_MAPPING = {
+  lg: "md",
+  xl: "md",
+  xs: "sm",
+}
+
+const transform: Transform = attributeTransformFactory({
+  condition: hasAttribute("size"),
+  targetComponent: "Radio",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    let hasChanges = false
+
+    const sizeAttr = element.openingElement.attributes?.find(
+      (attr) => attr.type === "JSXAttribute" && attr.name.name === "size"
+    )
+
+    if (sizeAttr && sizeAttr.type === "JSXAttribute") {
+      const sizeValue = getAttributeValue({ attribute: sizeAttr, j })
+
+      if (sizeValue) {
+        const mappedSize = SIZE_MAPPING[sizeValue as keyof typeof SIZE_MAPPING]
+
+        if (mappedSize && mappedSize !== sizeValue) {
+          // Normalize to a plain string attribute value (size="md")
+          sizeAttr.value = j.stringLiteral(mappedSize)
+          hasChanges = true
+
+          addCommentToAttribute({
+            attribute: sizeAttr,
+            j,
+            text: `Size "${sizeValue}" was mapped to "${mappedSize}". Verify visual appearance as sizes may differ slightly.`,
+          })
+        }
+      }
+    }
+
+    return hasChanges
+  },
+})
+
+export default transform

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

@@ -0,0 +1,241 @@
+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", () => {
+  describe("unsupported prop detection", () => {
+    it("should add comment for css prop", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Radio css={{ color: 'red' }} label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        "/* TODO: tapestry-migration (css): 'css' is not supported, please migrate as needed."
+      )
+      expect(result).toContain(
+        "CSS prop is not supported. Use className or style prop instead."
+      )
+      expect(result).toContain("css={{ color: 'red' }}")
+    })
+
+    it("should add comment for custom unsupported prop", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Radio customProp="value" label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        "/* TODO: tapestry-migration (customProp): 'customProp' is not supported, please migrate as needed."
+      )
+      expect(result).toContain('customProp="value"')
+    })
+
+    it("should add comments for multiple unsupported props", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Radio 
+      css={{ color: 'red' }}
+      ref={ref}
+      customProp="value"
+      label="Test" 
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("/* TODO: tapestry-migration (css):")
+      expect(result).toContain("/* TODO: tapestry-migration (customProp):")
+    })
+  })
+
+  describe("supported props", () => {
+    it("should not add comments for supported radio props", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const ref = React.useRef()
+  return (
+    <Radio 
+      checked
+      disabled
+      ref={ref}
+      label="Test"
+      name="radio"
+      onChange={() => {}}
+      value="test"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toContain("checked")
+      expect(result).toContain("disabled")
+      expect(result).toContain("ref={ref}")
+      expect(result).toContain('label="Test"')
+      expect(result).toContain('name="radio"')
+      expect(result).toContain("onChange={() => {}}")
+      expect(result).toContain('value="test"')
+    })
+
+    it("should not add comments for common props", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Radio 
+      className="test"
+      id="radio"
+      key="key"
+      style={{ color: 'red' }}
+      tabIndex={0}
+      label="Test"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toContain('className="test"')
+      expect(result).toContain('id="radio"')
+      expect(result).toContain('key="key"')
+      expect(result).toContain("style={{ color: 'red' }}")
+      expect(result).toContain("tabIndex={0}")
+    })
+
+    it("should not add comments for aria props", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Radio 
+      aria-label="Test radio"
+      aria-describedby="description"
+      label="Test"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toContain('aria-label="Test radio"')
+      expect(result).toContain('aria-describedby="description"')
+    })
+
+    it("should not add comments for data props", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Radio 
+      data-testid="radio"
+      data-cy="test-radio"
+      label="Test"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toContain('data-testid="radio"')
+      expect(result).toContain('data-cy="test-radio"')
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect radio without unsupported props", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Radio label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toBe(input)
+    })
+
+    it("should not affect other components", () => {
+      const input = `
+import { Button, Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button css={{ color: 'red' }}>Click me</Button>
+      <Radio label="Test" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toContain("css={{ color: 'red' }}")
+    })
+
+    it("should handle mixed supported and unsupported props", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Radio 
+      checked
+      css={{ color: 'red' }}
+      disabled
+      customProp="value"
+      label="Test"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("/* TODO: tapestry-migration (css):")
+      expect(result).toContain("/* TODO: tapestry-migration (customProp):")
+      expect(result).not.toContain("TODO: tapestry-migration.*checked")
+      expect(result).not.toContain("TODO: tapestry-migration.*disabled")
+      expect(result).not.toContain("TODO: tapestry-migration.*label")
+      expect(result).toContain("checked")
+      expect(result).toContain("disabled")
+      expect(result).toContain('label="Test"')
+    })
+  })
+})

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

@@ -0,0 +1,35 @@
+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"
+
+const transform: Transform = attributeTransformFactory({
+  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/shared/actions/getAttributeValue.test.ts

@@ -74,6 +74,24 @@ describe("getAttributeValue", () => {
   })
 
   describe("expression container values", () => {
+    it("should extract string literal from JSX expression container", () => {
+      const element = createElementFromCode('<Button size={"lg"}>Save</Button>')
+      const sizeAttribute = getAttributeFromElement(element, "size")
+
+      const value = getAttributeValue({ attribute: sizeAttribute, j })
+
+      expect(value).toBe("lg")
+    })
+
+    it("should extract string literal with single quotes from JSX expression container", () => {
+      const element = createElementFromCode("<Button size={'md'}>Save</Button>")
+      const sizeAttribute = getAttributeFromElement(element, "size")
+
+      const value = getAttributeValue({ attribute: sizeAttribute, j })
+
+      expect(value).toBe("md")
+    })
+
     it("should convert boolean expression to source code", () => {
       const element = createElementFromCode(
         "<Button disabled={true}>Save</Button>"

package/src/components/shared/actions/getAttributeValue.ts

@@ -7,9 +7,22 @@ export function getAttributeValue({
   attribute: JSXAttribute | null | undefined
   j: JSCodeshift
 }) {
-  return attribute && attribute.value
-    ? attribute?.value?.type === "StringLiteral"
-      ? attribute.value.value
-      : j(attribute.value).toSource()
-    : null
+  if (!attribute || !attribute.value) {
+    return null
+  }
+
+  // Handle string literal: attribute="value"
+  if (attribute.value.type === "StringLiteral") {
+    return attribute.value.value
+  }
+
+  // Handle JSX expression container with string literal: attribute={"value"}
+  if (attribute.value.type === "JSXExpressionContainer") {
+    if (attribute.value.expression.type === "StringLiteral") {
+      return attribute.value.expression.value
+    }
+  }
+
+  // For all other cases, return the source code representation
+  return j(attribute.value).toSource()
 }

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

@@ -8,8 +8,13 @@ export const COMMON_PROPS = [
   "className",
   "id",
   "key",
-  "kind",
   "label",
+  "ref",
+  "role",
+  "size",
+  "style",
+  "tabIndex",
+  "title",
   "onBlur",
   "onFocus",
   "onClick",
@@ -19,17 +24,27 @@ export const COMMON_PROPS = [
   "onMouseOut",
   "onMouseOver",
   "onMouseUp",
-  "prefix",
-  "ref",
-  "role",
-  "size",
-  "style",
-  "suffix",
-  "tabIndex",
-  "title",
 ]
 
+export const BUTTON_LINK_SHARED_PROPS = ["kind", "prefix", "suffix"]
+
 export const SUPPORTED_PROPS_BASE = [
+  ...COMMON_PROPS,
+  ...BUTTON_LINK_SHARED_PROPS,
   ...STYLE_PROP_NAMES_WITHOUT_CSS,
+]
+
+export const CHECKBOX_RADIO_SHARED_PROPS = [
+  "checked",
+  "disabled",
+  "name",
+  "onChange",
+  "required",
+  "value",
+]
+
+export const CHECKBOX_RADIO_SUPPORTED_PROPS = [
   ...COMMON_PROPS,
+  ...CHECKBOX_RADIO_SHARED_PROPS,
+  ...STYLE_PROP_NAMES_WITHOUT_CSS,
 ]

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

@@ -0,0 +1,84 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import { commentOnSpreadPropsFactory } from "./commentOnSpreadPropsFactory"
+
+const j = jscodeshift.withParser("tsx")
+
+const COMMENT =
+  "Spread props can contain unsupported props, please explore usages and migrate as needed."
+
+describe("commentOnSpreadPropsFactory", () => {
+  it("should add comments to spread props", () => {
+    const transform = commentOnSpreadPropsFactory({
+      targetComponent: "Button",
+      targetPackage: "@planningcenter/tapestry-react",
+    })
+
+    const fileInfo = {
+      path: "test.tsx",
+      source: `import { Button } from "@planningcenter/tapestry-react";
+<Button {...props} label="Save" />`,
+    }
+    const api = { j, jscodeshift: j, report: () => {}, stats: () => {} }
+
+    const result = transform(fileInfo, api, {})
+    expect(result).toContain(COMMENT)
+  })
+
+  it("should only transform components from the specified package", () => {
+    const transform = commentOnSpreadPropsFactory({
+      targetComponent: "Button",
+      targetPackage: "@planningcenter/tapestry-react",
+    })
+
+    const fileInfo = {
+      path: "test.tsx",
+      source: `import { Link } from "@planningcenter/tapestry-react";
+<Link {...props} />`,
+    }
+    const api = { j, jscodeshift: j, report: () => {}, stats: () => {} }
+
+    const result = transform(fileInfo, api, {})
+    expect(result).toBe(null)
+  })
+
+  it("should return null when no spread props are present", () => {
+    const transform = commentOnSpreadPropsFactory({
+      targetComponent: "Button",
+      targetPackage: "@planningcenter/tapestry-react",
+    })
+
+    const fileInfo = {
+      path: "test.tsx",
+      source: `import { Button } from "@planningcenter/tapestry-react";
+<Button label="Save" />`,
+    }
+    const api = { j, jscodeshift: j, report: () => {}, stats: () => {} }
+
+    const result = transform(fileInfo, api, {})
+    expect(result).toBe(null)
+  })
+
+  it("should handle multiple spread props", () => {
+    const transform = commentOnSpreadPropsFactory({
+      targetComponent: "Button",
+      targetPackage: "@planningcenter/tapestry-react",
+    })
+
+    const fileInfo = {
+      path: "test.tsx",
+      source: `import { Button } from "@planningcenter/tapestry-react";
+<Button {...props1} {...props2} label="Save" />`,
+    }
+    const api = { j, jscodeshift: j, report: () => {}, stats: () => {} }
+
+    const result = transform(fileInfo, api, {})
+    expect(result).toContain(COMMENT)
+    // Should have the comment twice (once per spread prop)
+    const matches = result?.match(
+      new RegExp(COMMENT.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g")
+    )
+    expect(matches).toHaveLength(2)
+  })
+})

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

@@ -0,0 +1,26 @@
+import { Transform } from "jscodeshift"
+
+import { addCommentToAttribute } from "../actions/addCommentToAttribute"
+import { getSpreadProps } from "../actions/getSpreadProps"
+import { hasSpreadProps } from "../actions/hasSpreadProps"
+import { attributeTransformFactory } from "./attributeTransformFactory"
+
+const COMMENT =
+  "Spread props can contain unsupported props, please explore usages and migrate as needed."
+
+export function commentOnSpreadPropsFactory(options: {
+  targetComponent: string
+  targetPackage: string
+}): Transform {
+  return attributeTransformFactory({
+    condition: hasSpreadProps,
+    transform: (element, { j }) => {
+      const spreadProps = getSpreadProps(element)
+      spreadProps.forEach((prop) =>
+        addCommentToAttribute({ attribute: prop, j, text: COMMENT })
+      )
+      return spreadProps.length > 0
+    },
+    ...options,
+  })
+}

package/src/reportGenerator.ts

@@ -30,6 +30,8 @@ export const GLOBAL_MESSAGES = {
     "Buttons inside of Tapestry Group components are not supported and should not be migrated at this time.",
   checkbox:
     "Checkbox sizes have adjusted. Verify visual appearance as sizes may differ slightly.",
+  radio:
+    "Radio sizes have adjusted. Verify visual appearance as sizes may differ slightly.",
 }
 
 export const WEIGHT_CONFIGS: { [key: string]: WeightConfig } = {