@planningcenter/tapestry-migration-cli 2.3.0-rc.7 → 2.3.0-rc.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "2.3.0-rc.7",
+  "version": "2.3.0-rc.8",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -8,9 +8,9 @@
     "tapestry-migration-cli": "./src/index.ts"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "vite build",
     "dev": "tsc --watch",
-    "test": "vitest run",
+    "test": "yarn build && vitest run",
     "test:watch": "vitest",
     "prepublishOnly": "npm run build"
   },
@@ -31,13 +31,17 @@
     "tsx": "^4.20.5"
   },
   "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@planningcenter/tapestry-react": "^4.11.5",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^20.0.0",
     "typescript": "^5.8.3",
+    "vite": "^5.0.0",
     "vitest": "^3.0.0"
   },
   "files": [
-    "src/**/*"
+    "src/**/*",
+    "dist"
   ],
   "repository": {
     "type": "git",
@@ -47,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "eba3f5ee024bbbff6fbaadf7218862444a22c790"
+  "gitHead": "fd77bfbbe8d0562720aaee1ae3e9210d81af8db2"
 }

package/src/components/button/index.ts

@@ -1,26 +1,68 @@
 import { Transform } from "jscodeshift"
 
+import { JavaScriptTheme, loadJavaScriptTheme } from "../shared/jsThemeLoader"
+import auditSpreadProps from "./transforms/auditSpreadProps"
+import childrenToLabel from "./transforms/childrenToLabel"
+import commentOnVisualKindDifference from "./transforms/commentOnVisualKindDifference"
+import convertStyleProps from "./transforms/convertStyleProps"
 import iconLeftToPrefix from "./transforms/iconLeftToPrefix"
 import iconRightToSuffix from "./transforms/iconRightToSuffix"
+import iconToIconButton from "./transforms/iconToIconButton"
 import linkToButton from "./transforms/linkToButton"
 import moveButtonImport from "./transforms/moveButtonImport"
+import removeAsButton from "./transforms/removeAsButton"
+import removeDuplicateKeys from "./transforms/removeDuplicateKeys"
 import removeToTransform from "./transforms/removeTo"
+import reviewStyles from "./transforms/reviewStyles"
+import spinnerToLoadingButton from "./transforms/spinnerToLoadingButton"
 import themeVariantToKind from "./transforms/themeVariantToKind"
 import titleToLabel from "./transforms/titleToLabel"
 import tooltipToWrapper from "./transforms/tooltipToWrapper"
+import unsupportedProps from "./transforms/unsupportedProps"
 
