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

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

@@ -0,0 +1,204 @@
+import { JSXElement, Transform } from "jscodeshift"
+
+import { addAttribute } from "../../shared/actions/addAttribute"
+import { addComment } from "../../shared/actions/addComment"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { orConditions } from "../../shared/conditions/orConditions"
+import { extractTextContent } from "../../shared/helpers/childrenToLabelHelpers"
+import { getImportName } from "../../shared/transformFactories/helpers/manageImports"
+
+const transform: Transform = (fileInfo, api) => {
+  const j = api.jscodeshift
+  const source = j(fileInfo.source)
+
+  const inputLocalName = getImportName(
+    "Input",
+    "@planningcenter/tapestry-react",
+    {
+      j,
+      source,
+    }
+  )
+  if (!inputLocalName) return null
+
+  const boxLocalName = getImportName("Box", "@planningcenter/tapestry-react", {
+    j,
+    source,
+  })
+  const stackViewLocalName = getImportName(
+    "StackView",
+    "@planningcenter/tapestry-react",
+    {
+      j,
+      source,
+    }
+  )
+
+  if (!boxLocalName && !stackViewLocalName) return null
+
+  let hasChanges = false
+
+  source.find(j.JSXElement).forEach((path) => {
+    const parentEl = path.value
+    const openingElement = parentEl.openingElement
+
+    if (openingElement.name.type !== "JSXIdentifier") return
+    const parentName = openingElement.name.name
+    const isBox = boxLocalName && parentName === boxLocalName
+    const isStackView = stackViewLocalName && parentName === stackViewLocalName
+    if (!isBox && !isStackView) return
+
+    if (isStackView) {
+      const axisAttr = getAttribute({ element: parentEl, name: "axis" })
+      if (axisAttr) {
+        const axisValue = axisAttr.value
+        if (
+          axisValue &&
+          ((axisValue.type === "StringLiteral" &&
+            axisValue.value === "horizontal") ||
+            (axisValue.type === "JSXExpressionContainer" &&
+              axisValue.expression.type === "StringLiteral" &&
+              axisValue.expression.value === "horizontal"))
+        ) {
+          return
+        }
+      }
+    }
+
+    const children = parentEl.children || []
+    let i = 0
+
+    while (i < children.length) {
+      const child = children[i]
+
+      if (child.type !== "JSXElement") {
+        i++
+        continue
+      }
+
+      const childOpening = child.openingElement
+      const childName = childOpening.name
+
+      if (childName.type !== "JSXMemberExpression") {
+        i++
+        continue
+      }
+      const objectPart = childName.object
+      if (
+        objectPart.type !== "JSXIdentifier" ||
+        objectPart.name !== inputLocalName
+      ) {
+        i++
+        continue
+      }
+      if (childName.property.name !== "InputLabel") {
+        i++
+        continue
+      }
+
+      // Find the next JSXElement sibling (skip JSXText whitespace nodes)
+      let nextIdx = i + 1
+      while (
+        nextIdx < children.length &&
+        children[nextIdx].type === "JSXText"
+      ) {
+        nextIdx++
+      }
+
+      if (
+        nextIdx >= children.length ||
+        children[nextIdx].type !== "JSXElement"
+      ) {
+        i++
+        continue
+      }
+
+      const inputEl = children[nextIdx] as JSXElement
+      const inputOpening = inputEl.openingElement
+
+      if (
+        inputOpening.name.type !== "JSXIdentifier" ||
+        inputOpening.name.name !== inputLocalName
+      ) {
+        i++
+        continue
+      }
+
+      // Skip inputs with renderLeft/renderRight — they are not transformable
+      const hasRenderSide = orConditions(
+        hasAttribute("renderLeft"),
+        hasAttribute("renderRight")
+      )
+      if (hasRenderSide(inputEl)) {
+        i++
+        continue
+      }
+
+      const { isSimpleText, textContent } = extractTextContent(
+        child.children || []
+      )
+
+      // Collect non-controls attrs from InputLabel to warn about
+      const inputLabelAttrs = childOpening.attributes || []
+      const removedProps: string[] = []
+      for (const attr of inputLabelAttrs) {
+        if (
+          attr.type === "JSXAttribute" &&
+          attr.name.type === "JSXIdentifier" &&
+          attr.name.name !== "controls"
+        ) {
+          removedProps.push(attr.name.name)
+        }
+      }
+
+      children.splice(i, nextIdx - i)
+
+      hasChanges = true
+
+      if (!isSimpleText) {
+        addComment({
+          element: inputEl,
+          j,
+          scope: "mergeInputLabel",
+          source,
+          text: "InputLabel children are complex and cannot be auto-converted to a label prop. Please migrate manually.",
+        })
+      } else {
+        const existingLabel = getAttribute({ element: inputEl, name: "label" })
+        if (existingLabel) {
+          addComment({
+            element: inputEl,
+            j,
+            scope: "mergeInputLabel",
+            source,
+            text: `Input already has a label prop. The InputLabel had text: "${textContent}". Please review manually.`,
+          })
+        } else {
+          addAttribute({
+            element: inputEl,
+            j,
+            name: "label",
+            value: textContent,
+          })
+        }
+      }
+
+      if (removedProps.length > 0) {
+        addComment({
+          element: inputEl,
+          j,
+          scope: "mergeInputLabel",
+          source,
+          text: `The following props from Input.InputLabel were removed: ${removedProps.join(", ")}. Please review manually.`,
+        })
+      }
+
+      i++
+    }
+  })
+
+  return hasChanges ? source.toSource() : null
+}
+
+export default transform

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

