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

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

@@ -0,0 +1,227 @@
+import { JSXElement, JSXText, Transform } from "jscodeshift"
+
+import { addComment } from "../../shared/actions/addComment"
+import {
+  getImportName,
+  removeImportFromDeclaration,
+} from "../../shared/transformFactories/helpers/manageImports"
+
+const SCOPE = "mergeFieldIntoTextArea"
+
+const transform: Transform = (fileInfo, api) => {
+  const j = api.jscodeshift
+  const source = j(fileInfo.source)
+
+  const fieldLocalName = getImportName(
+    "Field",
+    "@planningcenter/tapestry-react",
+    { j, source }
+  )
+  if (!fieldLocalName) return null
+
+  const textAreaLocalName = getImportName(
+    "TextArea",
+    "@planningcenter/tapestry-react",
+    { j, source }
+  )
+  if (!textAreaLocalName) return null
+
+  let hasChanges = false
+  let anyFieldRemoved = false
+
+  source.find(j.JSXElement).forEach((path) => {
+    const el = path.value
+    const opening = el.openingElement
+
+    if (opening.name.type !== "JSXIdentifier") return
+    if (opening.name.name !== fieldLocalName) return
+
+    const elementChildren = (el.children || []).filter(
+      (child) =>
+        child.type !== "JSXText" || (child as JSXText).value.trim() !== ""
+    )
+
+    const textAreaChildren = elementChildren.filter((child) => {
+      if (child.type !== "JSXElement") return false
+      const childOpening = (child as JSXElement).openingElement
+      return (
+        childOpening.name.type === "JSXIdentifier" &&
+        childOpening.name.name === textAreaLocalName
+      )
+    }) as JSXElement[]
+
+    // Case: exactly 1 child and it is a TextArea — merge props and unwrap
+    if (elementChildren.length === 1 && textAreaChildren.length === 1) {
+      const textAreaEl = textAreaChildren[0]
+      const fieldAttrs = opening.attributes || []
+
+      // Bail out if Field has spread props — we can't know what they contain
+      const hasFieldSpreads = fieldAttrs.some(
+        (attr) => attr.type === "JSXSpreadAttribute"
+      )
+      if (hasFieldSpreads) {
+        addComment({
+          element: textAreaEl,
+          j,
+          scope: SCOPE,
+          source,
+          text: "Field has spread props that cannot be auto-merged into TextArea. Please migrate manually.",
+        })
+        hasChanges = true
+        return
+      }
+
+      for (const attr of fieldAttrs) {
+        if (attr.type !== "JSXAttribute") continue
+        if (attr.name.type !== "JSXIdentifier") continue
+
+        const attrName = attr.name.name
+        const textAreaAttrs = textAreaEl.openingElement.attributes || []
+
+        if (attrName === "label") {
+          const hasLabel = textAreaAttrs.some(
+            (a) =>
+              a.type === "JSXAttribute" &&
+              a.name?.type === "JSXIdentifier" &&
+              a.name.name === "label"
+          )
+          if (hasLabel) {
+            addComment({
+              element: textAreaEl,
+              j,
+              scope: SCOPE,
+              source,
+              text: "Field had label prop but TextArea already has label. Please migrate manually.",
+            })
+          } else {
+            textAreaEl.openingElement.attributes.push(attr)
+          }
+        } else if (attrName === "feedbackText") {
+          const hasDescription = textAreaAttrs.some(
+            (a) =>
+              a.type === "JSXAttribute" &&
+              a.name?.type === "JSXIdentifier" &&
+              a.name.name === "description"
+          )
+          if (hasDescription) {
+            addComment({
+              element: textAreaEl,
+              j,
+              scope: SCOPE,
+              source,
+              text: "Field had feedbackText prop but TextArea already has description. Please migrate manually.",
+            })
+          } else {
+            const newAttr = j.jsxAttribute(
+              j.jsxIdentifier("description"),
+              attr.value
+            )
+            textAreaEl.openingElement.attributes.push(newAttr)
+          }
+        } else if (attrName === "state") {
+          const hasState = textAreaAttrs.some(
+            (a) =>
+              a.type === "JSXAttribute" &&
+              a.name?.type === "JSXIdentifier" &&
+              a.name.name === "state"
+          )
+          if (hasState) {
+            addComment({
+              element: textAreaEl,
+              j,
+              scope: SCOPE,
+              source,
+              text: "Field had state prop but TextArea already has state. Please migrate manually.",
+            })
+          } else {
+            textAreaEl.openingElement.attributes.push(attr)
+          }
+        } else if (attrName === "key") {
+          const hasKey = textAreaAttrs.some(
+            (a) =>
+              a.type === "JSXAttribute" &&
+              a.name?.type === "JSXIdentifier" &&
+              a.name.name === "key"
+          )
+          if (!hasKey) {
+            textAreaEl.openingElement.attributes.push(attr)
+          }
+        } else {
+          // Unsupported prop — add comment to TextArea
+          addComment({
+            element: textAreaEl,
+            j,
+            scope: SCOPE,
+            source,
+            text: `Field prop '${attrName}' is not supported by TextArea. Please migrate manually.`,
+          })
+        }
+      }
+
+      const parent = path.parent?.value
+      if (parent?.children) {
+        const idx = parent.children.indexOf(el)
+        if (idx === -1) return
+        parent.children.splice(idx, 1, ...(el.children || []))
+      } else {
+        // Root JSX (e.g. directly inside return parens) — use path.replace
+        const nonWsChildren = (el.children || []).filter(
+          (child) =>
+            child.type !== "JSXText" || (child as JSXText).value.trim() !== ""
+        )
+        if (nonWsChildren.length === 1) {
+          path.replace(nonWsChildren[0])
+        } else {
+          path.replace(
+            j.jsxFragment(
+              j.jsxOpeningFragment(),
+              j.jsxClosingFragment(),
+              el.children || []
+            )
+          )
+        }
+      }
+      hasChanges = true
+      anyFieldRemoved = true
+      return
+    }
+
+    // Case: more than 1 non-whitespace child — comment each TextArea child, leave Field
+    if (elementChildren.length > 1) {
+      for (const child of textAreaChildren) {
+        addComment({
+          element: child,
+          j,
+          scope: SCOPE,
+          source,
+          text: "Field has multiple children and cannot be auto-merged into TextArea. Please migrate manually.",
+        })
+        hasChanges = true
+      }
+      return
+    }
+
+    // Case: exactly 1 child but not a TextArea — skip without comment
+  })
+
+  // Remove Field from imports only if all Field usages were converted
+  if (anyFieldRemoved) {
+    const stillUsesField =
+      source.find(j.JSXOpeningElement, {
+        name: { name: fieldLocalName },
+      }).length > 0
+
+    if (!stillUsesField) {
+      const fieldImports = source.find(j.ImportDeclaration, {
+        source: { value: "@planningcenter/tapestry-react" },
+      })
+      for (let i = 0; i < fieldImports.length; i++) {
+        removeImportFromDeclaration(fieldImports.at(i), "Field")
+      }
+    }
+  }
+
+  return hasChanges ? source.toSource() : null
+}
+
+export default transform

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

