@planningcenter/tapestry-migration-cli 3.1.0-rc.0 → 3.1.0-rc.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "3.1.0-rc.0",
+  "version": "3.1.0-rc.10",
   "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.1.0-rc.0",
+    "@planningcenter/tapestry": "^3.1.0-rc.10",
     "@planningcenter/tapestry-react": "^4.11.5",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^20.0.0",
@@ -52,5 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "40a91a7f151dcdc14176e0db2761062b31e51086"
+  "gitHead": "f2b292d99911669942785d4c0d49327caf0fa663"
 }

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

@@ -252,6 +252,103 @@ describe("convertStyleProps transform", () => {
       expect(result).toContain("paddingTop:")
       expect(result).not.toContain("marginLeft={16}")
       expect(result).not.toContain('paddingTop="8px"')
+      expect(result).toContain('color: "red"')
+      expect(result).toContain("fontSize: 14")
+    })
+
+    it("should preserve non-conflicting existing props when merging", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <Button
+              style={{ color: "red" }}
+              marginLeft={16}
+            >
+              Test
+            </Button>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain('color: "red"')
+      expect(result).toContain("marginLeft:")
+      expect(result).not.toContain("marginLeft={16}")
+    })
+
+    it("should let new props win over conflicting existing props", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <Button
+              style={{ marginLeft: "999px" }}
+              marginLeft={16}
+            >
+              Test
+            </Button>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).not.toContain('"999px"')
+      expect(result).toContain("marginLeft:")
+    })
+
+    it("should preserve SpreadElement when merging", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <Button
+              style={{ ...base, color: "red" }}
+              paddingTop="8px"
+            >
+              Test
+            </Button>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain("...base")
+      expect(result).toContain('color: "red"')
+      expect(result).toContain("paddingTop:")
+    })
+
+    it("should merge computed styles into existing dynamic style prop via spread", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <Button
+              style={getStyles()}
+              marginLeft={16}
+            >
+              Test
+            </Button>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain("...getStyles()")
+      expect(result).toContain("marginLeft:")
+      expect(result).not.toContain("Could not merge")
     })
   })
 

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

@@ -5,7 +5,6 @@ import transform from "./removeTypeButton"
 
 const j = jscodeshift.withParser("tsx")
 
-// Helper to run transform and get result
 function applyTransform(source: string): string | null {
   const fileInfo = { path: "test.tsx", source }
   const api = {

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

@@ -91,6 +91,9 @@ function Test() {
         'import { Button } from "@planningcenter/tapestry-react"'
       )
       expect(result).toContain(
+        'import { Checkbox } from "@planningcenter/tapestry"'
+      )
+      expect(result).not.toContain(
         'import { Checkbox } from "@planningcenter/tapestry-react"'
       )
     })

package/src/components/input/index.ts

@@ -0,0 +1,66 @@
+import { Transform } from "jscodeshift"
+
+import auditSpreadProps from "./transforms/auditSpreadProps"
+import autoWidthTransform from "./transforms/autoWidthTransform"
+import convertStyleProps from "./transforms/convertStyleProps"
+import highlightOnInteractionToSelectTextOnFocus from "./transforms/highlightOnInteractionToSelectTextOnFocus"
+import inputLabelToLabelProp from "./transforms/inputLabelToLabelProp"
+import mergeFieldIntoInput from "./transforms/mergeFieldIntoInput"
+import mergeInputLabel from "./transforms/mergeInputLabel"
+import moveInputImport from "./transforms/moveInputImport"
+import numberFieldAddTypeNumber from "./transforms/numberFieldAddTypeNumber"
+import numberFieldRenameToInput from "./transforms/numberFieldRenameToInput"
+import removeAsInput from "./transforms/removeAsInput"
+import removeDuplicateKeys from "./transforms/removeDuplicateKeys"
+import removeInputBox from "./transforms/removeInputBox"
+import removeRedundantAriaLabel from "./transforms/removeRedundantAriaLabel"
+import removeTypeText from "./transforms/removeTypeText"
+import sizeMapping from "./transforms/sizeMapping"
+import skipRenderSideProps from "./transforms/skipRenderSideProps"
+import stateToInvalid from "./transforms/stateToInvalid"
+import stateToInvalidTernary from "./transforms/stateToInvalidTernary"
+import unsupportedProps from "./transforms/unsupportedProps"
+
+const transform: Transform = (fileInfo, api, options) => {
+  let currentSource = fileInfo.source
+  let hasAnyChanges = false
+
+  const transforms = [
+    numberFieldAddTypeNumber,
+    numberFieldRenameToInput,
+    removeInputBox,
+    skipRenderSideProps,
+    mergeInputLabel,
+    mergeFieldIntoInput,
+    auditSpreadProps,
+    highlightOnInteractionToSelectTextOnFocus,
+    sizeMapping,
+    autoWidthTransform,
+    stateToInvalidTernary,
+    stateToInvalid,
+    convertStyleProps,
+    inputLabelToLabelProp,
+    removeDuplicateKeys,
+    removeRedundantAriaLabel,
+    removeTypeText,
+    removeAsInput,
+    unsupportedProps,
+    moveInputImport,
+  ]
+
+  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/input/transformableInput.ts

@@ -0,0 +1,8 @@
+import { hasAttribute } from "../shared/conditions/hasAttribute"
+import { notCondition } from "../shared/conditions/notCondition"
+import { orConditions } from "../shared/conditions/orConditions"
+import { TransformCondition } from "../shared/types"
+
+export const transformableInput: TransformCondition = notCondition(
+  orConditions(hasAttribute("renderLeft"), hasAttribute("renderRight"))
+)

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

@@ -0,0 +1,192 @@
+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 Input with single spread prop", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <Input {...props} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+    })
+
+    it("should add comment to Input with multiple spread props", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const baseProps = { onChange: handleChange }
+  const styleProps = { className: "input" }
+  return <Input {...baseProps} {...styleProps} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...baseProps}")
+      expect(result).toContain("{...styleProps}")
+    })
+
+    it("should handle Input with spread props and regular attributes", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <Input label="Name" {...props} disabled />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain('label="Name"')
+      expect(result).toContain("{...props}")
+      expect(result).toContain("disabled")
+    })
+
+    it("should handle multiple Input components with spread props", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props1 = { onChange: handleChange1 }
+  const props2 = { onChange: handleChange2 }
+  return (
+    <div>
+      <Input {...props1} label="First" />
+      <Input {...props2} label="Second" />
+    </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 Input without spread props", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Input onChange={handleChange} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should not transform if Input is not imported from @planningcenter/tapestry-react", () => {
+      const input = `
+import { Input } from "other-library"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <Input {...props} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should handle Input with alias import", () => {
+      const input = `
+import { Input as TapestryInput } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <TapestryInput {...props} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+    })
+
+    it("should handle mixed Input components (with and without spread props)", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleSave }
+  return (
+    <div>
+      <Input {...props} label="First" />
+      <Input label="Second" />
+      <Input onChange={handleChange} label="Third" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+      expect(result).toContain('<Input label="Second" />')
+      expect(result).toContain("onChange={handleChange}")
+    })
+
+    it("should return null when no Input components have spread props", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Input label="First" />
+      <Input label="Second" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when no Input 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)
+    })
+  })
+})

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

