@planningcenter/tapestry-migration-cli 2.7.1-qa-513.0 → 2.7.1-qa-522.0

package/dist/tapestry-react-shim.cjs

@@ -2925,8 +2925,8 @@ const tokens = {
   "--t-fill-color-control-neutral-off": "hsl(0, 0%, 58%)",
   "--t-fill-color-control-neutral-on": "hsl(0, 0%, 24%)",
   "--t-fill-color-control": "hsl(204, 100%, 40%)",
-  "--t-fill-color-control-secondary": "hsl(97, 57%, 40%)",
   "--t-fill-color-control-error": "hsl(8, 60%, 47%)",
+  "--t-fill-color-control-secondary": "hsl(97, 57%, 40%)",
   "--t-fill-color-control-disabled": "hsl(0, 0%, 81%)",
   "--t-fill-color-status-neutral": "hsl(0, 0%, 42%)",
   "--t-fill-color-status-neutral-ghost": "hsl(0, 0%, 93%)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "2.7.1-qa-513.0",
+  "version": "2.7.1-qa-522.0",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -32,6 +32,7 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
+    "@planningcenter/tapestry": "^2.7.1-qa-522.0",
     "@planningcenter/tapestry-react": "^4.11.5",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^20.0.0",
@@ -51,5 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "99523ff01a0b24f7ecaf6a22b9da40e2594880ef"
+  "gitHead": "98685175a4b14601fd9a6c0b5974a9a91161fe2c"
 }

package/src/components/button/transforms/themeVariantToKind.test.ts

@@ -253,7 +253,7 @@ describe("themeVariantToKind", () => {
       expect(result).toContain(
         "TODO: tapestry-migration (theme/variant): cannot be converted"
       )
-      expect(result).toContain('{"primary"}')
+      expect(result).toContain('theme="primary"')
     })
   })
 

package/src/components/checkbox/index.ts

@@ -1,5 +1,6 @@
 import { Transform } from "jscodeshift"
 
+import auditSpreadProps from "./transforms/auditSpreadProps"
 import childrenToLabel from "./transforms/childrenToLabel"
 import convertStyleProps from "./transforms/convertStyleProps"
 import innerRefToRef from "./transforms/innerRefToRef"
@@ -12,6 +13,7 @@ const transform: Transform = (fileInfo, api, options) => {
   let hasAnyChanges = false
 
   const transforms = [
+    auditSpreadProps,
     childrenToLabel,
     sizeMapping,
     innerRefToRef,

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,12 +1,14 @@
 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({
@@ -21,12 +23,13 @@ const transform: Transform = attributeTransformFactory({
     )
 
     if (sizeAttr && sizeAttr.type === "JSXAttribute") {
-      if (sizeAttr.value?.type === "StringLiteral") {
-        const sizeValue = sizeAttr.value.value as string
+      const sizeValue = getAttributeValue({ attribute: sizeAttr, j })
+
+      if (sizeValue) {
         const mappedSize = SIZE_MAPPING[sizeValue as keyof typeof SIZE_MAPPING]
 
         if (mappedSize && mappedSize !== sizeValue) {
-          sizeAttr.value.value = mappedSize
+          sizeAttr.value = j.stringLiteral(mappedSize)
           hasChanges = true
 
           addCommentToAttribute({

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/radio/index.ts

@@ -0,0 +1,38 @@
+import { Transform } from "jscodeshift"
+
+import auditSpreadProps from "./transforms/auditSpreadProps"
+import convertStyleProps from "./transforms/convertStyleProps"
+import moveRadioImport from "./transforms/moveRadioImport"
+import setDefaultSize from "./transforms/setDefaultSize"
+import sizeMapping from "./transforms/sizeMapping"
+import unsupportedProps from "./transforms/unsupportedProps"
+
+const transform: Transform = (fileInfo, api, options) => {
+  let currentSource = fileInfo.source
+  let hasAnyChanges = false
+
+  const transforms = [
+    auditSpreadProps,
+    setDefaultSize,
+    sizeMapping,
+    convertStyleProps,
+    unsupportedProps,
+    moveRadioImport,
+  ]
+
+  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