@planningcenter/tapestry-migration-cli 2.4.1 → 2.5.0-qa-459.0

package/README.md

@@ -14,25 +14,25 @@ yarn add --dev @planningcenter/tapestry-migration-cli
 
 For optimal results, migrate components in this order:
 
-1. **Button components first**: `npx @planningcenter/tapestry-migration-cli run button -p ./src/components --fix`
-2. **Link components second**: `npx @planningcenter/tapestry-migration-cli run link -p ./src/components --fix`
+1. **Button components first**: `npx @planningcenter/tapestry-migration-cli run button -p ./src/components`
+2. **Link components second**: `npx @planningcenter/tapestry-migration-cli run link -p ./src/components`
 
 This order ensures that Button components with navigation props are properly handled before Link components are migrated.
 
 ### Basic Commands
 
 ```bash
-# Run a dry-run migration (preview changes)
+# Apply the migration changes (default behavior)
 npx @planningcenter/tapestry-migration-cli run button -p ./src/components
 
-# Apply the migration changes
-npx @planningcenter/tapestry-migration-cli run button -p ./src/components --fix
+# Preview changes without writing (dry run)
+npx @planningcenter/tapestry-migration-cli run button -p ./src/components --dry-run
 
 # Run with verbose output
-npx @planningcenter/tapestry-migration-cli run button -p ./src/components --fix --verbose
+npx @planningcenter/tapestry-migration-cli run button -p ./src/components --verbose
 
 # Generate a migration report
-npx @planningcenter/tapestry-migration-cli run button -p ./src/components --fix --report-path ./migration-report.md
+npx @planningcenter/tapestry-migration-cli run button -p ./src/components --report-path ./migration-report.md
 ```
 
 ## Available Components
@@ -46,7 +46,7 @@ npx @planningcenter/tapestry-migration-cli run button -p ./src/components --fix
 
 ## Optional Arguments
 
-- `-f, --fix` - Write changes to files (without this flag, it's a dry run)
+- `-d, --dry-run` - Preview changes without writing to files (default: writes changes)
 - `-v, --verbose` - Show detailed output
 - `-j, --js-theme <path>` - Path to JavaScript theme file
 - `-r, --report-path <path>` - Path for migration report (default: MIGRATION_REPORT.md)
@@ -101,6 +101,6 @@ yarn add --dev @planningcenter/tapestry-migration-cli
 }
 
 # Then run (following recommended order)
