@planningcenter/tapestry-migration-cli 2.2.1-qa-362.0 → 2.3.0-rc.2

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

@@ -0,0 +1,392 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./tooltipToWrapper"
+
+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("tooltipToWrapper transform", () => {
+  describe("basic transformations", () => {
+    it("should wrap Button with tooltip string in Tooltip component", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button tooltip={{ title: "Save this item" }}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button, Tooltip } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('<Tooltip {...{ title: "Save this item" }}>')
+      expect(result).toContain("<Button>Save</Button>")
+      expect(result).toContain("</Tooltip>")
+      expect(result).not.toContain("tooltip=")
+    })
+
+    it("should handle tooltip with JSX expression containing string literal", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button tooltip={{ title: "Save this item" }}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('<Tooltip {...{ title: "Save this item" }}>')
+      expect(result).toContain("<Button>Save</Button>")
+      expect(result).not.toContain("tooltip=")
+    })
+
+    it("should handle tooltip with object expression as spread", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button tooltip={{text: "Save", placement: "top"}}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        '<Tooltip {...{text: "Save", placement: "top"}}>'
+      )
+      expect(result).toContain("<Button>Save</Button>")
+      expect(result).not.toContain("tooltip=")
+    })
+
+    it("should preserve other Button attributes", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button tooltip={{title: "Help"}} variant="primary" onClick={handler} disabled>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('<Tooltip {...{title: "Help"}}>')
+      expect(result).toContain(
+        '<Button variant="primary" onClick={handler} disabled>Save</Button>'
+      )
+      expect(result).not.toContain("tooltip=")
+    })
+
+    it("should handle self-closing Button with tooltip", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button tooltip={{title: "Icon button"}} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('<Tooltip {...{title: "Icon button"}}>')
+      expect(result).toContain("<Button />")
+      expect(result).toContain("</Tooltip>")
+      expect(result).not.toContain("tooltip=")
+    })
+  })
+
+  describe("import management", () => {
+    it("should add Tooltip to existing tapestry-react import", () => {
+      const input = `
+import { Button, Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button tooltip={{title: "Save"}}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button, Link, Tooltip } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('<Tooltip {...{title: "Save"}}>')
+    })
+
+    it("should not add duplicate Tooltip import", () => {
+      const input = `
+import { Button, Tooltip } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button tooltip={{title: "Save"}}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      // Should not have duplicate Tooltip imports
+      const tooltipImports = (result?.match(/import.*Tooltip.*from/g) || [])
+        .length
+      expect(tooltipImports).toBe(1)
+      expect(result).toContain(
+        'import { Button, Tooltip } from "@planningcenter/tapestry-react"'
+      )
+    })
+
+    it("should create new tapestry-react import when none exists", () => {
+      const input = `
+import React from "react"
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button tooltip={{title: "Save"}}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button, Tooltip } from "@planningcenter/tapestry-react"'
+      )
+    })
+
+    it("should handle empty imports scenario", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <Button tooltip={{title: "Save"}}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button, Tooltip } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+
+  describe("multiple elements", () => {
+    it("should handle multiple Buttons with tooltips", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Button tooltip={{title: "Save the document"}}>Save</Button>
+      <Button tooltip={{title: "Cancel operation"}}>Cancel</Button>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button, Tooltip } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('<Tooltip {...{title: "Save the document"}}>')
+      expect(result).toContain('<Tooltip {...{title: "Cancel operation"}}>')
+      expect(result).not.toContain("tooltip=")
+    })
+
+    it("should only transform Buttons with tooltip attribute", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Button tooltip={{title: "Has tooltip"}}>With Tooltip</Button>
+      <Button>Without Tooltip</Button>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('<Tooltip {...{title: "Has tooltip"}}>')
+      expect(result).toContain("<Button>With Tooltip</Button>")
+      expect(result).toContain("<Button>Without Tooltip</Button>")
+      // Only one Tooltip wrapper should be created
+      const tooltipCount = (result?.match(/<Tooltip/g) || []).length
+      expect(tooltipCount).toBe(1)
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should return null when Button is not imported from tapestry-react", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+import { Button } from "other-library"
+
+export default function Test() {
+  return <Button tooltip={{title: "Save"}}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when no Button is imported", () => {
+      const input = `
+import React from "react"
+
+export default function Test() {
+  return <div>No buttons here</div>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when no tooltips are present", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button variant="primary">Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should handle aliased Button import", () => {
+      const input = `
+import { Button as TapestryButton } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <TapestryButton tooltip={{title: "Save item"}}>Save</TapestryButton>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button as TapestryButton, Tooltip } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('<Tooltip {...{title: "Save item"}}>')
+      expect(result).toContain("<TapestryButton>Save</TapestryButton>")
+      expect(result).not.toContain("tooltip=")
+    })
+
+    it("should handle complex JSX expressions", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test({ items }) {
+  return (
+    <div>
+      {items.map(item => (
+        <Button key={item.id} tooltip={\`Save \${item.name}\`} onClick={() => save(item)}>
+          {item.name}
+        </Button>
+      ))}
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        "<Tooltip key={item.id} {...`Save ${item.name}`}>"
+      )
+      expect(result).toContain("<Button onClick={() => save(item)}>")
+      expect(result).not.toContain("tooltip=")
+    })
+
+    it("should handle empty tooltip attribute", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button tooltip>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Tooltip>")
+      expect(result).toContain("<Button>Save</Button>")
+      expect(result).toContain("</Tooltip>")
+      expect(result).not.toContain("tooltip")
+    })
+  })
+
+  describe("complex scenarios", () => {
+    it("should handle nested JSX and mixed components", () => {
+      const input = `
+import React from "react"
+import { Button, Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <form>
+      <div className="actions">
+        <Button tooltip={{title: "Submit the form"}} type="submit" variant="primary">
+          Submit
+        </Button>
+        <Link href="/cancel">Cancel</Link>
+        <Button tooltip={{text: "Reset form", placement: "bottom"}} type="reset">
+          Reset
+        </Button>
+      </div>
+    </form>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button, Link, Tooltip } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('<Tooltip {...{title: "Submit the form"}}>')
+      expect(result).toContain('type="submit" variant="primary"')
+      expect(result).toContain("Submit")
+      expect(result).toContain(
+        '<Tooltip {...{text: "Reset form", placement: "bottom"}}>'
+      )
+      expect(result).toContain('type="reset"')
+      expect(result).toContain("Reset")
+      expect(result).toContain('<Link href="/cancel">Cancel</Link>')
+      expect(result).not.toContain("tooltip=")
+    })
+  })
+
+  it("converts tooltip with string literal to title prop", () => {
+    const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button tooltip="Click me">Click</Button>
+}
+    `.trim()
+
+    const result = applyTransform(input)!
+
+    expect(result.replace(/(\s*)?\n(\s*)?/gm, " ")).toContain(
+      '<Tooltip {...{ title: "Click me" }}>'
+    )
+    expect(result).toContain("<Button>Click</Button>")
+    expect(result).not.toContain("tooltip=")
+  })
+})

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

@@ -0,0 +1,35 @@
+import { createWrapper } from "../../shared/actions/createWrapper"
+import { getAttributeValueAsProps } from "../../shared/actions/getAttributeValueAsProps"
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform = attributeTransformFactory({
+  condition: hasAttribute("tooltip"),
+  targetComponent: "Button",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const wrapperProps = getAttributeValueAsProps({
+      element,
+      j,
+      name: "tooltip",
+      stringValueKey: "title",
+    })
+
+    removeAttribute("tooltip", { element, j, source })
+
+    createWrapper({
+      conflictAlias: "TRTooltip",
+      element,
+      j,
+      source,
+      wrapperName: "Tooltip",
+      wrapperPackage: "@planningcenter/tapestry-react",
+      wrapperProps,
+    })
+
+    return true
+  },
+})
+
+export default transform

package/src/components/shared/actions/convertAttributeFromObjectToJSXElement.test.ts

@@ -0,0 +1,139 @@
+import jscodeshift, {
+  JSXAttribute,
+  JSXElement,
+  JSXExpressionContainer,
+  JSXIdentifier,
+} from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import { convertAttributeFromObjectToJSXElement } from "./convertAttributeFromObjectToJSXElement"
+
+const j = jscodeshift.withParser("tsx")
+
+function createSource(code: string) {
+  return j(code)
+}
+
+function createElementFromCode(code: string): JSXElement {
+  const source = createSource(`<div>${code}</div>`)
+  return source.find(j.JSXElement).at(0).get().value.children?.[0] as JSXElement
+}
+
+describe("convertAttributeFromObjectToJSXElement", () => {
+  it("should convert object attribute to JSX element", () => {
+    const element = createElementFromCode(
+      '<Button iconLeft={{ name: "star", size: 16 }} />'
+    )
+
+    const result = convertAttributeFromObjectToJSXElement({
+      attributeName: "iconLeft",
+      element,
+      elementName: "Icon",
+      j,
+    })
+
+    expect(result).not.toBeNull()
+    expect(result?.type).toBe("JSXElement")
+    expect((result?.openingElement.name as JSXIdentifier).name).toBe("Icon")
+    expect(result?.openingElement.selfClosing).toBe(true)
+    expect(result?.openingElement.attributes).toHaveLength(1)
+    expect(result?.openingElement.attributes?.[0].type).toBe(
+      "JSXSpreadAttribute"
+    )
+
+    // Check that the attribute still exists but now has JSX element value
+    const iconLeftAttr = element.openingElement.attributes?.find(
+      (attr) => attr.type === "JSXAttribute" && attr.name?.name === "iconLeft"
+    ) as JSXAttribute
+    expect(iconLeftAttr).toBeDefined()
+    expect(iconLeftAttr?.value?.type).toBe("JSXExpressionContainer")
+    expect(
+      (iconLeftAttr?.value as JSXExpressionContainer)?.expression?.type
+    ).toBe("JSXElement")
+  })
+
+  it("should handle expression container attributes", () => {
+    const element = createElementFromCode("<Button iconLeft={iconProps} />")
+
+    const result = convertAttributeFromObjectToJSXElement({
+      attributeName: "iconLeft",
+      element,
+      elementName: "Icon",
+      j,
+    })
+
+    expect(result).not.toBeNull()
+    expect(result?.openingElement.attributes).toHaveLength(1)
+    expect(result?.openingElement.attributes?.[0].type).toBe(
+      "JSXSpreadAttribute"
+    )
+
+    // Check that the attribute still exists but now has JSX element value
+    const iconLeftAttr = element.openingElement.attributes?.find(
+      (attr) => attr.type === "JSXAttribute" && attr.name?.name === "iconLeft"
+    ) as JSXAttribute
+    expect(iconLeftAttr).toBeDefined()
+    expect(iconLeftAttr?.value?.type).toBe("JSXExpressionContainer")
+    expect(
+      (iconLeftAttr?.value as JSXExpressionContainer)?.expression?.type
+    ).toBe("JSXElement")
+  })
+
+  it("should return null for empty expression container", () => {
+    const element = createElementFromCode("<Button iconLeft={{}} />")
+
+    const result = convertAttributeFromObjectToJSXElement({
+      attributeName: "iconLeft",
+      element,
+      elementName: "Icon",
+      j,
+    })
+
+    // Should return null since empty object has no props to spread
+    expect(result).toBeNull()
+
+    // Check that the attribute was not modified since no conversion occurred
+    const iconLeftAttr = element.openingElement.attributes?.find(
+      (attr) => attr.type === "JSXAttribute" && attr.name?.name === "iconLeft"
+    ) as JSXAttribute
+    expect(iconLeftAttr).toBeDefined()
+    expect(iconLeftAttr?.value?.type).toBe("JSXExpressionContainer")
+    expect(
+      (iconLeftAttr?.value as JSXExpressionContainer)?.expression?.type
+    ).toBe("ObjectExpression")
+  })
+
+  it("should return null for missing attribute", () => {
+    const element = createElementFromCode("<Button>Save</Button>")
+
+    const result = convertAttributeFromObjectToJSXElement({
+      attributeName: "iconLeft",
+      element,
+      elementName: "Icon",
+      j,
+    })
+
+    expect(result).toBeNull()
+  })
+
+  it("should return null for attribute with no value", () => {
+    const element = j.jsxElement(
+      j.jsxOpeningElement(
+        j.jsxIdentifier("Button"),
+        [j.jsxAttribute(j.jsxIdentifier("iconLeft"), null)],
+        false
+      ),
+      j.jsxClosingElement(j.jsxIdentifier("Button")),
+      [j.jsxText("Save")]
+    )
+
+    const result = convertAttributeFromObjectToJSXElement({
+      attributeName: "iconLeft",
+      element,
+      elementName: "Icon",
+      j,
+    })
+
+    expect(result).toBeNull()
+  })
+})

package/src/components/shared/actions/convertAttributeFromObjectToJSXElement.ts

@@ -0,0 +1,81 @@
+import {
+  JSCodeshift,
+  JSXAttribute,
+  JSXElement,
+  JSXSpreadAttribute,
+} from "jscodeshift"
+
+import { getAttribute } from "./getAttribute"
+
+export function convertAttributeFromObjectToJSXElement({
+  attributeName,
+  element,
+  elementName,
+  j,
+  stringValueKey,
+}: {
+  attributeName: string
+  element: JSXElement
+  elementName: string
+  j: JSCodeshift
+  stringValueKey?: string
+}): JSXElement | null {
+  const attribute = getAttribute({ element, name: attributeName })
+  if (!attribute || !attribute.value) return null
+
+  const elementProps = buildProps({ attribute, j, stringValueKey })
+  if (!elementProps) return null
+
+  const newElement = j.jsxElement(
+    j.jsxOpeningElement(j.jsxIdentifier(elementName), elementProps, true),
+    null,
+    []
+  )
+
+  attribute.value = j.jsxExpressionContainer(newElement)
+
+  return newElement
+}
+
+function buildProps({
+  attribute,
+  j,
+  stringValueKey,
+}: {
+  attribute: JSXAttribute
+  j: JSCodeshift
+  stringValueKey?: string
+}): JSXSpreadAttribute[] | null {
+  if (!attribute.value) return null
+  if (attribute.value.type == "StringLiteral")
+    return stringToProps({ attribute, j, stringValueKey })
+  if (attribute.value.type !== "JSXExpressionContainer") return null
+  if (attribute.value.expression.type === "JSXEmptyExpression") return null
+  if (
+    attribute.value.expression.type === "ObjectExpression" &&
+    attribute.value.expression.properties.length === 0
+  )
+    return null
+  return [j.jsxSpreadAttribute(attribute.value.expression)]
+}
+
+function stringToProps({
+  attribute,
+  j,
+  stringValueKey,
+}: {
+  attribute: JSXAttribute
+  j: JSCodeshift
+  stringValueKey?: string
+}): JSXSpreadAttribute[] | null {
+  if (!attribute.value) return null
+  if (stringValueKey === undefined) return null
+
+  return [
+    j.jsxSpreadAttribute(
+      j.objectExpression([
+        j.objectProperty(j.identifier(stringValueKey), attribute.value),
+      ])
+    ),
+  ]
+}