@planningcenter/tapestry-migration-cli 2.1.1-rc.2 → 2.1.1-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "2.1.1-rc.2",
+  "version": "2.1.1-rc.3",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -47,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5b408e235d4603be13e17be3117fb2ca454078f7"
+  "gitHead": "3efd313bf986f8a7d54b6abc633bbc8f91f4fe11"
 }

package/src/components/button/index.ts

@@ -1,12 +1,13 @@
 import { Transform } from "jscodeshift"
 
 import linkToButton from "./transforms/linkToButton"
+import titleToLabel from "./transforms/titleToLabel"
 
 const transform: Transform = (fileInfo, api, options) => {
   let currentSource = fileInfo.source
   let hasAnyChanges = false
 
-  const transforms: Transform[] = [linkToButton]
+  const transforms: Transform[] = [linkToButton, titleToLabel]
 
   for (const individualTransform of transforms) {
     const result = individualTransform(

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

@@ -1,20 +1,15 @@
 import { Transform } from "jscodeshift"
 
-import { createComponentTransform } from "../../shared/componentTransformUtilities"
-import {
-  ComponentTransformConfig,
-  hasAttribute,
-} from "../../shared/transformConfig"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { componentTransformFactory } from "../../shared/transformFactories/componentTransformFactory"
 
-const config: ComponentTransformConfig = {
+const transform: Transform = componentTransformFactory({
   condition: hasAttribute("onClick"),
   conflictAlias: "TRButton",
   fromComponent: "Link",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "Button",
   toPackage: "@planningcenter/tapestry-react",
-}
-
-const transform: Transform = createComponentTransform(config)
+})
 
 export default transform

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

@@ -0,0 +1,418 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./titleToLabel"
+
+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("titleToLabel transform", () => {
+  describe("basic transformations", () => {
+    it("should transform Button title to label when no icon prop", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button title="Save"></Button>
+}
+      `.trim()
+
+      const expected = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button label="Save"></Button>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should transform Button title to aria-label when icon prop is present", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button title="Save" icon="save"></Button>
+}
+      `.trim()
+
+      const expected = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button aria-label="Save" icon="save"></Button>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should handle multiple Button components", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Button title="Save" />
+      <Button title="Delete" icon="trash" />
+    </div>
+  )
+}
+      `.trim()
+
+      const expected = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Button label="Save" />
+      <Button aria-label="Delete" icon="trash" />
+    </div>
+  );
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not transform Button without title attribute", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should not transform if Button is not imported from @planningcenter/tapestry-react", () => {
+      const input = `
+import { Button } from "other-library"
+
+export default function Test() {
+  return <Button title="Save" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should handle Button with alias import", () => {
+      const input = `
+import { Button as TapestryButton } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <TapestryButton title="Save" />;
+}
+      `.trim()
+
+      const expected = `
+import { Button as TapestryButton } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <TapestryButton label="Save" />;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should handle mixed Button components (with and without title)", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Button title="Save" />
+      <Button>Cancel</Button>
+      <Button title="Delete" icon="trash" />
+    </div>
+  )
+}
+      `.trim()
+
+      const expected = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Button label="Save" />
+      <Button>Cancel</Button>
+      <Button aria-label="Delete" icon="trash" />
+    </div>
+  );
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+  })
+
+  describe("complex attribute scenarios", () => {
+    it("should handle Button with multiple attributes including icon", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Button
+      title="Save Document"
+      icon="save"
+      className="primary"
+      disabled={false}
+      onClick={handleSave}
+    />
+  )
+}
+      `.trim()
+
+      const expected = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Button
+      aria-label="Save Document"
+      icon="save"
+      className="primary"
+      disabled={false}
+      onClick={handleSave}
+    />
+  );
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should handle Button with multiple attributes without icon", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Button
+      title="Save Document"
+      className="primary"
+      disabled={false}
+      onClick={handleSave}
+    />
+  )
+}
+      `.trim()
+
+      const expected = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Button
+      label="Save Document"
+      className="primary"
+      disabled={false}
+      onClick={handleSave}
+    />
+  );
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should handle title with expression value", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const saveText = "Save Document"
+  return <Button title={saveText} />;
+}
+      `.trim()
+
+      const expected = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const saveText = "Save Document"
+  return <Button label={saveText} />;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should handle title with expression and icon", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const deleteText = "Delete Item"
+  return <Button title={deleteText} icon="trash" />
+}
+      `.trim()
+
+      const expected = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const deleteText = "Delete Item"
+  return <Button aria-label={deleteText} icon="trash" />;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+  })
+
+  describe("different icon attribute formats", () => {
+    it("should detect icon prop with string value", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button title="Settings" icon="gear" />;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('aria-label="Settings"')
+    })
+
+    it("should detect icon prop with expression value", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const iconName = "gear"
+  return <Button title="Settings" icon={iconName} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('aria-label="Settings"')
+    })
+
+    it("should detect icon prop without value", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button title="Settings" icon />;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('aria-label="Settings"')
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("should return null when no Button components have title", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Button>Save</Button>
+      <Button icon="trash" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when no Button imports exist", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/test">Go</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null for empty file", () => {
+      const result = applyTransform("")
+      expect(result).toBe(null)
+    })
+  })
+
+  describe("self-closing Button components", () => {
+    it("should handle self-closing Button without icon", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button title="Close" />
+}
+      `.trim()
+
+      const expected = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button label="Close" />;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should handle self-closing Button with icon", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button title="Close" icon="x" />
+}
+      `.trim()
+
+      const expected = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button aria-label="Close" icon="x" />;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+  })
+})

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