-yarn migrate run button -p app/javascript/components --fix
-yarn migrate run link -p app/javascript/components --fix
+yarn migrate run button -p app/javascript/components
+yarn migrate run link -p app/javascript/components
 ```

package/dist/tapestry-react-shim.cjs

@@ -2571,6 +2571,7 @@ const COMPONENT_KIND_CLASS_MAP = {
   "ghost-interaction": "tds-btn--ghost-interaction",
   "inline-text": "tds-btn--inline-text",
   neutral: "tds-btn--neutral",
+  "neutral-inline": "tds-btn--neutral-inline",
   pill: "tds-btn--pill",
   primary: "tds-btn--interaction",
   "primary-page-header": "tds-btn--primary-page-header",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "2.4.1",
+  "version": "2.5.0-qa-459.0",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -51,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "465fa2ffd3103c546f66e368859061daf3c7b6c1"
+  "gitHead": "c09a62a934592af9a96f33a9fff32ece2e33aed6"
 }

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

@@ -5,12 +5,12 @@ import transform from "./childrenToLabel"
 
 const j = jscodeshift.withParser("tsx")
 
-function applyTransform(source: string): string | null {
+function applyTransform(source: string, verbose = false): string | null {
   const fileInfo = { path: "test.tsx", source }
   return transform(
     fileInfo,
     { j, jscodeshift: j, report: () => {}, stats: () => {} },
-    {}
+    { verbose }
   ) as string | null
 }
 
@@ -360,5 +360,21 @@ function Test() {
         "take time to find the right text for the component"
       )
     })
+
+    it("should add CHANGED comment when verbose is enabled", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input, true)
+      expect(result).toContain('<Button label="Save" />')
+      expect(result).toContain(
+        "CHANGED: tapestry-migration (children): children converted to label prop"
+      )
+    })
   })
 })

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

@@ -15,7 +15,7 @@ const transform: Transform = attributeTransformFactory({
   condition: hasChildren,
   targetComponent: "Button",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
+  transform: (element, { j, options, source }) => {
     if (hasAttribute("label")(element)) {
       addComment({
         element,
@@ -32,6 +32,18 @@ const transform: Transform = attributeTransformFactory({
     if (isSimpleText && textContent) {
       addAttribute({ element, j, name: "label", value: textContent })
       removeChildren(element)
+
+      if (options?.verbose) {
+        addComment({
+          commentKind: "change",
+          element,
+          j,
+          scope: "children",
+          source,
+          text: buildComment("children converted to label prop", false),
+        })
+      }
+
       return true
     } else if (!isSimpleText) {
       addComment({

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

@@ -8,7 +8,7 @@ const transform = attributeTransformFactory({
   condition: hasAttribute("iconLeft"),
   targetComponent: "Button",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
+  transform: (element, { j, options, source }) => {
     const name = addImport({
       component: "Icon",
       conflictAlias: "TRIcon",
@@ -25,7 +25,7 @@ const transform = attributeTransformFactory({
     })
     if (!updatedElement) return false
 
-    transformAttributeName("iconLeft", "prefix", { element })
+    transformAttributeName("iconLeft", "prefix", { element, j, options })
     return true
   },
 })

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

@@ -8,7 +8,7 @@ const transform = attributeTransformFactory({
   condition: hasAttribute("iconRight"),
   targetComponent: "Button",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
+  transform: (element, { j, options, source }) => {
     const name = addImport({
       component: "Icon",
       conflictAlias: "TRIcon",
@@ -25,7 +25,7 @@ const transform = attributeTransformFactory({
     })
     if (!updatedElement) return false
 
-    transformAttributeName("iconRight", "suffix", { element })
+    transformAttributeName("iconRight", "suffix", { element, j, options })
     return true
   },
 })

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

@@ -1,5 +1,6 @@
 import { JSXIdentifier } from "jscodeshift"
 
+import { addComment } from "../../shared/actions/addComment"
 import { convertAttributeFromObjectToJSXElement } from "../../shared/actions/convertAttributeFromObjectToJSXElement"
 import { removeUnusedImport } from "../../shared/actions/removeUnusedImport"
 import { hasAttribute } from "../../shared/conditions/hasAttribute"
@@ -10,7 +11,7 @@ const transform = attributeTransformFactory({
   condition: hasAttribute("icon"),
   targetComponent: "Button",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
+  transform: (element, { j, options, source }) => {
     const name = addImport({
       component: "Icon",
       conflictAlias: "TRIcon",
@@ -46,6 +47,17 @@ const transform = attributeTransformFactory({
       source,
     })
 
+    if (options?.verbose) {
+      addComment({
+        commentKind: "change",
+        element,
+        j,
+        scope: "component",
+        source,
+        text: `converted Button with icon prop to IconButton`,
+      })
+    }
+
     return true
   },
 })

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

@@ -6,8 +6,8 @@ const transform = attributeTransformFactory({
   condition: hasAttribute("innerRef"),
   targetComponent: "Button",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element) => {
-    return transformAttributeName("innerRef", "ref", { element })
+  transform: (element, { j, options }) => {
+    return transformAttributeName("innerRef", "ref", { element, j, options })
   },
 })
 

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

@@ -6,8 +6,8 @@ export default attributeTransformFactory({
   condition: hasAttribute("spinner"),
   targetComponent: "Button",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element) => {
-    transformAttributeName("spinner", "loading", { element })
+  transform: (element, { j, options }) => {
+    transformAttributeName("spinner", "loading", { element, j, options })
 
     return true
   },

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

@@ -8,11 +8,11 @@ const transform: Transform = attributeTransformFactory({
   condition: hasAttribute("title"),
   targetComponent: "Button",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element: JSXElement) =>
+  transform: (element: JSXElement, { j, options }) =>
     transformAttributeName(
       "title",
       () => (hasAttribute("icon")(element) ? "aria-label" : "label"),
-      { element }
+      { element, j, options }
     ),
 })
 

package/src/components/checkbox/transforms/childrenToLabel.test.ts

@@ -5,12 +5,12 @@ import transform from "./childrenToLabel"
 
 const j = jscodeshift.withParser("tsx")
 
-function applyTransform(source: string): string {
+function applyTransform(source: string, verbose = false): string {
   const fileInfo = { path: "test.tsx", source }
   const result = transform(
     fileInfo,
     { j, jscodeshift: j, report: () => {}, stats: () => {} },
-    {}
+    { verbose }
   ) as string | null
   return result || source
 }
@@ -142,5 +142,21 @@ function Test() {
         '<Checkbox checked disabled label="Accept terms" />'
       )
     })
+
+    it("should add CHANGED comment when verbose is enabled", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox>Accept terms</Checkbox>
+}
+      `.trim()
+
+      const result = applyTransform(input, true)
+      expect(result).toContain('<Checkbox label="Accept terms" />')
+      expect(result).toContain(
+        "CHANGED: tapestry-migration (children): children converted to label prop"
+      )
+    })
   })
 })