@@ -0,0 +1,168 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./moveTextAreaImport"
+
+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("moveTextAreaImport transform", () => {
+  describe("import migration", () => {
+    it("should change import from tapestry-react to tapestry", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { TextArea } from "@planningcenter/tapestry"'
+      )
+      expect(result).not.toContain("@planningcenter/tapestry-react")
+    })
+
+    it("should only move TextArea, leaving other imports in place", () => {
+      const input = `
+import { Button, TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>Click</Button>
+      <TextArea label="Notes" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { TextArea } from "@planningcenter/tapestry"'
+      )
+    })
+
+    it("should handle TextArea as sole import in declaration", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>Click</Button>
+      <TextArea label="Notes" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { TextArea } from "@planningcenter/tapestry"'
+      )
+    })
+
+    it("should not affect other components", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button>Click me</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle already migrated imports", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry"
+
+function Test() {
+  return <TextArea label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { TextArea } from "@planningcenter/tapestry"'
+      )
+    })
+
+    it("should handle no imports", () => {
+      const input = `
+function Test() {
+  return <div>No imports</div>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should preserve all attributes", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <TextArea
+      label="Notes"
+      placeholder="Enter notes"
+      rows={5}
+      disabled
+      onChange={() => {}}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { TextArea } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('label="Notes"')
+      expect(result).toContain('placeholder="Enter notes"')
+      expect(result).toContain("rows={5}")
+      expect(result).toContain("disabled")
+      expect(result).toContain("onChange={() => {}}")
+    })
+
+    it("should handle alias import", () => {
+      const input = `
+import { TextArea as MyTextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <MyTextArea label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("@planningcenter/tapestry")
+      expect(result).not.toContain("@planningcenter/tapestry-react")
+    })
+  })
+})

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

@@ -0,0 +1,13 @@
+import { Transform } from "jscodeshift"
+
+import { componentTransformFactory } from "../../shared/transformFactories/componentTransformFactory"
+
+const transform: Transform = componentTransformFactory({
+  condition: () => true,
+  fromComponent: "TextArea",
+  fromPackage: "@planningcenter/tapestry-react",
+  toComponent: "TextArea",
+  toPackage: "@planningcenter/tapestry",
+})
+
+export default transform

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

@@ -0,0 +1,129 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./removeDuplicateKeys"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string) {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("removeDuplicateKeys transform", () => {
+  describe("TextArea elements with duplicate attributes", () => {
+    it("should remove duplicate attributes from TextArea elements", () => {
+      const source = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <TextArea label="First" disabled label="Second">Save</TextArea>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="First"')
+      expect(result).not.toContain('label="Second"')
+      expect(result).toContain("disabled")
+    })
+
+    it("should preserve first occurrence of duplicate attributes", () => {
+      const source = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <TextArea onClick={handleFirst} aria-label="First" onClick={handleSecond} aria-label="Second" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain("onClick={handleFirst}")
+      expect(result).not.toContain("onClick={handleSecond}")
+      expect(result).toContain('aria-label="First"')
+      expect(result).not.toContain('aria-label="Second"')
+    })
+  })
+
+  describe("TextArea elements without duplicate attributes", () => {
+    it("should return null when no duplicates exist", () => {
+      const source = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <TextArea label="Name" disabled />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBeNull()
+    })
+
+    it("should return null for TextArea with no attributes", () => {
+      const source = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <TextArea />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("import handling", () => {
+    it("should only process files that import TextArea from tapestry-react", () => {
+      const source = `
+        import { TextArea } from "some-other-library"
+
+        export function TestComponent() {
+          return <TextArea label="First" label="Second" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("mixed elements", () => {
+    it("should only process TextArea elements, not other elements", () => {
+      const source = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <div>
+              <TextArea label="First" label="Second" />
+              <div className="container" className="wrapper">Content</div>
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+
+      // TextArea duplicates should be removed
+      expect(result).toContain('label="First"')
+      expect(result).not.toContain('label="Second"')
+
+      // Other elements should remain unchanged
+      expect(result).toContain('className="container"')
+      expect(result).toContain('className="wrapper"')
+    })
+  })
+})

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

@@ -0,0 +1,8 @@
+import { removeDuplicateKeys } from "../../shared/actions/removeDuplicateKeys"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+export default attributeTransformFactory({
+  targetComponent: "TextArea",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: removeDuplicateKeys,
+})