@planningcenter/tapestry-migration-cli 3.4.0 → 3.4.1-qa-928.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "3.4.0",
+  "version": "3.4.1-qa-928.0",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -30,13 +30,13 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
-    "@planningcenter/tapestry": "^3.4.0",
+    "@planningcenter/tapestry": "^3.4.1-qa-928.0",
     "@planningcenter/tapestry-react": "^4.11.5",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^20.0.0",
     "typescript": "^5.8.3",
     "vite": "^6.4.1",
-    "vitest": "^3.0.0"
+    "vitest": "^4.1.0"
   },
   "files": [
     "src/**/*",
@@ -50,5 +50,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0a541a2444b2d89e7fab714a3c6772336479b0fd"
+  "gitHead": "83250d30ce43157ae728980f1968118b6905e05c"
 }

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

@@ -52,6 +52,40 @@ describe("spinnerToLoadingButton transform", () => {
       expect(result).not.toContain("spinner={true}")
     })
 
+    it("should drop spinner styling props from a logical expression", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button spinner={isSaving && { color: "light-8", trackColor: "light-2" }} />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("loading={isSaving}")
+      expect(result).not.toContain("spinner")
+      expect(result).not.toContain("color")
+      expect(result).not.toContain("trackColor")
+    })
+
+    it("should convert a bare spinner object to loading={true}", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button spinner={{ color: "light-8", trackColor: "light-2" }} />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("loading={true}")
+      expect(result).not.toContain("spinner")
+      expect(result).not.toContain("color")
+      expect(result).not.toContain("trackColor")
+    })
+
     it("should handle boolean spinner prop", () => {
       const source = `
         import { Button } from "@planningcenter/tapestry-react"

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

@@ -1,12 +1,47 @@
+import { JSCodeshift, JSXElement } from "jscodeshift"
+
 import { transformAttributeName } from "../../shared/actions/transformAttributeName"
 import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { findAttribute } from "../../shared/findAttribute"
 import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
 
+/**
+ * The tapestry-react `spinner` prop accepts a boolean or an object of spinner
+ * styling props (e.g. `{ color, trackColor }`), and is often written as
+ * `spinner={condition && { ... }}`. The tapestry `loading` prop is boolean only,
+ * so any object of additional spinner props must be dropped:
+ *
+ *   spinner={isSaving && { color: "light-8" }}  ->  loading={isSaving}
+ *   spinner={{ color: "light-8" }}              ->  loading={true}
+ */
+function stripSpinnerObject(element: JSXElement, j: JSCodeshift) {
+  const attribute = findAttribute(element.openingElement.attributes, "spinner")
+  if (!attribute || attribute.value?.type !== "JSXExpressionContainer") return
+
+  const { expression } = attribute.value
+
+  // spinner={condition && { ... }} -> loading={condition}
+  if (
+    expression.type === "LogicalExpression" &&
+    expression.operator === "&&" &&
+    expression.right.type === "ObjectExpression"
+  ) {
+    attribute.value.expression = expression.left
+    return
+  }
+
+  // spinner={{ ... }} -> loading={true}
+  if (expression.type === "ObjectExpression") {
+    attribute.value.expression = j.booleanLiteral(true)
+  }
+}
+
 export default attributeTransformFactory({
   condition: hasAttribute("spinner"),
   targetComponent: "Button",
   targetPackage: "@planningcenter/tapestry-react",
   transform: (element, { j, options }) => {
+    stripSpinnerObject(element, j)
     transformAttributeName("spinner", "loading", { element, j, options })
 
     return true