@planningcenter/tapestry-migration-cli 3.1.0-rc.8 → 3.1.0-rc.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "3.1.0-rc.8",
+  "version": "3.1.0-rc.9",
   "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.8",
+    "@planningcenter/tapestry": "^3.1.0-rc.9",
     "@planningcenter/tapestry-react": "^4.11.5",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^20.0.0",
@@ -52,5 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "51c9b65e6a3dcf646b76eb543fc81e27bca3ae16"
+  "gitHead": "c3dd0518ee1bbb86ffd8796a6d9604273306a7a0"
 }

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

@@ -0,0 +1,212 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./removeTypeInput"
+
+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 = {
+    j,
+    jscodeshift: j,
+    report: () => {},
+    stats: () => {},
+  }
+  const result = transform(fileInfo, api, {})
+  return result as string | null
+}
+
+describe("removeTypeInput transform", () => {
+  describe("basic transformation", () => {
+    it("should remove type='input' from Input", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="input" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Input />")
+      expect(result).not.toContain('type="input"')
+    })
+
+    it('should remove type="input" from Input with other props', () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="input" onChange={handleChange} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Input onChange={handleChange} />")
+      expect(result).not.toContain('type="input"')
+    })
+
+    it("should preserve Input without type='input'", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input onChange={handleChange} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should preserve Input with type='email'", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="email" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should preserve Input with type='number'", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="number" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should remove type='text' from Input", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="text" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Input />")
+      expect(result).not.toContain('type="text"')
+    })
+
+    it("should remove type='text' from Input with other props", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="text" value={searchTerm} placeholder="Search" onChange={handleChange} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).not.toContain('type="text"')
+      expect(result).toContain("value={searchTerm}")
+      expect(result).toContain('placeholder="Search"')
+      expect(result).toContain("onChange={handleChange}")
+    })
+  })
+
+  describe("multiple inputs", () => {
+    it("should handle mixed Input usage", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Input type="input" />
+              <Input type="text" />
+              <Input type="email" />
+              <Input type="input" onChange={handleChange} />
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('<Input type="email" />')
+      expect(result).toContain("<Input onChange={handleChange} />")
+      expect(result).not.toContain('type="input"')
+      expect(result).not.toContain('type="text"')
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect HTML input elements", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Input type="input" />
+              <input type="input" />
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Input />")
+      expect(result).toContain('<input type="input" />')
+    })
+
+    it("should handle expression syntax type={'input'}", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type={"input"} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      if (result) {
+        expect(result).toContain("<Input />")
+        expect(result).not.toContain('type={"input"}')
+      } else {
+        expect(input).toContain('type={"input"}')
+      }
+    })
+  })
+
+  describe("import handling", () => {
+    it("should not affect imports", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="input" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Input } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+})

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

@@ -0,0 +1,22 @@
+import { Transform } from "jscodeshift"
+
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { hasAttributeValue } from "../../shared/conditions/hasAttributeValue"
+import { orConditions } from "../../shared/conditions/orConditions"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { transformableInput } from "../transformableInput"
+
+const transform: Transform = attributeTransformFactory({
+  condition: (element, context) =>
+    transformableInput(element, context) &&
+    orConditions(
+      hasAttributeValue("type", "input"),
+      hasAttributeValue("type", "text")
+    )(element, context),
+  targetComponent: "Input",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) =>
+    removeAttribute("type", { element, j, source }),
+})
+
+export default transform

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

@@ -101,3 +101,36 @@ export const INPUT_SUPPORTED_PROPS = [
   ...INPUT_SPECIFIC_PROPS,
   ...STYLE_PROP_NAMES_WITHOUT_CSS,
 ]
+
+export const TEXTAREA_SPECIFIC_PROPS = [
+  "autoComplete",
+  "autoFocus",
+  "cols",
+  "defaultValue",
+  "description",
+  "disabled",
+  "dirname",
+  "form",
+  "hideLabel",
+  "invalid",
+  "maxLength",
+  "minLength",
+  "name",
+  "onChange",
+  "onInput",
+  "onSelect",
+  "placeholder",
+  "readOnly",
+  "required",
+  "resize",
+  "rows",
+  "spellCheck",
+  "value",
+  "wrap",
+]
+
+export const TEXTAREA_SUPPORTED_PROPS = [
+  ...COMMON_PROPS,
+  ...TEXTAREA_SPECIFIC_PROPS,
+  ...STYLE_PROP_NAMES_WITHOUT_CSS,
+]

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

