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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "2.8.0-rc.13",
+  "version": "2.8.0-rc.15",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -52,5 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "420b064d8d040be10e3837b4c287692791564d08"
+  "gitHead": "6fca04d14f1d3e001938f95095612537fd3654ea"
 }

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/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

package/src/components/radio/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 Radio with single spread prop", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <Radio {...props} label="Save" name="choice" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+    })
+
+    it("should add comment to Radio with multiple spread props", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const baseProps = { onChange: handleChange }
+  const styleProps = { className: "radio" }
+  return <Radio {...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 Radio with spread props and regular attributes", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <Radio 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 Radio components with spread props", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props1 = { onChange: handleChange1 }
+  const props2 = { onChange: handleChange2 }
+  return (
+    <div>
+      <Radio {...props1} label="Save" name="choice" />
+      <Radio {...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 Radio without spread props", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Radio onChange={handleChange} label="Save" name="choice" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should not transform if Radio is not imported from @planningcenter/tapestry-react", () => {
+      const input = `
+import { Radio } from "other-library"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <Radio {...props} label="Save" name="choice" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should handle Radio with alias import", () => {
+      const input = `
+import { Radio as TapestryRadio } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <TapestryRadio {...props} label="Save" name="choice" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+    })
+
+    it("should handle mixed Radio components (with and without spread props)", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleSave }
+  return (
+    <div>
+      <Radio {...props} label="Save" name="choice" />
+      <Radio label="Cancel" name="choice" />
+      <Radio onChange={handleDelete} label="Delete" name="choice" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+      expect(result).toContain('<Radio label="Cancel" name="choice" />')
+      expect(result).toContain("onChange={handleDelete}")
+    })
+  })
+
+  describe("complex spread prop scenarios", () => {
+    it("should handle Radio with complex spread expression", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const baseProps = { className: "radio" }
+  const additionalProps = isDisabled ? { disabled: true } : {}
+  return <Radio {...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 Radio with spread props in different positions", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { className: "radio" }
+  return (
+    <Radio
+      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 { Radio } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Radio {...{ onChange: handleChange, className: "radio" }} label="Save" name="choice" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain(
+        '{...{ onChange: handleChange, className: "radio" }}'
+      )
+    })
+
+    it("should handle spread props with function calls", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Radio {...getRadioProps()} {...getStyleProps()} label="Save" name="choice" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...getRadioProps()}")
+      expect(result).toContain("{...getStyleProps()}")
+    })
+  })
+
+  describe("self-closing Radio components", () => {
+    it("should handle self-closing Radio with spread props", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { label: "Close", name: "choice", onChange: handleClose }
+  return <Radio {...props} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+    })
+
+    it("should handle self-closing Radio with multiple spread props and attributes", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const baseProps = { onChange: handleChange }
+  const styleProps = { className: "radio" }
+  return <Radio 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 Radio components have spread props", () => {
+      const input = `
+import { Radio } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Radio label="Save" name="choice" />
+      <Radio label="Delete" name="choice" />
+      <Radio onChange={handleChange} label="Cancel" name="choice" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when no Radio 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 Radio from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <Radio {...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.Radio {...props} label="Save" name="choice" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+  })
+})

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

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

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

@@ -0,0 +1,161 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./convertStyleProps"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string, options = {}) {
+  const fileInfo = { path: "test.tsx", source }
+  const result = transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    options
+  ) as string | null
+  return result || source
+}
+
+describe("convertStyleProps transform", () => {
+  describe("visible prop - handled by theme system", () => {
+    it("should convert visible={false} to display: none", () => {
+      const source = `
+        import { Radio } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Radio visible={false} label="Hidden Radio" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain('display: "none"')
+      expect(result).not.toContain("visible={false}")
+    })
+
+    it("should remove visible={true} with no style changes (true is default)", () => {
+      const source = `
+        import { Radio } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Radio visible={true} label="Visible Radio" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      // visible={true} is default behavior, so it should be removed with no style added
+      expect(result).not.toContain("visible={true}")
+      expect(result).not.toContain("style={{") // No style should be added
+      expect(result).toContain('<Radio label="Visible Radio" />')
+    })
+
+    it("should handle visible expressions", () => {
+      const source = `
+        import { Radio } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          const isVisible = true
+          return <Radio visible={isVisible} label="Variable Radio" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      // Note: visible expressions are handled by handleVisibleExpressions transform,
+      // not convertStyleProps, so the visible prop should remain
+      expect(result).toContain("visible: isVisible")
+      expect(result).toContain("style={{") // Style should be added for expressions
+    })
+  })
+
+  describe("style prop removal", () => {
+    it("should remove alignItems prop", () => {
+      const source = `
+        import { Radio } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Radio alignItems="center" label="Test" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toContain("alignItems=")
+    })
+
+    it("should remove marginTop prop", () => {
+      const source = `
+        import { Radio } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Radio marginTop={16} label="Test" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toContain("marginTop=")
+    })
+
+    it("should remove multiple style props", () => {
+      const source = `
+        import { Radio } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Radio alignItems="center" marginTop={16} label="Test" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toContain("alignItems=")
+      expect(result).not.toContain("marginTop=")
+    })
+  })
+
+  describe("combination of style props", () => {
+    it("should handle combination of visible and style props", () => {
+      const source = `
+        import { Radio } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <Radio
+              visible={false}
+              alignItems="center"
+              marginTop={16}
+              label="Combined Radio"
+            />
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain('display: "none"') // from visible={false}
+      expect(result).not.toContain("visible={false}")
+      expect(result).not.toContain("alignItems=")
+      expect(result).not.toContain("marginTop=")
+    })
+  })
+
+  describe("import handling", () => {
+    it("should not affect imports", () => {
+      const source = `
+        import { Radio } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Radio visible={false} label="Test" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain(
+        'import { Radio } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+})

package/src/components/radio/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: "Radio",
+  targetPackage: "@planningcenter/tapestry-react",
+})