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

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

@@ -0,0 +1,47 @@
+import { JSXAttribute, Transform } from "jscodeshift"
+
+import { addCommentToUnsupportedProps } from "../../shared/actions/addCommentToUnsupportedProps"
+import { SUPPORTED_PROPS_BASE } from "../../shared/helpers/unsupportedPropsHelpers"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const CHECKBOX_SPECIFIC_PROPS = [
+  "checked",
+  "disabled",
+  "indeterminate",
+  "label",
+  "name",
+  "onChange",
+  "value",
+]
+
+const SUPPORTED_PROPS = [...SUPPORTED_PROPS_BASE, ...CHECKBOX_SPECIFIC_PROPS]
+
+const transform: Transform = attributeTransformFactory({
+  targetComponent: "Checkbox",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const UNSUPPORTED_PROPS = (element.openingElement.attributes || [])
+      .filter(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          !SUPPORTED_PROPS.includes(attr.name.name as string) &&
+          !(attr.name.name as string).startsWith("aria-") &&
+          !(attr.name.name as string).startsWith("data-")
+      )
+      .map((attr) => (attr as JSXAttribute).name.name as string)
+
+    return addCommentToUnsupportedProps({
+      element,
+      j,
+      messageSuffix: (prop) => {
+        if (prop === "css") {
+          return "\n * CSS prop is not supported. Use className or style prop instead.\n"
+        }
+        return ""
+      },
+      props: UNSUPPORTED_PROPS,
+    })
+  },
+})
+
+export default transform

package/src/jscodeshiftRunner.ts

@@ -3,7 +3,11 @@ import { existsSync } from "fs"
 import { dirname, resolve } from "path"
 import { fileURLToPath } from "url"
 
-import { generateMigrationReport, WEIGHT_CONFIGS } from "./reportGenerator"
+import {
+  generateMigrationReport,
+  GLOBAL_MESSAGES,
+  WEIGHT_CONFIGS,
+} from "./reportGenerator"
 import { Options } from "./shared/types"
 
 const __filename = fileURLToPath(import.meta.url)
@@ -45,7 +49,11 @@ export function runTransforms(key: string, options: Options): void {
       stdio: "inherit",
     })
 
+    const message = GLOBAL_MESSAGES[key as keyof typeof GLOBAL_MESSAGES]
+    if (message) console.log(`\n📢 Note: ${message}\n`)
+
     generateMigrationReport({
+      globalMessage: message,
       outputPath: options.reportPath,
       targetPath,
       weightConfig: WEIGHT_CONFIGS[key] || { default: 1 },

package/src/reportGenerator.ts

@@ -23,6 +23,11 @@ interface CommentStats {
   weight: number
 }
 
+export const GLOBAL_MESSAGES = {
+  checkbox:
+    "Checkbox sizes have adjusted. Verify visual appearance as sizes may differ slightly.",
+}
+
 export const WEIGHT_CONFIGS: { [key: string]: WeightConfig } = {
   button: {
     default: 1,
@@ -36,6 +41,13 @@ export const WEIGHT_CONFIGS: { [key: string]: WeightConfig } = {
     tooltip: 2,
     unsupported: 3,
   },
+  checkbox: {
+    children: 2,
+    css: 3,
+    default: 1,
+    label: 2,
+    size: 2,
+  },
 }
 
 /**
@@ -258,7 +270,8 @@ function aggregateComments(
 function generateMarkdownReport(
   stats: CommentStats[],
   allComments: CommentData[],
-  basePath: string
+  basePath: string,
+  globalMessage?: string
 ): string {
   const totalComments = allComments.length
   const uniqueCommentTypes = stats.length
@@ -280,6 +293,7 @@ function generateMarkdownReport(
     "",
     `**Generated:** ${new Date().toISOString()}`,
     "",
+    ...(globalMessage ? [`> 📢 Note: ${globalMessage}`, ""] : []),
     "## Overview",
     "",
   ]
@@ -403,7 +417,9 @@ export function generateMigrationReport({
   targetPath,
   outputPath,
   weightConfig,
+  globalMessage,
 }: {
+  globalMessage?: string
   outputPath?: string
   targetPath: string
   weightConfig: WeightConfig
@@ -430,7 +446,12 @@ export function generateMigrationReport({
   const stats = aggregateComments(allComments, weightConfig)
 
   // Generate markdown report
-  const report = generateMarkdownReport(stats, allComments, targetPath)
+  const report = generateMarkdownReport(
+    stats,
+    allComments,
+    targetPath,
+    globalMessage
+  )
 
   // Determine output path
   const finalOutputPath =