@@ -0,0 +1,26 @@
+import { Transform } from "jscodeshift"
+
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { getSpreadProps } from "../../shared/actions/getSpreadProps"
+import { hasSpreadProps } from "../../shared/actions/hasSpreadProps"
+import { andConditions } from "../../shared/conditions/andConditions"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { transformableInput } from "../transformableInput"
+
+const COMMENT =
+  "Spread props can contain unsupported props, please explore usages and migrate as needed."
+
+const transform: Transform = attributeTransformFactory({
+  condition: andConditions(hasSpreadProps, transformableInput),
+  targetComponent: "Input",
+  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/input/transforms/autoWidthTransform.test.ts

@@ -0,0 +1,172 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./autoWidthTransform"
+
+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("autoWidthTransform transform", () => {
+  describe("boolean values — pass through unchanged", () => {
+    it("should not add comment for shorthand autoWidth", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input autoWidth label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toBe(input)
+    })
+
+    it("should not add comment for autoWidth={true}", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input autoWidth={true} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toBe(input)
+    })
+
+    it("should not add comment for autoWidth={false}", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input autoWidth={false} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toBe(input)
+    })
+  })
+
+  describe("non-boolean values — add comment", () => {
+    it("should add comment for numeric autoWidth", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input autoWidth={120} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (autoWidth)")
+      expect(result).toContain(
+        "'autoWidth' no longer accepts measurement values"
+      )
+      expect(result).toContain("autoWidth={120}")
+    })
+
+    it("should add comment for string autoWidth", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input autoWidth="fit-content" label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (autoWidth)")
+      expect(result).toContain(
+        "'autoWidth' no longer accepts measurement values"
+      )
+    })
+
+    it("should add comment for variable autoWidth", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const width = 120
+  return <Input autoWidth={width} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (autoWidth)")
+    })
+
+    it("should add comment for expression autoWidth", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input autoWidth={isWide ? 200 : 100} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (autoWidth)")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect Input without autoWidth prop", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not affect other components", () => {
+      const input = `
+import { Input, Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button autoWidth={120}>Click</Button>
+      <Input autoWidth={120} label="Name" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (autoWidth)")
+      // Verify the Button is unchanged
+      expect(result).toContain("<Button autoWidth={120}>Click</Button>")
+    })
+
+    it("should not transform if not imported from @planningcenter/tapestry-react", () => {
+      const input = `
+import { Input } from "other-library"
+
+function Test() {
+  return <Input autoWidth={120} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+  })
+})

package/src/components/input/transforms/autoWidthTransform.ts

@@ -0,0 +1,41 @@
+import { Transform } from "jscodeshift"
+
+import { addComment } from "../../shared/actions/addComment"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { andConditions } from "../../shared/conditions/andConditions"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { transformableInput } from "../transformableInput"
+
+const transform: Transform = attributeTransformFactory({
+  condition: andConditions(hasAttribute("autoWidth"), transformableInput),
+  targetComponent: "Input",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const attr = getAttribute({ element, name: "autoWidth" })
+    if (!attr) return false
+
+    // Shorthand boolean (<Input autoWidth />) — pass through
+    if (attr.value === null) return false
+
+    // Explicit boolean ({true} or {false}) — pass through
+    if (
+      attr.value.type === "JSXExpressionContainer" &&
+      attr.value.expression.type === "BooleanLiteral"
+    ) {
+      return false
+    }
+
+    // Non-boolean value — add comment
+    addComment({
+      element,
+      j,
+      scope: "autoWidth",
+      source,
+      text: "'autoWidth' no longer accepts measurement values. Use autoWidth={true} to grow to content width, or remove the prop.",
+    })
+    return true
+  },
+})
+
+export default transform