@planningcenter/tapestry-migration-cli 3.0.0-rc.8 → 3.0.0

package/src/components/checkbox/transforms/auditSpreadProps.test.ts

@@ -0,0 +1,356 @@
+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 Checkbox with single spread prop", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <Checkbox {...props} label="Save" name="choice" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+    })
+
+    it("should add comment to Checkbox with multiple spread props", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const baseProps = { onChange: handleChange }
+  const styleProps = { className: "checkbox" }
+  return <Checkbox {...baseProps} {...styleProps} label="Save" name="choice" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...baseProps}")
+      expect(result).toContain("{...styleProps}")
+    })
+
+    it("should handle Checkbox with spread props and regular attributes", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <Checkbox label="Save" name="choice" {...props} disabled />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain('label="Save"')
+      expect(result).toContain('name="choice"')
+      expect(result).toContain("{...props}")
+      expect(result).toContain("disabled")
+    })
+
+    it("should handle multiple Checkbox components with spread props", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props1 = { onChange: handleChange1 }
+  const props2 = { onChange: handleChange2 }
+  return (
+    <div>
+      <Checkbox {...props1} label="Save" name="choice" />
+      <Checkbox {...props2} label="Cancel" name="choice" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props1}")
+      expect(result).toContain("{...props2}")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not transform Checkbox without spread props", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Checkbox onChange={handleChange} label="Save" name="choice" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should not transform if Checkbox is not imported from @planningcenter/tapestry-react", () => {
+      const input = `
+import { Checkbox } from "other-library"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <Checkbox {...props} label="Save" name="choice" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should handle Checkbox with alias import", () => {
+      const input = `
+import { Checkbox as TapestryCheckbox } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <TapestryCheckbox {...props} label="Save" name="choice" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+    })
+
+    it("should handle mixed Checkbox components (with and without spread props)", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleSave }
+  return (
+    <div>
+      <Checkbox {...props} label="Save" name="choice" />
+      <Checkbox label="Cancel" name="choice" />
+      <Checkbox onChange={handleDelete} label="Delete" name="choice" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+      expect(result).toContain('<Checkbox label="Cancel" name="choice" />')
+      expect(result).toContain("onChange={handleDelete}")
+    })
+  })
+
+  describe("complex spread prop scenarios", () => {
+    it("should handle Checkbox with complex spread expression", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const baseProps = { className: "checkbox" }
+  const additionalProps = isDisabled ? { disabled: true } : {}
+  return <Checkbox {...baseProps} {...additionalProps} label="Save" name="choice" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...baseProps}")
+      expect(result).toContain("{...additionalProps}")
+    })
+
+    it("should handle Checkbox with spread props in different positions", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { className: "checkbox" }
+  return (
+    <Checkbox
+      label="Save"
+      name="choice"
+      {...props}
+      disabled={false}
+      onChange={handleSave}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain('label="Save"')
+      expect(result).toContain('name="choice"')
+      expect(result).toContain("{...props}")
+      expect(result).toContain("disabled={false}")
+      expect(result).toContain("onChange={handleSave}")
+    })
+
+    it("should handle spread props with object expressions", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Checkbox {...{ onChange: handleChange, className: "checkbox" }} label="Save" name="choice" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain(
+        '{...{ onChange: handleChange, className: "checkbox" }}'
+      )
+    })
+
+    it("should handle spread props with function calls", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Checkbox {...getCheckboxProps()} {...getStyleProps()} label="Save" name="choice" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...getCheckboxProps()}")
+      expect(result).toContain("{...getStyleProps()}")
+    })
+  })
+
+  describe("self-closing Checkbox components", () => {
+    it("should handle self-closing Checkbox with spread props", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { label: "Close", name: "choice", onChange: handleClose }
+  return <Checkbox {...props} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+    })
+
+    it("should handle self-closing Checkbox with multiple spread props and attributes", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const baseProps = { onChange: handleChange }
+  const styleProps = { className: "checkbox" }
+  return <Checkbox label="Action" name="choice" {...baseProps} {...styleProps} disabled />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain('label="Action"')
+      expect(result).toContain('name="choice"')
+      expect(result).toContain("{...baseProps}")
+      expect(result).toContain("{...styleProps}")
+      expect(result).toContain("disabled")
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("should return null when no Checkbox components have spread props", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Checkbox label="Save" name="choice" />
+      <Checkbox label="Delete" name="choice" />
+      <Checkbox onChange={handleChange} label="Cancel" name="choice" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when no Checkbox 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)
+    })
+
+    it("should return null for empty file", () => {
+      const result = applyTransform("")
+      expect(result).toBe(null)
+    })
+
+    it("should return null when file has no JSX", () => {
+      const input = `
+export function handleChange() {
+  console.log("changed")
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+  })
+
+  describe("different import scenarios", () => {
+    it("should handle default import with spread props", () => {
+      const input = `
+import Checkbox from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <Checkbox {...props} label="Save" name="choice" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should handle namespace import", () => {
+      const input = `
+import * as Tapestry from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <Tapestry.Checkbox {...props} label="Save" name="choice" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+  })
+})

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

@@ -0,0 +1,10 @@
+import { Transform } from "jscodeshift"
+
+import { commentOnSpreadPropsFactory } from "../../shared/transformFactories/commentOnSpreadPropsFactory"
+
+const transform: Transform = commentOnSpreadPropsFactory({
+  targetComponent: "Checkbox",
+  targetPackage: "@planningcenter/tapestry-react",
+})
+
+export default transform

package/src/components/checkbox/transforms/sizeMapping.test.ts

@@ -34,6 +34,23 @@ function Test() {
       )
     })
 
+    it('should transform size={"lg"} to md', () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox size={"lg"} label="Large checkbox" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).not.toContain('size={"lg"}')
+      expect(result).toContain(
+        'TODO: tapestry-migration (size): Size "lg" was mapped to "md"'
+      )
+    })
+
     it("should transform xl to md", () => {
       const input = `
 import { Checkbox } from "@planningcenter/tapestry-react"
@@ -51,7 +68,24 @@ function Test() {
       )
     })
 
