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

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

@@ -0,0 +1,377 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./iconToIconButton"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string, options = {}) {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    options
+  ) as string | null
+}
+
+describe("iconToIconButton transform", () => {
+  describe("Button with icon prop", () => {
+    it("should convert Button with icon object to IconButton with Icon element", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <Button icon={{ name: "add", size: 16 }} kind="primary">
+              Add Item
+            </Button>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain(
+        'import { Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { IconButton } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<IconButton")
+      expect(result).toContain("</IconButton>")
+      expect(result).not.toContain("<Button")
+      expect(result).not.toContain("</Button>")
+      expect(result).toContain('icon={<Icon {...{ name: "add", size: 16 }} />}')
+      expect(result).not.toContain('icon={{ name: "add", size: 16 }}')
+      expect(result).toContain('kind="primary"')
+      expect(result).toContain("Add Item")
+    })
+
+    it("should handle self-closing Button with icon", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button icon={{ name: "close" }} aria-label="Close" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain(
+        'import { Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { IconButton } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<IconButton")
+      expect(result).toContain('aria-label="Close" />')
+      expect(result).not.toContain("<Button")
+      expect(result).toContain('icon={<Icon {...{ name: "close" }} />}')
+    })
+
+    it("should handle complex icon objects with multiple properties", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <Button
+              icon={{
+                name: "settings",
+                size: 24,
+                color: "primary",
+                className: "custom-icon"
+              }}
+              disabled
+            >
+              Settings
+            </Button>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("icon={<Icon")
+      expect(result).toContain('name: "settings"')
+      expect(result).toContain("size: 24")
+      expect(result).toContain('color: "primary"')
+      expect(result).toContain('className: "custom-icon"')
+      expect(result).toContain("} />}")
+      expect(result).toContain("<IconButton")
+      expect(result).toContain("disabled")
+      expect(result).toContain("Settings")
+    })
+
+    it("should handle icon with variable expressions", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          const iconProps = { name: "star", size: iconSize }
+          return <Button icon={iconProps}>Favorite</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("icon={<Icon {...iconProps} />}")
+      expect(result).toContain("<IconButton")
+      expect(result).not.toContain("icon={iconProps}")
+    })
+  })
+
+  describe("import management", () => {
+    it("should add Icon to existing tapestry-react import", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button icon={{ name: "add" }}>Add</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain(
+        'import { Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { IconButton } from "@planningcenter/tapestry"'
+      )
+    })
+
+    it("should handle existing Icon import with alias", () => {
+      const source = `
+        import { Button, Icon as TapestryIcon } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button icon={{ name: "add" }}>Add</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain(
+        'import { Icon as TapestryIcon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain('icon={<TapestryIcon {...{ name: "add" }} />}')
+    })
+
+    it("should handle existing IconButton import with alias", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+        import { IconButton } from "some-other-library"
+
+        export function TestComponent() {
+          return <Button icon={{ name: "add" }}>Add</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain(
+        'import { IconButton as TIconButton } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<TIconButton")
+      expect(result).toContain("</TIconButton>")
+    })
+
+    it("should handle multiple existing imports", () => {
+      const source = `
+        import { Button, Icon } from "@planningcenter/tapestry-react"
+        import { IconButton, Tooltip } from "@planningcenter/tapestry"
+
+        export function TestComponent() {
+          return <Button icon={{ name: "info" }}>Info</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain(
+        'import { Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { IconButton, Tooltip } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('icon={<Icon {...{ name: "info" }} />}')
+      expect(result).toContain("<IconButton")
+    })
+  })
+
+  describe("Button without icon prop", () => {
+    it("should return null when no icon prop is present", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button kind="primary">No Icon</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBeNull()
+    })
+
+    it("should not process Button with other props but no icon", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <Button
+              kind="secondary"
+              disabled
+              onClick={handleClick}
+              className="custom-button"
+            >
+              Click Me
+            </Button>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("import source validation", () => {
+    it("should only process Buttons from tapestry-react package", () => {
+      const source = `
+        import { Button } from "some-other-library"
+
+        export function TestComponent() {
+          return <Button icon={{ name: "add" }}>Add</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBeNull()
+    })
+
+    it("should handle aliased Button imports", () => {
+      const source = `
+        import { Button as TapestryButton } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <TapestryButton icon={{ name: "edit" }}>Edit</TapestryButton>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain(
+        'import { Button as TapestryButton, Icon } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain("<IconButton")
+      expect(result).toContain('icon={<Icon {...{ name: "edit" }} />}')
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle empty icon object", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button icon={{}}>Empty Icon</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain("<IconButton")
+      expect(result).toContain("icon={{}}")
+    })
+
+    it("should handle icon with null/undefined expression", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button icon={null}>Null Icon</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain("<IconButton")
+      expect(result).toContain("icon={<Icon {...null} />}")
+    })
+
+    it("should handle multiple Buttons with different icon configurations", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <div>
+              <Button icon={{ name: "add" }}>Add</Button>
+              <Button kind="secondary">No Icon</Button>
+              <Button icon={{ name: "delete", color: "danger" }}>Delete</Button>
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      const iconButtonCount = (result!.match(/<IconButton/g) || []).length
+      expect(iconButtonCount).toBe(2)
+      expect(result).toContain('<Button kind="secondary">No Icon</Button>')
+      expect(result).toContain('icon={<Icon {...{ name: "add" }} />}')
+      expect(result).toContain(
+        'icon={<Icon {...{ name: "delete", color: "danger" }} />}'
+      )
+    })
+
+    it("should preserve all other Button props during transformation", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <Button
+              icon={{ name: "save" }}
+              kind="primary"
+              size="large"
+              disabled={isLoading}
+              onClick={handleSave}
+              className="save-button"
+              data-testid="save-btn"
+              aria-label="Save document"
+              type="submit"
+            >
+              Save Document
+            </Button>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain('kind="primary"')
+      expect(result).toContain('size="large"')
+      expect(result).toContain("disabled={isLoading}")
+      expect(result).toContain("onClick={handleSave}")
+      expect(result).toContain('className="save-button"')
+      expect(result).toContain('data-testid="save-btn"')
+      expect(result).toContain('aria-label="Save document"')
+      expect(result).toContain('type="submit"')
+      expect(result).toContain("Save Document")
+      expect(result).toContain("<IconButton")
+      expect(result).toContain('icon={<Icon {...{ name: "save" }} />}')
+      expect(result).not.toContain("<Button")
+      expect(result).not.toContain("</Button>")
+    })
+  })
+})

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