-const transform: Transform = (fileInfo, api, options) => {
+const transform: Transform = async (fileInfo, api, options) => {
   let currentSource = fileInfo.source
   let hasAnyChanges = false
 
-  const transforms: Transform[] = [
+  // Load JavaScript theme if provided
+  let jsThemeData: JavaScriptTheme | null = null
+  if (options.jsTheme) {
+    try {
+      jsThemeData = await loadJavaScriptTheme(options.jsTheme)
+      if (options.verbose) {
+        console.log(`🎨 JS Theme data: ${JSON.stringify(jsThemeData)}`)
+      }
+    } catch (error) {
+      console.error(
+        `❌ Failed to prepare JS theme: ${error instanceof Error ? error.message : "Unknown error"}`
+      )
+    }
+  }
+
+  // Add JS theme info to options for individual transforms
+  const enhancedOptions = {
+    ...options,
+    jsThemeData,
+  }
+
+  const transforms = [
     linkToButton,
     tooltipToWrapper,
     iconRightToSuffix,
     iconLeftToPrefix,
+    commentOnVisualKindDifference,
     themeVariantToKind,
     titleToLabel,
+    childrenToLabel,
     removeToTransform,
+    removeDuplicateKeys,
+    removeAsButton,
+    auditSpreadProps,
+    reviewStyles,
+    convertStyleProps,
+    unsupportedProps,
+    iconToIconButton,
+    spinnerToLoadingButton,
     moveButtonImport,
   ]
 
@@ -28,7 +70,7 @@ const transform: Transform = (fileInfo, api, options) => {
     const result = individualTransform(
       { ...fileInfo, source: currentSource },
       api,
-      options
+      enhancedOptions
     )
     if (result && result !== currentSource) {
       currentSource = result as string

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

@@ -0,0 +1,352 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./auditSpreadProps"
+
+const j = jscodeshift.withParser("tsx")
+
+const AUDIT_COMMENT =
+  "TODO: tapestry-migration (spreadAttribute): Spread props can contain unsupported props, please explore usages and migrate as needed."
+
+function applyTransform(source: string) {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("auditSpreadProps transform", () => {
+  describe("basic transformations", () => {
+    it("should add comment to Button with single spread prop", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onClick: handleClick }
+  return <Button {...props}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+    })
+
+    it("should add comment to Button with multiple spread props", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const baseProps = { onClick: handleClick }
+  const styleProps = { className: "btn" }
+  return <Button {...baseProps} {...styleProps}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...baseProps}")
+      expect(result).toContain("{...styleProps}")
+    })
+
+    it("should handle Button with spread props and regular attributes", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onClick: handleClick }
+  return <Button label="Save" {...props} disabled />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain('label="Save"')
+      expect(result).toContain("{...props}")
+      expect(result).toContain("disabled")
+    })
+
+    it("should handle multiple Button components with spread props", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props1 = { onClick: handleClick1 }
+  const props2 = { onClick: handleClick2 }
+  return (
+    <div>
+      <Button {...props1}>Save</Button>
+      <Button {...props2}>Cancel</Button>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props1}")
+      expect(result).toContain("{...props2}")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not transform Button without spread props", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button onClick={handleClick}>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() {
+  const props = { onClick: handleClick }
+  return <Button {...props}>Save</Button>
+}
+      `.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() {
+  const props = { onClick: handleClick }
+  return <TapestryButton {...props}>Save</TapestryButton>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+    })
+
+    it("should handle mixed Button components (with and without spread props)", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onClick: handleSave }
+  return (
+    <div>
+      <Button {...props}>Save</Button>
+      <Button>Cancel</Button>
+      <Button onClick={handleDelete}>Delete</Button>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+      expect(result).toContain("<Button>Cancel</Button>")
+      expect(result).toContain("onClick={handleDelete}")
+    })
+  })
+
+  describe("complex spread prop scenarios", () => {
+    it("should handle Button with complex spread expression", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const baseProps = { className: "btn" }
+  const additionalProps = isDisabled ? { disabled: true } : {}
+  return <Button {...baseProps} {...additionalProps} onClick={handleClick}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...baseProps}")
+      expect(result).toContain("{...additionalProps}")
+    })
+
+    it("should handle Button with spread props in different positions", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { className: "btn" }
+  return (
+    <Button
+      label="Save"
+      {...props}
+      disabled={false}
+      onClick={handleSave}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain('label="Save"')
+      expect(result).toContain("{...props}")
+      expect(result).toContain("disabled={false}")
+      expect(result).toContain("onClick={handleSave}")
+    })
+
+    it("should handle spread props with object expressions", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button {...{ onClick: handleClick, className: "btn" }}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain(
+        '{...{ onClick: handleClick, className: "btn" }}'
+      )
+    })
+
+    it("should handle spread props with function calls", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button {...getButtonProps()} {...getStyleProps()}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...getButtonProps()}")
+      expect(result).toContain("{...getStyleProps()}")
+    })
+  })
+
+  describe("self-closing Button components", () => {
+    it("should handle self-closing Button with spread props", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { label: "Close", onClick: handleClose }
+  return <Button {...props} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+    })
+
+    it("should handle self-closing Button with multiple spread props and attributes", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const baseProps = { onClick: handleClick }
+  const styleProps = { className: "btn" }
+  return <Button label="Action" {...baseProps} {...styleProps} disabled />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain('label="Action"')
+      expect(result).toContain("{...baseProps}")
+      expect(result).toContain("{...styleProps}")
+      expect(result).toContain("disabled")
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("should return null when no Button components have spread props", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Button>Save</Button>
+      <Button label="Delete" />
+      <Button onClick={handleClick}>Cancel</Button>
+    </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() {
+  const props = { href: "/test" }
+  return <Link {...props}>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)
+    })
+
+    it("should return null when file has no JSX", () => {
+      const input = `
+export function handleClick() {
+  console.log("clicked")
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+  })
+
+  describe("different import scenarios", () => {
+    it("should handle default import with spread props", () => {
+      const input = `
+import Button from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onClick: handleClick }
+  return <Button {...props}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should handle namespace import", () => {
+      const input = `
+import * as Tapestry from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onClick: handleClick }
+  return <Tapestry.Button {...props}>Save</Tapestry.Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+  })
+})

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

@@ -0,0 +1,24 @@
+import { Transform } from "jscodeshift"
+
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { getSpreadProps } from "../../shared/actions/getSpreadProps"
+import { hasSpreadProps } from "../../shared/actions/hasSpreadProps"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const COMMENT =
+  "Spread props can contain unsupported props, please explore usages and migrate as needed."
+
+const transform: Transform = attributeTransformFactory({
+  condition: hasSpreadProps,
+  targetComponent: "Button",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const spreadProps = getSpreadProps(element)
+    spreadProps.forEach((prop) =>
+      addCommentToAttribute({ attribute: prop, j, text: COMMENT })
+    )
+    return spreadProps.length > 0
+  },
+})
+
+export default transform