@@ -0,0 +1,19 @@
+import { JSXElement, Transform } from "jscodeshift"
+
+import { transformAttributeName } from "../../shared/actions/transformAttributeName"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform: Transform = attributeTransformFactory({
+  condition: hasAttribute("title"),
+  targetComponent: "Button",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element: JSXElement) =>
+    transformAttributeName(
+      "title",
+      () => (hasAttribute("icon")(element) ? "aria-label" : "label"),
+      { element }
+    ),
+})
+
+export default transform

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

@@ -0,0 +1,20 @@
+import { JSXElement } from "jscodeshift"
+
+import { findAttribute } from "../findAttribute"
+
+export function transformAttributeName(
+  name: string,
+  nameTransform: string | ((element: JSXElement) => string),
+  { element }: { element: JSXElement }
+): boolean {
+  if (!nameTransform) return false
+  const attributes = element.openingElement.attributes || []
+  const attribute = findAttribute(attributes, name)
+  if (!attribute) return false
+
+  const resolvedName =
+    typeof nameTransform === "string" ? nameTransform : nameTransform(element)
+  attribute.name.name = resolvedName
+
+  return true
+}

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

@@ -0,0 +1,59 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import { transformElementName } from "./transformElementName"
+
+const j = jscodeshift.withParser("tsx")
+
+describe("transformElementName", () => {
+  it("should transform JSX element name", () => {
+    const code = `<Button>Click me</Button>`
+    const source = j(code)
+    const elementPath = source.find(j.JSXOpeningElement).at(0)
+
+    const result = transformElementName(elementPath.get(), "Link")
+
+    expect(result).toBe(true)
+    expect(source.toSource()).toContain("<Link>Click me</Link>")
+  })
+
+  it("should transform both opening and closing tags", () => {
+    const code = `<Button className="test">Content</Button>`
+    const source = j(code)
+    const elementPath = source.find(j.JSXOpeningElement).at(0)
+
+    const result = transformElementName(elementPath.get(), "Link")
+
+    expect(result).toBe(true)
+    const output = source.toSource()
+    expect(output).toContain('<Link className="test">')
+    expect(output).toContain("</Link>")
+  })
+
+  it("should handle self-closing tags", () => {
+    const code = `<Button />`
+    const source = j(code)
+    const elementPath = source.find(j.JSXOpeningElement).at(0)
+
+    const result = transformElementName(elementPath.get(), "Link")
+
+    expect(result).toBe(true)
+    expect(source.toSource()).toContain("<Link />")
+  })
+
+  it("should preserve all attributes", () => {
+    const code = `<Button className="test" onClick={handler} disabled>Content</Button>`
+    const source = j(code)
+    const elementPath = source.find(j.JSXOpeningElement).at(0)
+
+    const result = transformElementName(elementPath.get(), "OtherButton")
+
+    expect(result).toBe(true)
+    const output = source.toSource()
+    expect(output).toContain('className="test"')
+    expect(output).toContain("onClick={handler}")
+    expect(output).toContain("disabled")
+    expect(output).toContain("<OtherButton")
+    expect(output).toContain("</OtherButton>")
+  })
+})

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

