@planningcenter/tapestry-migration-cli 2.3.0-rc.6 → 2.3.0-rc.8

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

@@ -0,0 +1,363 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./childrenToLabel"
+
+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("childrenToLabel transform", () => {
+  describe("simple text conversion", () => {
+    it("should convert simple text children to label prop", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Button label="Save" />')
+      expect(result).not.toContain("Save</Button>")
+    })
+
+    it("should handle text with whitespace", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button>  Save Changes  </Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Button label="Save Changes" />')
+    })
+
+    it("should convert string literal expressions", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button>{"Delete"}</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Button label="Delete" />')
+    })
+
+    it("should convert simple template literals without expressions", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button>{\`Submit Form\`}</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Button label="Submit Form" />')
+    })
+
+    it("should combine multiple text nodes", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button>Save{""}{"File"}</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Button label="SaveFile" />')
+    })
+  })
+
+  describe("complex children scenarios", () => {
+    it("should add comment for complex JSX children", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>
+        <Icon name="save" />
+        Save
+      </Button>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        "{/* TODO: tapestry-migration (children): complex children cannot be converted to label prop"
+      )
+      expect(result).toContain(
+        "take time to find the right text for the button"
+      )
+      expect(result).toContain(
+        "prefix and suffix to correctly display those icons"
+      )
+      expect(result).toContain('<Icon name="save" />')
+      expect(result).toContain("Save")
+      expect(result).toContain("</Button>")
+    })
+
+    it("should add comment for expression children", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>{isLoading ? "Loading..." : "Submit"}</Button>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        "{/* TODO: tapestry-migration (children): complex children cannot be converted to label prop"
+      )
+      expect(result).toContain('{isLoading ? "Loading..." : "Submit"}')
+    })
+
+    it("should add comment for template literals with expressions", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>{\`Save \${count} items\`}</Button>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        "{/* TODO: tapestry-migration (children): complex children cannot be converted to label prop"
+      )
+      expect(result).toContain("{`Save ${count} items`}")
+    })
+  })
+
+  describe("existing label prop scenarios", () => {
+    it("should add comment when Button has both label and children", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button label="Existing Label">
+        Child Content
+      </Button>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        "{/* TODO: tapestry-migration (label): Button has both label prop and children"
+      )
+      expect(result).toContain(
+        "take time to find the right text for the button"
+      )
+      expect(result).toContain('label="Existing Label"')
+      expect(result).toContain("Child Content")
+    })
+
+    it("should handle Button with label and simple text children", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button label="Save">Click Me</Button>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        "{/* TODO: tapestry-migration (label): Button has both label prop and children"
+      )
+      expect(result).toContain('label="Save"')
+      expect(result).toContain("Click Me")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should skip Buttons with no children", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button onClick={handleClick} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null) // No changes
+    })
+
+    it("should skip Buttons with only whitespace children", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button>   </Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null) // No changes since whitespace is trimmed to empty
+    })
+
+    it("should handle mixed whitespace and text", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button>  Submit  Form  </Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Button label="Submit  Form" />')
+    })
+
+    it("should not transform Button from other packages", () => {
+      const input = `
+import { Button } from "@other/package"
+import { Button as TapestryButton } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>Should not change</Button>
+      <TapestryButton>Should change</TapestryButton>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<Button>Should not change</Button>")
+      expect(result).toContain('<TapestryButton label="Should change" />')
+    })
+
+    it("should handle aliased imports", () => {
+      const input = `
+import { Button as TapestryButton } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TapestryButton>Save</TapestryButton>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<TapestryButton label="Save" />')
+    })
+
+    it("should return null for files without tapestry-react Button", () => {
+      const input = `
+import { Button } from "react-bootstrap"
+
+function Test() {
+  return <Button>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+  })
+
+  describe("multiple buttons", () => {
+    it("should handle multiple buttons with different scenarios", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>Simple Text</Button>
+      <Button label="existing">Has Label</Button>
+      <Button>
+        <Icon name="save" />
+        Complex
+      </Button>
+      <Button>{"String Expression"}</Button>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      // Simple text should be converted
+      expect(result).toContain('<Button label="Simple Text" />')
+
+      // Existing label should get comment
+      expect(result).toContain(
+        "{/* TODO: tapestry-migration (label): Button has both label prop and children"
+      )
+      expect(result).toContain('label="existing"')
+
+      // Complex JSX should get comment
+      expect(result).toContain(
+        "{/* TODO: tapestry-migration (children): complex children cannot be converted to label prop"
+      )
+      expect(result).toContain('<Icon name="save" />')
+
+      // String expression should be converted
+      expect(result).toContain('<Button label="String Expression" />')
+    })
+  })
+
+  describe("comment formatting", () => {
+    it("should properly format JSX comments in JSX context", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>
+        <span>Complex</span>
+      </Button>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      // Should have proper JSX comment syntax
+      expect(result).toMatch(/\{\s*\/\*\s*TODO: tapestry-migration/)
+      expect(result).toMatch(/\*\/\s*\}/)
+      expect(result).toContain(
+        "take time to find the right text for the button"
+      )
+    })
+  })
+})