@@ -167,6 +167,7 @@ function applyStylesToComponent({
 }: {
   element: JSXElement
   j: JSCodeshift
+  source: Collection
   styles: Record<string, unknown>
 }) {
   const styleAttr = getAttribute({ element, name: "style" })
@@ -360,7 +361,7 @@ export function stylePropTransformFactory(config: {
         if (options.verbose) console.log("Final generated styles:", styles)
 
         if (Object.keys(styles).length > 0) {
-          applyStylesToComponent({ element, j, styles })
+          applyStylesToComponent({ element, j, source, styles })
 
           if (options.verbose) {
             const styleAttr = getAttribute({ element, name: "style" })

package/src/components/text-area/index.ts

@@ -0,0 +1,48 @@
+import { Transform } from "jscodeshift"
+
+import auditSpreadProps from "./transforms/auditSpreadProps"
+import convertStyleProps from "./transforms/convertStyleProps"
+import innerRefToRef from "./transforms/innerRefToRef"
+import mergeFieldIntoTextArea from "./transforms/mergeFieldIntoTextArea"
+import moveTextAreaImport from "./transforms/moveTextAreaImport"
+import removeDuplicateKeys from "./transforms/removeDuplicateKeys"
+import removeRedundantAriaLabel from "./transforms/removeRedundantAriaLabel"
+import sizeMapping from "./transforms/sizeMapping"
+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 = [
+    mergeFieldIntoTextArea,
+    auditSpreadProps,
+    innerRefToRef,
+    stateToInvalidTernary,
+    stateToInvalid,
+    sizeMapping,
+    convertStyleProps,
+    removeDuplicateKeys,
+    removeRedundantAriaLabel,
+    unsupportedProps,
+    moveTextAreaImport,
+  ]
+
+  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/text-area/transforms/auditSpreadProps.test.ts

@@ -0,0 +1,139 @@
+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 TextArea with single spread prop", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <TextArea {...props} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+    })
+
+    it("should add comment to TextArea with multiple spread props", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const baseProps = { onChange: handleChange }
+  const styleProps = { className: "textarea" }
+  return <TextArea {...baseProps} {...styleProps} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...baseProps}")
+      expect(result).toContain("{...styleProps}")
+    })
+
+    it("should handle multiple TextArea components with spread props", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props1 = { onChange: handleChange1 }
+  const props2 = { onChange: handleChange2 }
+  return (
+    <div>
+      <TextArea {...props1} label="Notes" />
+      <TextArea {...props2} label="Comments" />
+    </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 TextArea without spread props", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <TextArea onChange={handleChange} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should not transform if TextArea is not imported from @planningcenter/tapestry-react", () => {
+      const input = `
+import { TextArea } from "other-library"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <TextArea {...props} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should handle TextArea with alias import", () => {
+      const input = `
+import { TextArea as MyTextArea } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <MyTextArea {...props} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+    })
+
+    it("should return null when no TextArea 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)
+    })
+  })
+})

package/src/components/text-area/transforms/auditSpreadProps.ts

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

package/src/components/text-area/transforms/convertStyleProps.test.ts

@@ -0,0 +1,158 @@
+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 { TextArea } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <TextArea visible={false} label="Hidden TextArea" />
+        }
+      `
+
+      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 { TextArea } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <TextArea visible={true} label="Visible TextArea" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toContain("visible={true}")
+      expect(result).not.toContain("style={{")
+      expect(result).toContain('<TextArea label="Visible TextArea" />')
+    })
+
+    it("should handle visible expressions", () => {
+      const source = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          const isVisible = true
+          return <TextArea visible={isVisible} label="Variable TextArea" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("visible: isVisible")
+      expect(result).toContain("style={{")
+    })
+  })
+
+  describe("style prop removal", () => {
+    it("should remove alignItems prop", () => {
+      const source = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <TextArea alignItems="center" label="Test" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toContain("alignItems=")
+    })
+
+    it("should remove marginTop prop", () => {
+      const source = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <TextArea marginTop={16} label="Test" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toContain("marginTop=")
+    })
+
+    it("should remove multiple style props", () => {
+      const source = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <TextArea 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 { TextArea } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <TextArea
+              visible={false}
+              alignItems="center"
+              marginTop={16}
+              label="Combined TextArea"
+            />
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain('display: "none"')
+      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 { TextArea } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <TextArea visible={false} label="Test" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain(
+        'import { TextArea } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+})

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