package/src/components/checkbox/transforms/childrenToLabel.ts

@@ -15,7 +15,7 @@ const transform: Transform = attributeTransformFactory({
   condition: hasChildren,
   targetComponent: "Checkbox",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
+  transform: (element, { j, options, source }) => {
     if (hasAttribute("label")(element)) {
       addComment({
         element,
@@ -32,6 +32,18 @@ const transform: Transform = attributeTransformFactory({
     if (isSimpleText && textContent) {
       addAttribute({ element, j, name: "label", value: textContent })
       removeChildren(element)
+
+      if (options?.verbose) {
+        addComment({
+          commentKind: "change",
+          element,
+          j,
+          scope: "children",
+          source,
+          text: buildComment("children converted to label prop", false),
+        })
+      }
+
       return true
     } else if (!isSimpleText) {
       addComment({

package/src/components/checkbox/transforms/innerRefToRef.test.ts

@@ -5,12 +5,12 @@ import transform from "./innerRefToRef"
 
 const j = jscodeshift.withParser("tsx")
 
-function applyTransform(source: string): string {
+function applyTransform(source: string, verbose = false): string {
   const fileInfo = { path: "test.tsx", source }
   const result = transform(
     fileInfo,
     { j, jscodeshift: j, report: () => {}, stats: () => {} },
-    {}
+    { verbose }
   ) as string | null
   return result || source
 }
@@ -157,5 +157,23 @@ function Test() {
       expect(result).toContain("disabled")
       expect(result).not.toContain("innerRef=")
     })
+
+    it("should add CHANGED comment when verbose is enabled", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const checkboxRef = React.useRef()
+  return <Checkbox innerRef={checkboxRef} label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input, true)
+      expect(result).toContain("ref={checkboxRef}")
+      expect(result).not.toContain("innerRef=")
+      expect(result).toContain(
+        "CHANGED: tapestry-migration (ref): renamed from innerRef"
+      )
+    })
   })
 })

package/src/components/checkbox/transforms/innerRefToRef.ts

@@ -6,8 +6,8 @@ const transform = attributeTransformFactory({
   condition: hasAttribute("innerRef"),
   targetComponent: "Checkbox",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element) => {
-    return transformAttributeName("innerRef", "ref", { element })
+  transform: (element, { j, options }) => {
+    return transformAttributeName("innerRef", "ref", { element, j, options })
   },
 })
 

package/src/components/link/transforms/childrenToLabel.test.ts

@@ -5,12 +5,12 @@ import transform from "./childrenToLabel"
 
 const j = jscodeshift.withParser("tsx")
 
-function applyTransform(source: string): string | null {
+function applyTransform(source: string, verbose = false): string | null {
   const fileInfo = { path: "test.tsx", source }
   return transform(
     fileInfo,
     { j, jscodeshift: j, report: () => {}, stats: () => {} },
-    {}
+    { verbose }
   ) as string | null
 }
 
@@ -327,5 +327,21 @@ function Test() {
         "If icons are used in the component, you can use prefix and suffix to correctly display those icons"
       )
     })
+
+    it("should add CHANGED comment when verbose is enabled", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Link href="/home">Home</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input, true)
+      expect(result).toContain('<Link href="/home" label="Home" />')
+      expect(result).toContain(
+        "CHANGED: tapestry-migration (children): children converted to label prop"
+      )
+    })
   })
 })

package/src/components/link/transforms/childrenToLabel.ts

