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

package/package.json

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

package/src/components/button/index.ts

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

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

@@ -0,0 +1,293 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./moveButtonImport"
+
+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("moveButtonImport transform", () => {
+  describe("basic transformations", () => {
+    it("should move Button import from tapestry-react to tapestry", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button>Test</Button>
+}
+      `.trim()
+
+      const expected = `
+import { Button } from "@planningcenter/tapestry";
+
+export default function Test() {
+  return <Button>Test</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>Save</Button>
+      <Button>Cancel</Button>
+    </div>
+  )
+}
+      `.trim()
+
+      const expected = `
+import { Button } from "@planningcenter/tapestry";
+
+export default function Test() {
+  return (
+    <div>
+      <Button>Save</Button>
+      <Button>Cancel</Button>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should preserve other imports from tapestry-react", () => {
+      const input = `
+import { Button, Link, Input } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button>Test</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Link, Input } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<Button>Test</Button>")
+      expect(result).not.toContain(
+        'Button, Link } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+
+  describe("import conflict handling", () => {
+    it("should use alias when Button already imported from tapestry", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry"
+import { Button as ReactButton } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <ReactButton>Test</ReactButton>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<Button>Test</Button>")
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+      expect(result).not.toContain("ReactButton")
+    })
+
+    it("should handle existing tapestry import with other components", () => {
+      const input = `
+import { Link, Input } from "@planningcenter/tapestry"
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button>Test</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Link, Input, Button } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<Button>Test</Button>")
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not transform if Button is not imported from tapestry-react", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/test">Test</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should handle Button with aliased import", () => {
+      const input = `
+import { Button as ReactButton } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <ReactButton>Test</ReactButton>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<Button>Test</Button>")
+      expect(result).not.toContain("ReactButton")
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+    })
+
+    it("should handle self-closing Button components", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button />
+}
+      `.trim()
+
+      const expected = `
+import { Button } from "@planningcenter/tapestry";
+
+export default function Test() {
+  return <Button />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should handle Button with props", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button kind="primary" onClick={handleClick}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('kind="primary"')
+      expect(result).toContain("onClick={handleClick}")
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("should return null when no Button import exists", () => {
+      const input = `
+import React from "react"
+
+export default function Test() {
+  return <div>Hello</div>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when Button already imported from tapestry", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry"
+
+export default function Test() {
+  return <Button>Test</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null for empty file", () => {
+      const result = applyTransform("")
+      expect(result).toBe(null)
+    })
+  })
+
+  describe("complex scenarios", () => {
+    it("should handle mixed imports and multiple components", () => {
+      const input = `
+import React from "react"
+import { Button, Link } from "@planningcenter/tapestry-react"
+import { Input } from "@planningcenter/tapestry"
+
+export default function Test() {
+  return (
+    <form>
+      <Input name="email" />
+      <Button type="submit">Submit</Button>
+      <Link href="/cancel">Cancel</Link>
+    </form>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Link } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { Input, Button } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('<Button type="submit">Submit</Button>')
+      expect(result).toContain('<Link href="/cancel">Cancel</Link>')
+      expect(result).not.toContain(
+        'Button, Link } from "@planningcenter/tapestry-react"'
+      )
+    })
+
+    it("should handle Button usage in JSX expressions", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test({ showButton }) {
+  return (
+    <div>
+      {showButton && <Button>Conditional</Button>}
+      {items.map(item => <Button key={item.id}>{item.name}</Button>)}
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<Button>Conditional</Button>")
+      expect(result).toContain("<Button key={item.id}>{item.name}</Button>")
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+    })
+  })
+})

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

@@ -0,0 +1,14 @@
+import { Transform } from "jscodeshift"
+
+import { componentTransformFactory } from "../../shared/transformFactories/componentTransformFactory"
+
+const transform: Transform = componentTransformFactory({
+  condition: () => true,
+  conflictAlias: "TButton",
+  fromComponent: "Button",
+  fromPackage: "@planningcenter/tapestry-react",
+  toComponent: "Button",
+  toPackage: "@planningcenter/tapestry",
+})
+
+export default transform

package/src/components/shared/transformFactories/componentTransformFactory.ts

@@ -43,10 +43,9 @@ export function componentTransformFactory(config: {
       return null
     }
 
-    // Check for conflicting imports
     const hasConflict = hasConflictingImport(
       config.toComponent,
-      config.toPackage,
+      [config.fromPackage, config.toPackage],
       { j, source }
     )
 

package/src/components/shared/transformFactories/helpers/manageImports.ts

@@ -33,15 +33,19 @@ export function getImportName(
 }
 
 /**
- * Checks if a component is already imported from sources other than the specified package
+ * Checks if a component is already imported from sources other than the specified packages
  */
 export function hasConflictingImport(
   componentName: string,
-  excludePackage: string,
+  excludePackages: string | string[],
   { source, j }: { j: JSCodeshift; source: Collection }
 ): boolean {
+  const excludePackageList = Array.isArray(excludePackages)
+    ? excludePackages
+    : [excludePackages]
+
   const conflictingImport = source.find(j.ImportDeclaration).filter((path) => {
-    if (path.value.source.value === excludePackage) {
+    if (excludePackageList.includes(path.value.source.value as string)) {
       return false
     }
 
@@ -134,7 +138,7 @@ export function removeImportFromDeclaration(
 
     // Remove entire import if no specifiers left
     if (specifiers.length === 0) {
-      importPath.get().replace()
+      importPath.get().prune()
     }
     return true
   }
@@ -165,10 +169,14 @@ export function manageImports(
   j: JSCodeshift
 ): void {
   // Check if source component is still being used
-  const stillUsesSource =
-    source.find(j.JSXOpeningElement, {
-      name: { name: sourceComponentName },
-    }).length > 0
+  // Special case: if we're migrating same component name between packages,
+  // we should always remove the old import since JSX elements will now refer to new package
+  const isSameComponentMigration = config.fromComponent === config.toComponent
+  const stillUsesSource = isSameComponentMigration
+    ? false
+    : source.find(j.JSXOpeningElement, {
+        name: { name: sourceComponentName },
+      }).length > 0
 
   // Handle source package import cleanup
   const sourceImport = source