-    it("should not transform xs size", () => {
+    it('should transform size={"xl"} to md', () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox size={"xl"} label="Extra large checkbox" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).not.toContain('size={"xl"}')
+      expect(result).toContain(
+        'TODO: tapestry-migration (size): Size "xl" was mapped to "md"'
+      )
+    })
+
+    it("should transform xs to sm", () => {
       const input = `
 import { Checkbox } from "@planningcenter/tapestry-react"
 
@@ -61,8 +95,28 @@ function Test() {
       `.trim()
 
       const result = applyTransform(input)
-      expect(result).toContain('size="xs"')
-      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toContain('size="sm"')
+      expect(result).not.toContain('size="xs"')
+      expect(result).toContain(
+        'TODO: tapestry-migration (size): Size "xs" was mapped to "sm"'
+      )
+    })
+
+    it('should transform size={"xs"} to sm', () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox size={"xs"} label="Extra small checkbox" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="sm"')
+      expect(result).not.toContain('size={"xs"}')
+      expect(result).toContain(
+        'TODO: tapestry-migration (size): Size "xs" was mapped to "sm"'
+      )
     })
 
     it("should not transform supported sizes", () => {
@@ -74,7 +128,6 @@ function Test() {
     <div>
       <Checkbox size="md" label="Medium checkbox" />
       <Checkbox size="sm" label="Small checkbox" />
-      <Checkbox size="xs" label="Extra small checkbox" />
     </div>
   )
 }
@@ -83,7 +136,6 @@ function Test() {
       const result = applyTransform(input)
       expect(result).toContain('size="md"')
       expect(result).toContain('size="sm"')
-      expect(result).toContain('size="xs"')
       expect(result).not.toContain("TODO: tapestry-migration")
     })
   })
@@ -139,12 +191,13 @@ function Test() {
 
       const result = applyTransform(input)
       expect(result).toContain('size="md"')
-      expect(result).toContain('size="xs"')
+      expect(result).toContain('size="sm"')
       expect(result).not.toContain('size="lg"')
       expect(result).not.toContain('size="xl"')
-      // Should have 2 TODO comments (one for lg->md, one for xl->md)
+      expect(result).not.toContain('size="xs"')
+      // Should have 3 TODO comments (one for lg->md, one for xl->md, one for xs->sm)
       const todoMatches = result.match(/TODO: tapestry-migration \(size\)/g)
-      expect(todoMatches).toHaveLength(2)
+      expect(todoMatches).toHaveLength(3)
     })
 
     it("should preserve other props", () => {
@@ -175,7 +228,33 @@ function Test() {
       )
     })
 