@@ -15,7 +15,7 @@ const transform: Transform = attributeTransformFactory({
   condition: hasChildren,
   targetComponent: "Link",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
+  transform: (element, { j, options, source }) => {
     if (hasAttribute("label")(element)) {
       addComment({
         element,
@@ -32,6 +32,18 @@ const transform: Transform = attributeTransformFactory({
     if (isSimpleText && textContent) {
       addAttribute({ element, j, name: "label", value: textContent })
       removeChildren(element)
+
+      if (options?.verbose) {
+        addComment({
+          commentKind: "change",
+          element,
+          j,
+          scope: "children",
+          source,
+          text: buildComment("children converted to label prop", false),
+        })
+      }
+
       return true
     } else if (!isSimpleText) {
       addComment({

package/src/components/link/transforms/innerRefToRef.test.ts

@@ -5,12 +5,12 @@ import transform from "./innerRefToRef"
 
 const j = jscodeshift.withParser("tsx")
 
-function applyTransform(source: string): string | null {
+function applyTransform(source: string, verbose = false): string | null {
   const fileInfo = { path: "test.tsx", source }
   return transform(
     fileInfo,
     { j, jscodeshift: j, report: () => {}, stats: () => {} },
-    {}
+    { verbose }
   ) as string | null
 }
 
@@ -166,5 +166,22 @@ export default function Test() {
       const result = applyTransform(input)
       expect(result).toBe(expected)
     })
+
+    it("should add CHANGED comment when verbose is enabled", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link innerRef={linkRef}>Go somewhere</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input, true)
+      expect(result).toContain("ref={linkRef}")
+      expect(result).not.toContain("innerRef=")
+      expect(result).toContain(
+        "CHANGED: tapestry-migration (ref): renamed from innerRef"
+      )
+    })
   })
 })

package/src/components/link/transforms/innerRefToRef.ts

@@ -6,8 +6,8 @@ const transform = attributeTransformFactory({
   condition: hasAttribute("innerRef"),
   targetComponent: "Link",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element) => {
-    return transformAttributeName("innerRef", "ref", { element })
+  transform: (element, { j, options }) => {
+    return transformAttributeName("innerRef", "ref", { element, j, options })
   },
 })
 

package/src/components/link/transforms/removeAs.test.ts

@@ -5,11 +5,11 @@ import removeAs from "./removeAs"
 
 const j = jscodeshift.withParser("tsx")
 
-function applyTransform(source: string): string | null {
+function applyTransform(source: string, verbose = false): string | null {
   return removeAs(
     { path: "test.tsx", source },
     { j, jscodeshift: j, report: () => {}, stats: () => {} },
-    {}
+    { verbose }
   ) as string | null
 }
 
@@ -188,5 +188,21 @@ export default function Test() {
       expect(result).toContain('href="/external"')
       expect(result).not.toContain('as="a"')
     })
+
+    it("should add CHANGED comment when verbose is enabled", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/home" as="a">Home</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input, true)
+      expect(result).not.toContain('as="a"')
+      expect(result).toContain(
+        "CHANGED: tapestry-migration (as): as='a' prop removed"
+      )
+    })
   })
 })

package/src/components/link/transforms/removeAs.ts

@@ -1,3 +1,4 @@
+import { addComment } from "../../shared/actions/addComment"
 import { removeAttribute } from "../../shared/actions/removeAttribute"
 import { hasAttributeValue } from "../../shared/conditions/hasAttributeValue"
 import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
@@ -6,10 +7,20 @@ const transform = attributeTransformFactory({
   condition: hasAttributeValue("as", "a"),
   targetComponent: "Link",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
-    // Remove as attribute
+  transform: (element, { j, options, source }) => {
     removeAttribute("as", { element, j, source })
 
+    if (options?.verbose) {
+      addComment({
+        commentKind: "change",
+        element,
+        j,
+        scope: "as",
+        source,
+        text: "as='a' prop removed",
+      })
+    }
+
     return true
   },
 })

package/src/components/link/transforms/removeInlineProp.test.ts

@@ -5,12 +5,12 @@ import transform from "./removeInlineProp"
 
 const j = jscodeshift.withParser("tsx")
 
-function applyTransform(source: string): string | null {
+function applyTransform(source: string, verbose = false): string | null {
   const fileInfo = { path: "test.tsx", source }
   return transform(
     fileInfo,
     { j, jscodeshift: j, report: () => {}, stats: () => {} },
-    {}
+    { verbose }
   ) as string | null
 }
 
@@ -291,5 +291,23 @@ export default function Test() {
       const result = applyTransform(input)
       expect(result).toBe(null)
     })
+
+    it("should add CHANGED comment when verbose is enabled", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/profile" inline>Profile</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input, true)
+      expect(result).not.toContain(" inline>")
+      expect(result).not.toContain(' inline"')
+      expect(result).not.toContain(" inline=")
+      expect(result).toContain(
+        "CHANGED: tapestry-migration (inline): inline prop removed"
+      )
+    })
   })
 })

package/src/components/link/transforms/removeInlineProp.ts

