@planningcenter/tapestry-migration-cli 2.4.1 → 2.5.0-rc.2

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-rc.2",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -51,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "465fa2ffd3103c546f66e368859061daf3c7b6c1"
+  "gitHead": "699c1e99cb5f9e0dec6ce4a1558e3f5d17be9e42"
 }

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/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("")
@@ -373,7 +393,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