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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "2.1.1-rc.0",
+  "version": "2.1.1-rc.2",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -10,7 +10,8 @@
   "scripts": {
     "build": "tsc",
     "dev": "tsc --watch",
-    "test": "echo \"No tests yet\"",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "prepublishOnly": "npm run build"
   },
   "keywords": [
@@ -32,7 +33,8 @@
   "devDependencies": {
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^20.0.0",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "vitest": "^3.0.0"
   },
   "files": [
     "src/**/*"
@@ -45,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "78216706f5cd2e95da447640c68d07be6001699f"
+  "gitHead": "5b408e235d4603be13e17be3117fb2ca454078f7"
 }

package/src/components/button/index.ts

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

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

@@ -0,0 +1,426 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./linkToButton"
+
+const j = jscodeshift.withParser("tsx")
+
+// Helper to run transform and get result
+function runTransform(input: string): string | null {
+  const fileInfo = { path: "test.tsx", source: input }
+  const api = {
+    j,
+    jscodeshift: j,
+    report: () => {},
+    stats: () => {},
+  }
+  const result = transform(fileInfo, api, {})
+  return result as string | null
+}
+
+describe("linkToButton transform", () => {
+  describe("basic transformation", () => {
+    it("should transform Link with onClick to Button", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Link onClick={handleClick}>Click me</Link>
+        }
+      `
+
+      const result = runTransform(input)
+
+      expect(result).toContain(
+        "<Button onClick={handleClick}>Click me</Button>"
+      )
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).not.toContain("Link")
+    })
+
+    it("should preserve Link without onClick", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Link href="/test">Go to test</Link>
+        }
+      `
+
+      const result = runTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should handle mixed Link usage", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Link onClick={handleClick}>Click me</Link>
+              <Link href="/home">Home</Link>
+              <Link onClick={handleOther}>Other action</Link>
+            </div>
+          )
+        }
+      `
+
+      const result = runTransform(input)
+
+      expect(result).toContain(
+        "<Button onClick={handleClick}>Click me</Button>"
+      )
+      expect(result).toContain('<Link href="/home">Home</Link>')
+      expect(result).toContain(
+        "<Button onClick={handleOther}>Other action</Button>"
+      )
+      expect(result).toContain(
+        'import { Link, Button } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+
+  describe("import management", () => {
+    it("should remove Link import when no longer used", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Link onClick={handleClick}>Button</Link>
+        }
+      `
+
+      const result = runTransform(input)
+
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).not.toContain("Link")
+    })
+
+    it("should keep Link import when still used", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Link onClick={handleClick}>Button</Link>
+              <Link href="/test">Link</Link>
+            </div>
+          )
+        }
+      `
+
+      const result = runTransform(input)
+
+      expect(result).toContain(
+        'import { Link, Button } from "@planningcenter/tapestry-react"'
+      )
+    })
+
+    it("should add Button to existing imports", () => {
+      const input = `
+        import { Link, Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Input />
+              <Link onClick={handleClick}>Button</Link>
+            </div>
+          )
+        }
+      `
+
+      const result = runTransform(input)
+
+      expect(result).toContain(
+        'import { Input, Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).not.toContain("Link")
+    })
+
+    it("should handle existing Button import", () => {
+      const input = `
+        import { Link, Button } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Button type="submit">Submit</Button>
+              <Link onClick={handleClick}>Clickable</Link>
+            </div>
+          )
+        }
+      `
+
+      const result = runTransform(input)
+
+      expect(result).toContain('<Button type="submit">Submit</Button>')
+      expect(result).toContain(
+        "<Button onClick={handleClick}>Clickable</Button>"
+      )
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).not.toContain("Link")
+    })
+  })
+
+  describe("component attributes", () => {
+    it("should preserve all attributes", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <Link
+              onClick={handleClick}
+              className="link-button"
+              disabled
+              data-testid="clickable-link"
+              role="button"
+            >
+              Click me
+            </Link>
+          )
+        }
+      `
+
+      const result = runTransform(input)
+
+      expect(result).toContain("onClick={handleClick}")
+      expect(result).toContain('className="link-button"')
+      expect(result).toContain("disabled")
+      expect(result).toContain('data-testid="clickable-link"')
+      expect(result).toContain('role="button"')
+      expect(result).toContain("<Button")
+      expect(result).toContain("</Button>")
+    })
+
+    it("should handle self-closing tags", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Link onClick={handleClick} />
+        }
+      `
+
+      const result = runTransform(input)
+
+      expect(result).toContain("<Button onClick={handleClick} />")
+      expect(result).not.toContain("Link")
+    })
+
+    it("should handle complex onClick expressions", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Link onClick={() => handleAction(id, 'delete')}>Delete</Link>
+        }
+      `
+
+      const result = runTransform(input)
+
+      expect(result).toContain("onClick={() => handleAction(id, 'delete')}")
+      expect(result).toContain("<Button")
+      expect(result).toContain("Delete</Button>")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should return null when no Link imported from tapestry-react", () => {
+      const input = `
+        import { Link } from "react-router-dom"
+
+        function Component() {
+          return <Link onClick={handleClick}>Button</Link>
+        }
+      `
+
+      const result = runTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should return null when no Link with onClick found", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Link href="/test">Go to test</Link>
+        }
+      `
+
+      const result = runTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should handle aliased Link import", () => {
+      const input = `
+        import { Link as TapestryLink } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <TapestryLink onClick={handleClick}>Button</TapestryLink>
+        }
+      `
+
+      const result = runTransform(input)
+
+      expect(result).toContain("<Button onClick={handleClick}>Button</Button>")
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).not.toContain("TapestryLink")
+      expect(result).not.toContain("Link")
+    })
+
+    it("should handle nested JSX structures", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div className="container">
+              <Link onClick={handleDelete}>
+                <span className="icon">🗑️</span>
+                <span>Delete</span>
+              </Link>
+            </div>
+          )
+        }
+      `
+
+      const result = runTransform(input)
+
+      expect(result).toContain("<Button onClick={handleDelete}>")
+      expect(result).toContain('<span className="icon">🗑️</span>')
+      expect(result).toContain("<span>Delete</span>")
+      expect(result).toContain("</Button>")
+      expect(result).not.toContain("Link")
+    })
+
+    it("should handle multiple onClick links in same component", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Actions() {
+          return (
+            <div>
+              <Link onClick={handleSave}>Save</Link>
+              <Link onClick={handleCancel}>Cancel</Link>
+              <Link onClick={handleDelete}>Delete</Link>
+            </div>
+          )
+        }
+      `
+
+      const result = runTransform(input)
+
+      expect(result).toContain("<Button onClick={handleSave}>Save</Button>")
+      expect(result).toContain("<Button onClick={handleCancel}>Cancel</Button>")
+      expect(result).toContain("<Button onClick={handleDelete}>Delete</Button>")
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).not.toContain("Link")
+    })
+
+    it("should handle Link with both href and onClick (should transform)", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Link href="/test" onClick={handleClick}>Link with both</Link>
+        }
+      `
+
+      const result = runTransform(input)
+
+      // Should transform because it has onClick (href is ignored for this transform)
+      expect(result).toContain(
+        '<Button href="/test" onClick={handleClick}>Link with both</Button>'
+      )
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).not.toContain("import { Link }")
+      expect(result).not.toContain("<Link")
+    })
+
+    it("should not transform Link without onClick even if it has other handlers", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Link href="/test" onMouseOver={handleHover}>Hover me</Link>
+        }
+      `
+
+      const result = runTransform(input)
+
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("conflict resolution", () => {
+    it("should use TRButton alias when Button conflicts with existing import", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+        import { Button } from "other-ui-lib"
+
+        function Component() {
+          return (
+            <div>
+              <Link onClick={handleClick}>Tapestry Button</Link>
+              <Button variant="primary">Other Button</Button>
+            </div>
+          )
+        }
+      `
+
+      const result = runTransform(input)
+
+      expect(result).toContain(
+        "<TRButton onClick={handleClick}>Tapestry Button</TRButton>"
+      )
+      expect(result).toContain(
+        '<Button variant="primary">Other Button</Button>'
+      )
+      expect(result).toContain('import { Button } from "other-ui-lib"')
+      expect(result).toContain(
+        'import { Button as TRButton } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).not.toContain("import { Link }")
+    })
+  })
+
+  describe("detecting renamed import of Link", () => {
+    it("should handle renamed Link import", () => {
+      const input = `
+        import { Link as TapestryLink } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <TapestryLink onClick={handleClick}>Button</TapestryLink>
+        }
+      `
+
+      const result = runTransform(input)
+
+      expect(result).toContain("<Button onClick={handleClick}>Button</Button>")
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).not.toContain("TapestryLink")
+      expect(result).not.toContain("Link")
+    })
+  })
+})

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

@@ -0,0 +1,20 @@
+import { Transform } from "jscodeshift"
+
+import { createComponentTransform } from "../../shared/componentTransformUtilities"
+import {
+  ComponentTransformConfig,
+  hasAttribute,
+} from "../../shared/transformConfig"
+
+const config: ComponentTransformConfig = {
+  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