-    it("should not transform expression values", () => {
+    it("should handle mixed string literals and JSXExpressionContainers", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Checkbox size="lg" label="String literal" />
+      <Checkbox size={"xl"} label="JSXExpressionContainer" />
+      <Checkbox size="xs" label="Another string literal" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).toContain('size="sm"')
+      expect(result).not.toContain('size="lg"')
+      expect(result).not.toContain('size={"xl"}')
+      expect(result).not.toContain('size="xs"')
+      // Should have 3 TODO comments (one for lg->md, one for xl->md, one for xs->sm)
+      const todoMatches = result.match(/TODO: tapestry-migration \(size\)/g)
+      expect(todoMatches).toHaveLength(3)
+    })
+
+    it("should not transform variable expression values", () => {
       const input = `
 import { Checkbox } from "@planningcenter/tapestry-react"
 

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

@@ -1,45 +1,15 @@
 import { Transform } from "jscodeshift"
 
-import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
-import { hasAttribute } from "../../shared/conditions/hasAttribute"
-import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { sizeMappingFactory } from "../../shared/transformFactories/sizeMappingFactory"
 
-const SIZE_MAPPING = {
-  lg: "md",
-  xl: "md",
-}
-
-const transform: Transform = attributeTransformFactory({
-  condition: hasAttribute("size"),
+const transform: Transform = sizeMappingFactory({
+  sizeMapping: {
+    lg: "md",
+    xl: "md",
+    xs: "sm",
+  },
   targetComponent: "Checkbox",
   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") {
-      if (sizeAttr.value?.type === "StringLiteral") {
-        const sizeValue = sizeAttr.value.value as string
-        const mappedSize = SIZE_MAPPING[sizeValue as keyof typeof SIZE_MAPPING]
-
-        if (mappedSize && mappedSize !== sizeValue) {
-          sizeAttr.value.value = 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/checkbox/transforms/unsupportedProps.ts

@@ -1,20 +1,15 @@
 import { JSXAttribute, Transform } from "jscodeshift"
 
 import { addCommentToUnsupportedProps } from "../../shared/actions/addCommentToUnsupportedProps"
-import { SUPPORTED_PROPS_BASE } from "../../shared/helpers/unsupportedPropsHelpers"
+import { CHECKBOX_RADIO_SUPPORTED_PROPS } from "../../shared/helpers/unsupportedPropsHelpers"
 import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
 
-const CHECKBOX_SPECIFIC_PROPS = [
-  "checked",
-  "disabled",
-  "indeterminate",
-  "label",
-  "name",
-  "onChange",
-  "value",
-]
+const CHECKBOX_SPECIFIC_PROPS = ["indeterminate"]
 
-const SUPPORTED_PROPS = [...SUPPORTED_PROPS_BASE, ...CHECKBOX_SPECIFIC_PROPS]
+const SUPPORTED_PROPS = [
+  ...CHECKBOX_RADIO_SUPPORTED_PROPS,
+  ...CHECKBOX_SPECIFIC_PROPS,
+]
 
 const transform: Transform = attributeTransformFactory({
   targetComponent: "Checkbox",

package/src/components/link/transforms/auditSpreadProps.ts

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

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

@@ -302,10 +302,12 @@ export default function Test({ items }) {
 }
       `.trim()
 
-      const result = applyTransform(input)
+      const result = applyTransform(input)!
 
-      expect(result).toContain(
-        "<Tooltip key={item.id} {...`Save ${item.name}`}>"
+      expect(result).toContain("<Tooltip")
+      expect(result).toContain("key={item.id}")
+      expect(result.replace(/\s+/g, " ")).toContain(
+        "{...{ title: `Save ${item.name}` }}"
       )
       expect(result).toContain(
         "<Link href={item.url} onClick={() => save(item)}>"

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

@@ -1,7 +1,7 @@
 import { JSXAttribute, Transform } from "jscodeshift"
 
 import { addCommentToUnsupportedProps } from "../../shared/actions/addCommentToUnsupportedProps"
-import { SUPPORTED_PROPS_BASE } from "../../shared/helpers/unsupportedPropsHelpers"
+import { BUTTON_LINK_SUPPORTED_PROPS } from "../../shared/helpers/unsupportedPropsHelpers"
 import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
 
 // Note: 'target' and 'rel' are NOT included because they are handled by targetBlankToExternal transform
@@ -16,7 +16,7 @@ const LINK_SPECIFIC_PROPS = [
   "type",
 ]
 
-const SUPPORTED_PROPS = [...SUPPORTED_PROPS_BASE, ...LINK_SPECIFIC_PROPS]
+const SUPPORTED_PROPS = [...BUTTON_LINK_SUPPORTED_PROPS, ...LINK_SPECIFIC_PROPS]
 
 const transform: Transform = attributeTransformFactory({
   targetComponent: "Link",