@@ -1,3 +1,4 @@
+import { addComment } from "../../shared/actions/addComment"
 import { removeAttribute } from "../../shared/actions/removeAttribute"
 import { hasAttribute } from "../../shared/conditions/hasAttribute"
 import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
@@ -6,8 +7,20 @@ const transform = attributeTransformFactory({
   condition: hasAttribute("inline"),
   targetComponent: "Link",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
+  transform: (element, { j, options, source }) => {
     removeAttribute("inline", { element, j, source })
+
+    if (options?.verbose) {
+      addComment({
+        commentKind: "change",
+        element,
+        j,
+        scope: "inline",
+        source,
+        text: "inline prop removed",
+      })
+    }
+
     return true
   },
 })

package/src/components/link/transforms/targetBlankToExternal.test.ts

@@ -5,11 +5,11 @@ import targetBlankToExternal from "./targetBlankToExternal"
 
 const j = jscodeshift.withParser("tsx")
 
-function applyTransform(source: string): string | null {
+function applyTransform(source: string, verbose = false): string | null {
   return targetBlankToExternal(
     { path: "test.tsx", source },
     { j, jscodeshift: j, report: () => {}, stats: () => {} },
-    {}
+    { verbose }
   ) as string | null
 }
 
@@ -201,5 +201,21 @@ export default function Test() {
       expect(result).toContain("external")
       expect(result).not.toContain('target="_blank"')
     })
+
+    it("should add CHANGED comment when verbose is enabled", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/external" target="_blank">External Link</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input, true)
+      expect(result).toContain("external")
+      expect(result).toContain(
+        "CHANGED: tapestry-migration (external): target='_blank' converted to external prop"
+      )
+    })
   })
 })

package/src/components/link/transforms/targetBlankToExternal.ts

@@ -1,4 +1,5 @@
 import { addAttribute } from "../../shared/actions/addAttribute"
+import { addComment } from "../../shared/actions/addComment"
 import { removeAttribute } from "../../shared/actions/removeAttribute"
 import { hasAttributeValue } from "../../shared/conditions/hasAttributeValue"
 import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