package/src/components/button/transforms/childrenToLabel.ts

@@ -0,0 +1,84 @@
+import { JSXElement } from "jscodeshift"
+
+import { addAttribute } from "../../shared/actions/addAttribute"
+import { addComment } from "../../shared/actions/addComment"
+import { removeChildren } from "../../shared/actions/removeChildren"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { hasChildren } from "../../shared/conditions/hasChildren"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+function extractTextContent(children: NonNullable<JSXElement["children"]>): {
+  isSimpleText: boolean
+  textContent: string
+} {
+  let textContent = ""
+
+  for (const child of children) {
+    if (child.type === "JSXText") {
+      const text = child.value.trim()
+      if (text) textContent += text
+    } else if (
+      child.type === "JSXExpressionContainer" &&
+      child.expression.type === "StringLiteral"
+    ) {
+      textContent += child.expression.value
+    } else if (
+      child.type === "JSXExpressionContainer" &&
+      child.expression.type === "TemplateLiteral" &&
+      child.expression.expressions.length === 0
+    ) {
+      // Simple template literal with no expressions like `hello`
+      textContent += child.expression.quasis[0].value.raw
+    } else {
+      // Complex content (JSX elements, expressions, etc.)
+      return { isSimpleText: false, textContent: "" }
+    }
+  }
+
+  return { isSimpleText: true, textContent }
+}
+
+function buildComment(message: string): string {
+  return `${message} - take time to find the right text for the button. If icons are used in the Button, you can use prefix and suffix to correctly display those icons.`
+}
+
+const transform = attributeTransformFactory({
+  condition: hasChildren,
+  targetComponent: "Button",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    if (hasAttribute("label")(element)) {
+      addComment({
+        element,
+        j,
+        scope: "label",
+        source,
+        text: buildComment("Button has both label prop and children"),
+      })
+      return true
+    }
+
+    const { isSimpleText, textContent } = extractTextContent(element.children!)
+
+    if (isSimpleText && textContent) {
+      addAttribute({ element, j, name: "label", value: textContent })
+      removeChildren(element)
+      return true
+    } else if (!isSimpleText) {
+      addComment({
+        element,
+        j,
+        scope: "children",
+        source,
+        text: buildComment(
+          "complex children cannot be converted to label prop"
+        ),
+      })
+      return true
+    }
+
+    return false
+  },
+})
+
+export default transform

package/src/components/button/transforms/commentOnVisualKindDifference.ts

@@ -0,0 +1,24 @@
+import { addComment } from "../../shared/actions/addComment"
+import { hasAttributeValue } from "../../shared/conditions/hasAttributeValue"
+import { orConditions } from "../../shared/conditions/orConditions"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+export default attributeTransformFactory({
+  condition: orConditions(
+    hasAttributeValue("theme", "info"),
+    hasAttributeValue("theme", "success")
+  ),
+  targetComponent: "Button",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    addComment({
+      element,
+      j,
+      scope: "theme",
+      source,
+      text: "Your button's theme is 'info' or 'success', which both map to the same 'primary' kind. This will create a visual change, but it is the recommended adjustment.",
+    })
+
+    return true
+  },
+})