@planningcenter/tapestry-migration-cli 3.1.0-rc.2 → 3.1.0-rc.20

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",
+})

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

@@ -0,0 +1,206 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./innerRefToRef"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string, verbose = false): string {
+  const fileInfo = { path: "test.tsx", source }
+  const result = transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    { verbose }
+  ) as string | null
+  return result || source
+}
+
+describe("innerRefToRef transform", () => {
+  describe("innerRef to ref conversion", () => {
+    it("should convert innerRef to ref", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const textareaRef = React.useRef()
+  return <TextArea innerRef={textareaRef} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("ref={textareaRef}")
+      expect(result).not.toContain("innerRef=")
+    })
+
+    it("should convert innerRef with expression", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea innerRef={myRef} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("ref={myRef}")
+      expect(result).not.toContain("innerRef=")
+    })
+
+    it("should convert innerRef with callback", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea innerRef={(el) => console.log(el)} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("ref={(el) => console.log(el)}")
+      expect(result).not.toContain("innerRef=")
+    })
+
+    it("should not affect existing ref props", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const textareaRef = React.useRef()
+  return <TextArea ref={textareaRef} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("ref={textareaRef}")
+      expect(result).not.toContain("innerRef=")
+    })
+
+    it("should handle multiple TextAreas", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const ref1 = React.useRef()
+  const ref2 = React.useRef()
+  return (
+    <div>
+      <TextArea innerRef={ref1} label="First" />
+      <TextArea innerRef={ref2} label="Second" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("ref={ref1}")
+      expect(result).toContain("ref={ref2}")
+      expect(result).not.toContain("innerRef=")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect other components", () => {
+      const input = `
+import { Button, TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const buttonRef = React.useRef()
+  const textareaRef = React.useRef()
+  return (
+    <div>
+      <Button innerRef={buttonRef}>Click me</Button>
+      <TextArea innerRef={textareaRef} label="Notes" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<Button innerRef={buttonRef}>Click me</Button>")
+      expect(result).toContain("ref={textareaRef}")
+    })
+
+    it("should handle TextArea without innerRef", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<TextArea label="Notes" />')
+    })
+
+    it("should preserve other props", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const textareaRef = React.useRef()
+  return (
+    <TextArea
+      innerRef={textareaRef}
+      label="Notes"
+      rows={5}
+      disabled
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("ref={textareaRef}")
+      expect(result).toContain('label="Notes"')
+      expect(result).toContain("rows={5}")
+      expect(result).toContain("disabled")
+      expect(result).not.toContain("innerRef=")
+    })
+
+    it("should not transform if not imported from @planningcenter/tapestry-react", () => {
+      const input = `
+import { TextArea } from "other-library"
+
+function Test() {
+  return <TextArea innerRef={myRef} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("innerRef={myRef}")
+    })
+
+    it("should handle alias import", () => {
+      const input = `
+import { TextArea as MyTextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <MyTextArea innerRef={myRef} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("ref={myRef}")
+      expect(result).not.toContain("innerRef=")
+    })
+
+    it("should add CHANGED comment when verbose is enabled", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const textareaRef = React.useRef()
+  return <TextArea innerRef={textareaRef} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input, true)
+      expect(result).toContain("ref={textareaRef}")
+      expect(result).not.toContain("innerRef=")
+      expect(result).toContain(
+        "CHANGED: tapestry-migration (ref): renamed from innerRef"
+      )
+    })
+  })
+})

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

@@ -0,0 +1,14 @@
+import { transformAttributeName } from "../../shared/actions/transformAttributeName"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform = attributeTransformFactory({
+  condition: hasAttribute("innerRef"),
+  targetComponent: "TextArea",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, options }) => {
+    return transformAttributeName("innerRef", "ref", { element, j, options })
+  },
+})
+
+export default transform