@@ -0,0 +1,166 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./moveInputImport"
+
+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("moveInputImport transform", () => {
+  describe("import migration", () => {
+    it("should change import from tapestry-react to tapestry", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Input } from "@planningcenter/tapestry"'
+      )
+      expect(result).not.toContain("@planningcenter/tapestry-react")
+    })
+
+    it("should only move Input, leaving other imports in place", () => {
+      const input = `
+import { Button, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>Click</Button>
+      <Input label="Name" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { Input } from "@planningcenter/tapestry"'
+      )
+    })
+
+    it("should handle Input as sole import in declaration", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>Click</Button>
+      <Input label="Name" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { Input } 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 { Input } from "@planningcenter/tapestry"
+
+function Test() {
+  return <Input label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Input } 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 { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Input
+      label="Name"
+      placeholder="Enter name"
+      disabled
+      onChange={() => {}}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Input } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('label="Name"')
+      expect(result).toContain('placeholder="Enter name"')
+      expect(result).toContain("disabled")
+      expect(result).toContain("onChange={() => {}}")
+    })
+
+    it("should handle alias import", () => {
+      const input = `
+import { Input as TapestryInput } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TapestryInput label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("@planningcenter/tapestry")
+      expect(result).not.toContain("@planningcenter/tapestry-react")
+    })
+  })
+})

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

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

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

@@ -0,0 +1,92 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./numberFieldAddTypeNumber"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("numberFieldAddTypeNumber transform", () => {
+  it("adds type='number' to NumberField", () => {
+    const input = `
+import { NumberField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <NumberField label="Amount" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).toContain('type="number"')
+  })
+
+  it("preserves other props when adding type", () => {
+    const input = `
+import { NumberField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <NumberField label="Amount" value={42} onChange={handleChange} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('type="number"')
+    expect(result).toContain('label="Amount"')
+    expect(result).toContain("value={42}")
+    expect(result).toContain("onChange={handleChange}")
+  })
+
+  it("does not add type if already present", () => {
+    const input = `
+import { NumberField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <NumberField label="Amount" type="number" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBeNull()
+  })
+
+  it("returns null when not imported from @planningcenter/tapestry-react", () => {
+    const input = `
+import { NumberField } from "other-library"
+
+function Test() {
+  return <NumberField label="Amount" />
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBeNull()
+  })
+
+  it("handles multiple NumberField elements", () => {
+    const input = `
+import { NumberField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <NumberField label="Qty" />
+      <NumberField label="Price" />
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    const matches = result!.match(/type="number"/g)
+    expect(matches).toHaveLength(2)
+  })
+})

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

@@ -0,0 +1,14 @@
+import { addAttribute } from "../../shared/actions/addAttribute"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+export default attributeTransformFactory({
+  targetComponent: "NumberField",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    if (getAttribute({ element, name: "type" })) return false
+
+    addAttribute({ element, j, name: "type", value: "number" })
+    return true
+  },
+})

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

@@ -0,0 +1,126 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./numberFieldRenameToInput"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("numberFieldRenameToInput transform", () => {
+  it("renames NumberField to Input", () => {
+    const input = `
+import { NumberField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <NumberField label="Amount" type="number" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).toContain("<Input")
+    expect(result).not.toContain("NumberField")
+  })
+
+  it("updates import from tapestry-react to tapestry", () => {
+    const input = `
+import { NumberField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <NumberField label="Amount" type="number" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('@planningcenter/tapestry"')
+    expect(result).not.toContain("@planningcenter/tapestry-react")
+  })
+
+  it("returns null when not imported from @planningcenter/tapestry-react", () => {
+    const input = `
+import { NumberField } from "other-library"
+
+function Test() {
+  return <NumberField label="Amount" />
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBeNull()
+  })
+
+  it("handles multiple NumberField elements", () => {
+    const input = `
+import { NumberField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <NumberField label="Qty" type="number" />
+      <NumberField label="Price" type="number" />
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).not.toContain("NumberField")
+    const inputMatches = result!.match(/<Input/g)
+    expect(inputMatches).toHaveLength(2)
+  })
+
+  it("does not create duplicate Input identifier when file already imports Input from tapestry-react", () => {
+    const input = `
+import { Input, NumberField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Input label="Name" />
+      <NumberField label="Amount" type="number" />
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).not.toContain("NumberField")
+    // Should not produce two separate Input declarations (would cause parse error)
+    const importDeclarationMatches = result!.match(/import.*Input/g)
+    expect(importDeclarationMatches).toHaveLength(1)
+  })
+
+  it("merges Input import when file already imports Input from tapestry", () => {
+    const input = `
+import { Input } from "@planningcenter/tapestry"
+import { NumberField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Input label="Name" />
+      <NumberField label="Amount" type="number" />
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).not.toContain("NumberField")
+    // Should not produce two separate Input imports
+    const importMatches = result!.match(
+      /import.*Input.*from.*@planningcenter\/tapestry/g
+    )
+    expect(importMatches).toHaveLength(1)
+  })
+})

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

@@ -0,0 +1,9 @@
+import { componentTransformFactory } from "../../shared/transformFactories/componentTransformFactory"
+
+export default componentTransformFactory({
+  condition: () => true,
+  fromComponent: "NumberField",
+  fromPackage: "@planningcenter/tapestry-react",
+  toComponent: "Input",
+  toPackage: "@planningcenter/tapestry",
+})