@@ -0,0 +1,53 @@
+import { JSXIdentifier } from "jscodeshift"
+
+import { convertAttributeFromObjectToJSXElement } from "../../shared/actions/convertAttributeFromObjectToJSXElement"
+import { removeUnusedImport } from "../../shared/actions/removeUnusedImport"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { addImport } from "../../shared/transformFactories/helpers/manageImports"
+
+const transform = attributeTransformFactory({
+  condition: hasAttribute("icon"),
+  targetComponent: "Button",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const name = addImport({
+      component: "Icon",
+      conflictAlias: "TRIcon",
+      j,
+      pkg: "@planningcenter/tapestry-react",
+      source,
+    })
+    const iconButtonName = addImport({
+      component: "IconButton",
+      conflictAlias: "TIconButton",
+      j,
+      pkg: "@planningcenter/tapestry",
+      source,
+    })
+    convertAttributeFromObjectToJSXElement({
+      attributeName: "icon",
+      element,
+      elementName: name,
+      j,
+      stringValueKey: "name",
+    })
+
+    const componentName = (element.openingElement.name as JSXIdentifier)
+      .name as string
+    element.openingElement.name = j.jsxIdentifier(iconButtonName)
+    if (element.closingElement)
+      element.closingElement.name = j.jsxIdentifier(iconButtonName)
+
+    removeUnusedImport({
+      componentName,
+      j,
+      packageName: "@planningcenter/tapestry-react",
+      source,
+    })
+
+    return true
+  },
+})
+
+export default transform

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

@@ -0,0 +1,15 @@
+import { Transform } from "jscodeshift"
+
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { hasAttributeValue } from "../../shared/conditions/hasAttributeValue"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform: Transform = attributeTransformFactory({
+  condition: hasAttributeValue("as", "button"),
+  targetComponent: "Button",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) =>
+    removeAttribute("as", { element, j, source }),
+})
+
+export default transform