@@ -0,0 +1,27 @@
+import { ASTPath, JSXOpeningElement } from "jscodeshift"
+
+/**
+ * Transforms JSX element names (both opening and closing tags)
+ */
+export function transformElementName(
+  elementPath: ASTPath<JSXOpeningElement>,
+  newName: string
+): boolean {
+  if (elementPath.value.name.type === "JSXIdentifier") {
+    elementPath.value.name.name = newName
+
+    // Update closing tag if it exists
+    const parent = elementPath.parent
+    if (
+      parent &&
+      parent.value.type === "JSXElement" &&
+      parent.value.closingElement
+    ) {
+      if (parent.value.closingElement.name.type === "JSXIdentifier") {
+        parent.value.closingElement.name.name = newName
+      }
+    }
+    return true
+  }
+  return false
+}

package/src/components/shared/conditions/andConditions.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest"
+
+import { andConditions } from "./andConditions"
+import { hasAttribute } from "./hasAttribute"
+import { hasAttributeValue } from "./hasAttributeValue"
+import { createJSXElement } from "./helpers/createJSXElement"
+
+describe("andConditions", () => {
+  it("should return true when all conditions are met", () => {
+    const condition = andConditions(
+      hasAttribute("href"),
+      hasAttributeValue("target", "_blank")
+    )
+    const element = createJSXElement(' href="/test" target="_blank"')
+
+    expect(condition(element)).toBe(true)
+  })
+
+  it("should return false when one condition fails", () => {
+    const condition = andConditions(
+      hasAttribute("href"),
+      hasAttributeValue("target", "_blank")
+    )
+    const element = createJSXElement(' href="/test" target="_self"')
+
+    expect(condition(element)).toBe(false)
+  })
+
+  it("should return false when all conditions fail", () => {
+    const condition = andConditions(
+      hasAttribute("href"),
+      hasAttributeValue("target", "_blank")
+    )
+    const element = createJSXElement(' className="test"')
+
+    expect(condition(element)).toBe(false)
+  })
+
+  it("should handle single condition", () => {
+    const condition = andConditions(hasAttribute("disabled"))
+    const element = createJSXElement(" disabled")
+
+    expect(condition(element)).toBe(true)
+  })
+
+  it("should handle empty conditions (return true)", () => {
+    const condition = andConditions()
+    const element = createJSXElement("")
+
+    expect(condition(element)).toBe(true)
+  })
+
+  it("should handle complex combinations", () => {
+    const condition = andConditions(
+      hasAttribute("href"),
+      hasAttribute("className"),
+      hasAttributeValue("role", "button")
+    )
+    const element = createJSXElement(
+      ' href="/test" className="btn" role="button"'
+    )
+
+    expect(condition(element)).toBe(true)
+  })
+})

package/src/components/shared/conditions/andConditions.ts

@@ -0,0 +1,13 @@
+import { JSXElement } from "jscodeshift"
+
+import { TransformCondition } from "../types"
+
+/**
+ * Helper function to combine multiple conditions with AND logic
+ */
+export function andConditions(
+  ...conditions: TransformCondition[]
+): TransformCondition {
+  return (element: JSXElement) =>
+    conditions.every((condition) => condition(element))
+}