@@ -7,14 +8,11 @@ const transform = attributeTransformFactory({
   condition: hasAttributeValue("target", "_blank"),
   targetComponent: "Link",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
-    // Remove target attribute
+  transform: (element, { j, options, source }) => {
     removeAttribute("target", { element, j, source })
 
-    // Remove rel attribute if it exists
     removeAttribute("rel", { element, j, source })
 
-    // Add external attribute as shorthand boolean
     addAttribute({
       booleanAsShorthand: true,
       element,
@@ -23,6 +21,17 @@ const transform = attributeTransformFactory({
       value: true, // This will create just "external" not "external={true}"
     })
 
+    if (options?.verbose) {
+      addComment({
+        commentKind: "change",
+        element,
+        j,
+        scope: "external",
+        source,
+        text: "target='_blank' converted to external prop",
+      })
+    }
+
     return true
   },
 })

package/src/components/link/transforms/toToHref.test.ts

@@ -5,12 +5,12 @@ import transform from "./toToHref"
 
 const j = jscodeshift.withParser("tsx")
 
-function applyTransform(source: string): string | null {
+function applyTransform(source: string, verbose = false): string | null {
   const fileInfo = { path: "test.tsx", source }
   return transform(
     fileInfo,
     { j, jscodeshift: j, report: () => {}, stats: () => {} },
-    {}
+    { verbose }
   ) as string | null
 }
 
@@ -208,6 +208,23 @@ export default function Test({ items }) {
       expect(result).not.toContain("to={item.url}")
       expect(result).not.toContain('to="/conditional"')
     })
+
+    it("should add CHANGED comment when verbose is enabled", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link to="/dashboard">Dashboard</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input, true)
+      expect(result).toContain('href="/dashboard"')
+      expect(result).not.toContain('to="/dashboard"')
+      expect(result).toContain(
+        "CHANGED: tapestry-migration (href): renamed from to"
+      )
+    })
   })
 
   describe("no changes scenarios", () => {

package/src/components/link/transforms/toToHref.ts

@@ -6,8 +6,8 @@ const transform = attributeTransformFactory({
   condition: hasAttribute("to"),
   targetComponent: "Link",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element) => {
-    return transformAttributeName("to", "href", { element })
+  transform: (element, { j, options }) => {
+    return transformAttributeName("to", "href", { element, j, options })
   },
 })
 

package/src/components/shared/actions/addComment.ts

@@ -12,14 +12,16 @@ export function addComment({
   j,
   source,
   scope,
+  commentKind = "todo",
 }: {
+  commentKind?: "todo" | "change"
   element: JSXElement
   j: JSCodeshift
   scope: string
   source: Collection
   text: string
 }) {
-  const commentText = formatComment(text, scope)
+  const commentText = formatComment(text, scope, commentKind)
   if (tryInsertJSXComment(source, element, commentText, j)) {
     return
   }
@@ -64,6 +66,11 @@ function tryInsertJSXComment(
   return found
 }
 
-export function formatComment(text: string, scope: string): string {
-  return ` TODO: tapestry-migration (${scope}): ${text} `
+export function formatComment(
+  text: string,
+  scope: string,
+  commentKind: "todo" | "change" = "todo"
+): string {
+  const prefix = commentKind === "change" ? "CHANGED" : "TODO"
+  return ` ${prefix}: tapestry-migration (${scope}): ${text} `
 }

package/src/components/shared/actions/addCommentToAttribute.ts

@@ -6,8 +6,10 @@ export function addCommentToAttribute({
   text,
   attribute,
   j,
+  commentKind = "todo",
 }: {
   attribute: JSXAttribute | JSXSpreadAttribute
+  commentKind?: "todo" | "change"
   j: JSCodeshift
   text: string
 }) {
@@ -15,7 +17,7 @@ export function addCommentToAttribute({
     ((attribute.type === "JSXAttribute" && attribute.name.name) as string) ||
     "spreadAttribute"
   const comment = j.commentBlock(
-    formatComment(text, attributeName),
+    formatComment(text, attributeName, commentKind),
     true,
     false
   )

package/src/components/shared/actions/transformAttributeName.ts

@@ -1,11 +1,16 @@
-import { JSXElement } from "jscodeshift"
+import { JSCodeshift, JSXElement, Options } from "jscodeshift"
 
 import { findAttribute } from "../findAttribute"
+import { addCommentToAttribute } from "./addCommentToAttribute"
 
 export function transformAttributeName(
   name: string,
   nameTransform: string | ((element: JSXElement) => string),
-  { element }: { element: JSXElement }
+  {
+    element,
+    j,
+    options,
+  }: { element: JSXElement; j?: JSCodeshift; options?: Options }
 ): boolean {
   if (!nameTransform) return false
   const attributes = element.openingElement.attributes || []
@@ -16,5 +21,14 @@ export function transformAttributeName(
     typeof nameTransform === "string" ? nameTransform : nameTransform(element)
   attribute.name.name = resolvedName
 
+  if (options?.verbose && j && attribute.type === "JSXAttribute") {
+    addCommentToAttribute({
+      attribute,
+      commentKind: "change",
+      j,
+      text: `renamed from ${name}`,
+    })
+  }
+
   return true
 }

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

@@ -3,10 +3,12 @@ import {
   JSCodeshift,
   JSXAttribute,
   JSXElement,
+  Options,
   Transform,
 } from "jscodeshift"
 
 import { addAttribute, Conditional } from "../actions/addAttribute"
+import { addCommentToAttribute } from "../actions/addCommentToAttribute"
 import { getAttribute } from "../actions/getAttribute"
 import { removeAttribute } from "../actions/removeAttribute"
 import { hasAttribute } from "../conditions/hasAttribute"
@@ -263,7 +265,11 @@ export function attributeCombineFactory({
     targetPackage: packageName,
     transform: (
       element: JSXElement,
-      { j, source }: { j: JSCodeshift; source: Collection }
+      {
+        j,
+        options,
+        source,
+      }: { j: JSCodeshift; options: Options; source: Collection }
     ) => {
       const attributes: AttributeWithName[] = sourceAttributes.map(
         (name: string) => ({
@@ -294,6 +300,32 @@ export function attributeCombineFactory({
       }
       addAttribute({ element, j, name: targetAttribute, value: mappingResult })
 
+      if (options?.verbose) {
+        const addedAttr = getAttribute({ element, name: targetAttribute })
+        if (addedAttr && addedAttr.type === "JSXAttribute") {
+          const v1 = getAttributeStringValue(
+            attributes[0].attribute,
+            defaults[sourceAttributes[0]] || "",
+            valueNormalizers[sourceAttributes[0]]
+          )
+          const v2 = getAttributeStringValue(
+            attributes[1].attribute,
+            defaults[sourceAttributes[1]] || "",
+            valueNormalizers[sourceAttributes[1]]
+          )
+          const fromParts = [
+            `${sourceAttributes[0]}=${v1 ?? "<unsupported>"}`,
+            `${sourceAttributes[1]}=${v2 ?? "<unsupported>"}`,
+          ]
+          addCommentToAttribute({
+            attribute: addedAttr,
+            commentKind: "change",
+            j,
+            text: `derived from ${fromParts.join(" ")}`,
+          })
+        }
+      }
+
       return true
     },
   })

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

@@ -13,6 +13,7 @@ import {
   stylePropNames,
 } from "../../../../dist/tapestry-react-shim.cjs"
 import { addComment } from "../../shared/actions/addComment"
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
 import { getAttribute } from "../../shared/actions/getAttribute"
 import { removeAttribute } from "../../shared/actions/removeAttribute"
 import { attributeTransformFactory } from "./attributeTransformFactory"
@@ -323,6 +324,25 @@ export function stylePropTransformFactory(config: {
         // Only apply styles if there are actual CSS properties to add
         if (Object.keys(styles).length > 0) {
           applyStylesToComponent({ element, j, styles })
+
+          if (options.verbose) {
+            const styleAttr = getAttribute({ element, name: "style" })
+            if (styleAttr && styleAttr.type === "JSXAttribute") {
+              const folded = Object.keys(allStyleProps)
+              const direct = Object.keys(directStyleProps)
+              const parts = [] as string[]
+              if (folded.length) parts.push(`props: ${folded.join(", ")}`)
+              if (direct.length) parts.push(`direct: ${direct.join(", ")}`)
+              if (parts.length) {
+                addCommentToAttribute({
+                  attribute: styleAttr,
+                  commentKind: "change",
+                  j,
+                  text: `migrated style from ${parts.join("; ")}`,
+                })
+              }
+            }
+          }
         }
       } catch (error) {
         console.log("Error processing style props:", error)

package/src/index.ts

@@ -23,7 +23,7 @@ program
     "-p, --path <path>",
     "REQUIRED: The path to the folder/file to migrate"
   )
-  .option("-f, --fix", "Write the changes to files (default: dry run)")
+  .option("-d, --dry-run", "Preview changes without writing to files")
   .option("-v, --verbose", "Verbose output")
   .option(
     "-j, --js-theme <path>",
@@ -31,7 +31,7 @@ program
   )
   .option(
     "-r, --report-path <path>",
-    "Path for the migration report. Only runs with --fix and does not create a report if no additional changes are required.",
+    "Path for the migration report. Creates a report when running with changes applied and does not create a report if no additional changes are required.",
     "MIGRATION_REPORT.md"
   )
   .action((componentName, options) => {
@@ -41,7 +41,7 @@ program
       console.log(`🎨 Migrating ${componentName} components...`)
       console.log(`📁 Target: ${options.path}`)
       console.log(
-        `🔧 Mode: ${options.fix ? "Apply changes" : "Dry run (preview only)"}`
+        `🔧 Mode: ${options.dryRun ? "Dry run (preview only)" : "Apply changes"}`
       )
       runTransforms(key, options)
     } else {

package/src/jscodeshiftRunner.ts

@@ -34,7 +34,7 @@ export function runTransforms(key: string, options: Options): void {
       "-t",
       transformPath,
       targetPath,
-      options.fix ? "" : "--dry",
+      options.dryRun ? "--dry" : "",
       options.verbose ? "--verbose=2" : "",
       "--parser=tsx",
     ]

package/src/reportGenerator.ts

@@ -12,6 +12,7 @@ interface CommentData {
   line: number
   scope: string
   text: string
+  type: "todo" | "changed"
 }
 
 interface CommentStats {
@@ -20,6 +21,7 @@ interface CommentStats {
   files: string[]
   normalizedText: string
   scope: string
+  type: "todo" | "changed"
   weight: number
 }
 
@@ -60,14 +62,17 @@ function extractCommentsFromFile(filePath: string): CommentData[] {
   // Match both JSX and regular comment formats:
   // {/* TODO: tapestry-migration (scope): text */}
   // /* TODO: tapestry-migration (scope): text */
+  // {/* CHANGED: tapestry-migration (scope): text */}
+  // /* CHANGED: tapestry-migration (scope): text */
   // Use lazy matching with [\s\S]*? to capture everything including * until we hit the closing */
   const commentRegex =
-    /(?:\{\/\*|\/\*)\s*TODO:\s*tapestry-migration\s*\(([^)]+)\):\s*([\s\S]*?)\s*\*\/\}?/g
+    /(?:\{\/\*|\/\*)\s*(TODO|CHANGED):\s*tapestry-migration\s*\(([^)]+)\):\s*([\s\S]*?)\s*\*\/\}?/g
 
   let match
   while ((match = commentRegex.exec(content)) !== null) {
-    const scope = match[1].trim()
-    const text = match[2].trim()
+    const commentType = match[1].trim().toLowerCase() as "todo" | "changed"
+    const scope = match[2].trim()
+    const text = match[3].trim()
 
     // Calculate line number
     const beforeMatch = content.substring(0, match.index)
@@ -78,6 +83,7 @@ function extractCommentsFromFile(filePath: string): CommentData[] {
       line,
       scope,
       text,
+      type: commentType,
     })
   }
 
@@ -228,7 +234,7 @@ function aggregateComments(
 
   for (const comment of comments) {
     const normalizedText = normalizeCommentText(comment.text)
-    const key = `${comment.scope}|||${normalizedText}`
+    const key = `${comment.type}|||${comment.scope}|||${normalizedText}`
 
     if (statsMap.has(key)) {
       const stats = statsMap.get(key)!
@@ -248,6 +254,7 @@ function aggregateComments(
         files: [comment.file],
         normalizedText,
         scope: comment.scope,
+        type: comment.type,
         weight,
       })
     }
@@ -314,6 +321,19 @@ function generateMarkdownReport(
   lines.push(`- **Total Comments:** ${totalComments}`)
   lines.push(`- **Unique Comment Types:** ${uniqueCommentTypes}`)
   lines.push(`- **Affected Files:** ${affectedFiles}`)
+
+  // Add breakdown by comment type
+  const todoComments = allComments.filter((c) => c.type === "todo")
+  const changedComments = allComments.filter((c) => c.type === "changed")
+  lines.push("")
+  lines.push("### Comment Breakdown")
+  lines.push("")
+  lines.push(
+    `- **TODO Comments:** ${todoComments.length} (requires manual attention)`
+  )
+  lines.push(
+    `- **CHANGED Comments:** ${changedComments.length} (automatic transformations)`
+  )
   lines.push("")
   lines.push("### Effort by Difficulty")
   lines.push("")
@@ -343,6 +363,48 @@ function generateMarkdownReport(
     lines.push(`- **${difficulty}:** ${data.count} occurrences`)
   }
 
+  lines.push("")
+  lines.push("## Automatic Changes")
+  lines.push("")
+  lines.push(
+    "The following changes were applied automatically during migration:"
+  )
+  lines.push("")
+
+  const changedStats = stats.filter((s) => s.type === "changed")
+
+  if (changedStats.length > 0) {
+    const changedByScope = new Map<string, CommentStats[]>()
+    for (const stat of changedStats) {
+      if (!changedByScope.has(stat.scope)) {
+        changedByScope.set(stat.scope, [])
+      }
+      changedByScope.get(stat.scope)!.push(stat)
+    }
+
+    for (const [scope, scopeStats] of Array.from(changedByScope.entries()).sort(
+      (a, b) => {
+        const totalA = a[1].reduce((sum, s) => sum + s.count, 0)
+        const totalB = b[1].reduce((sum, s) => sum + s.count, 0)
+        return totalB - totalA
+      }
+    )) {
+      lines.push(`### ${scope}`)
+      lines.push("")
+
+      for (const stat of scopeStats) {
+        lines.push(
+          `- **${stat.normalizedText}** (${stat.count} occurrence${stat.count > 1 ? "s" : ""})`
+        )
+      }
+
+      lines.push("")
+    }
+  } else {
+    lines.push("_No automatic changes were applied._")
+    lines.push("")
+  }
+
   lines.push("")
   lines.push("## Comments by Effort (sorted by total effort)")
   lines.push("")
@@ -373,7 +435,9 @@ function generateMarkdownReport(
     lines.push("")
 
     for (const stat of scopeStats) {
-      lines.push(`#### ${stat.normalizedText}`)
+      const typeLabel = stat.type === "changed" ? "CHANGED" : "TODO"
+      const typeEmoji = stat.type === "changed" ? "✅" : "⚠️"
+      lines.push(`#### ${typeEmoji} [${typeLabel}] ${stat.normalizedText}`)
       lines.push("")
       lines.push(`- **Occurrences:** ${stat.count}`)
       lines.push(`- **Files affected:** ${stat.files.length}`)

package/src/shared/types.ts

@@ -1,5 +1,5 @@
 export interface Options {
-  fix?: boolean
+  dryRun?: boolean
   jsTheme?: string
   path: string
   reportPath?: string