@planningcenter/tapestry-migration-cli 2.3.0 → 2.4.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "2.3.0",
+  "version": "2.4.0-rc.1",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -51,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5645e6618bcb6253064988fabea2efa6b3a52669"
+  "gitHead": "3194c750cad894cc6db7c806659074705082e986"
 }

package/src/components/button/index.ts

@@ -13,6 +13,7 @@ import moveButtonImport from "./transforms/moveButtonImport"
 import removeAsButton from "./transforms/removeAsButton"
 import removeDuplicateKeys from "./transforms/removeDuplicateKeys"
 import removeToTransform from "./transforms/removeTo"
+import removeTypeButton from "./transforms/removeTypeButton"
 import reviewStyles from "./transforms/reviewStyles"
 import spinnerToLoadingButton from "./transforms/spinnerToLoadingButton"
 import themeVariantToKind from "./transforms/themeVariantToKind"
@@ -57,6 +58,7 @@ const transform: Transform = async (fileInfo, api, options) => {
     removeToTransform,
     removeDuplicateKeys,
     removeAsButton,
+    removeTypeButton,
     auditSpreadProps,
     reviewStyles,
     convertStyleProps,

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

@@ -0,0 +1,197 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./removeTypeButton"
+
+const j = jscodeshift.withParser("tsx")
+
+// Helper to run transform and get result
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  const api = {
+    j,
+    jscodeshift: j,
+    report: () => {},
+    stats: () => {},
+  }
+  const result = transform(fileInfo, api, {})
+  return result as string | null
+}
+
+describe("removeTypeButton transform", () => {
+  describe("basic transformation", () => {
+    it("should remove type='button' from Button", () => {
+      const input = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Button type="button">Click me</Button>
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Button>Click me</Button>")
+      expect(result).not.toContain('type="button"')
+    })
+
+    it('should remove type="button" from Button', () => {
+      const input = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Button type="button" onClick={handleClick}>Submit</Button>
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Button onClick={handleClick}>Submit</Button>")
+      expect(result).not.toContain('type="button"')
+    })
+
+    it("should preserve Button without type='button'", () => {
+      const input = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Button onClick={handleClick}>Click me</Button>
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should preserve Button with type='submit'", () => {
+      const input = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Button type="submit">Submit</Button>
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should preserve Button with type='reset'", () => {
+      const input = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Button type="reset">Reset</Button>
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("multiple buttons", () => {
+    it("should handle mixed Button usage", () => {
+      const input = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Button type="button">Click me</Button>
+              <Button type="submit">Submit</Button>
+              <Button type="button" onClick={handleClick}>Action</Button>
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Button>Click me</Button>")
+      expect(result).toContain('<Button type="submit">Submit</Button>')
+      expect(result).toContain("<Button onClick={handleClick}>Action</Button>")
+      expect(result).not.toContain('type="button"')
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle Button with multiple attributes including type='button'", () => {
+      const input = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Button className="btn" type="button" disabled>Disabled</Button>
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        '<Button className="btn" disabled>Disabled</Button>'
+      )
+      expect(result).not.toContain('type="button"')
+    })
+
+    it("should not affect other components with type='button'", () => {
+      const input = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Button type="button">Tapestry Button</Button>
+              <button type="button">HTML Button</button>
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Button>Tapestry Button</Button>")
+      expect(result).toContain('<button type="button">HTML Button</button>')
+    })
+
+    it("should handle Button with expression type", () => {
+      const input = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Button type={"button"}>Click me</Button>
+        }
+      `
+
+      const result = applyTransform(input)
+
+      if (result) {
+        expect(result).toContain("<Button>Click me</Button>")
+        expect(result).not.toContain('type={"button"}')
+      } else {
+        // If no transformation occurred, the original should still have the expression
+        expect(input).toContain('type={"button"}')
+      }
+    })
+  })
+
+  describe("import handling", () => {
+    it("should not affect imports", () => {
+      const input = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Button type="button">Click me</Button>
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+})

package/src/components/button/transforms/removeTypeButton.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("type", "button"),
+  targetComponent: "Button",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) =>
+    removeAttribute("type", { element, j, source }),
+})
+
+export default transform