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

package/src/components/shared/transformFactories/componentTransformFactory.test.ts

@@ -1,7 +1,90 @@
+import jscodeshift from "jscodeshift"
 import { describe, expect, it } from "vitest"
 
+import { componentTransformFactory } from "./componentTransformFactory"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  return componentTransformFactory({
+    condition: () => true,
+    fromComponent: "Link.Inline",
+    fromPackage: "@planningcenter/tapestry-react",
+    toComponent: "Link",
+    toPackage: "@planningcenter/tapestry-react",
+  })(fileInfo, { j, jscodeshift: j, report: () => {}, stats: () => {} }, {}) as
+    | string
+    | null
+}
+
 describe("componentTransformFactory", () => {
-  it("is a placeholder test", () => {
-    expect(true).toBe(true)
+  it("should transform Link.Inline to Link", () => {
+    const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link.Inline>Test</Link.Inline>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("<Link>Test</Link>")
+    expect(result).not.toContain("<Link.Inline>")
+  })
+
+  it("should handle multiple Link.Inline elements", () => {
+    const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link.Inline>First</Link.Inline>
+      <Link.Inline>Second</Link.Inline>
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("<Link>First</Link>")
+    expect(result).toContain("<Link>Second</Link>")
+    expect(result).not.toContain("<Link.Inline>")
+  })
+
+  it("should not transform other member expressions", () => {
+    const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link.Inline>Inline</Link.Inline>
+      <Link.Primary>Primary</Link.Primary>
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("<Link>Inline</Link>")
+    expect(result).toContain("<Link.Primary>Primary</Link.Primary>")
+    expect(result).not.toContain("<Link.Inline>")
+  })
+
+  it("should preserve original component name when removing member expressions", () => {
+    const input = `
+import { Link as TapestryLink } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <TapestryLink.Inline>Test</TapestryLink.Inline>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("<TapestryLink>Test</TapestryLink>")
+    expect(result).not.toContain("<TapestryLink.Inline>")
+    expect(result).not.toContain("<Link>")
   })
 })

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

@@ -2,6 +2,7 @@ import { Transform } from "jscodeshift"
 
 import { transformElementName } from "../actions/transformElementName"
 import { TransformCondition } from "../types"
+import { findJSXElements } from "./helpers/findJSXElements"
 import {
   getImportName,
   hasConflictingImport,
@@ -17,7 +18,7 @@ export function componentTransformFactory(config: {
   condition: TransformCondition
   /** Optional alias to use if target component conflicts with existing imports */
   conflictAlias?: string
-  /** The source component name to transform from */
+  /** The source component name to transform from (supports member expressions like "Link.Inline") */
   fromComponent: string
   /** The package to import the source component from */
   fromPackage: string
@@ -31,44 +32,62 @@ export function componentTransformFactory(config: {
     const source = j(fileInfo.source)
     let hasChanges = false
 
+    // Parse the fromComponent to handle member expressions
+    const [fromComponentName, fromComponentExpression] =
+      config.fromComponent.split(".")
+
     // Get the local name of the source component
-    const sourceComponentName = getImportName(
-      config.fromComponent,
+    const sourceComponentLocalName = getImportName(
+      fromComponentName,
       config.fromPackage,
       { j, source }
     )
 
     // Only proceed if source component is imported
-    if (!sourceComponentName) {
+    if (!sourceComponentLocalName) {
       return null
     }
 
-    const hasConflict = hasConflictingImport(
-      config.toComponent,
-      [config.fromPackage, config.toPackage],
-      { j, source }
-    )
+    // Determine the target component name
+    // If we're removing a member expression (same base name), preserve the original component name
+    const isRemovingMemberExpression =
+      fromComponentExpression && fromComponentName === config.toComponent
 
-    const targetComponentName = hasConflict
-      ? config.conflictAlias || `T${config.toComponent}`
-      : config.toComponent
+    let targetComponentName: string
+    if (isRemovingMemberExpression) {
+      // Preserve the original component name (e.g., TapestryLink.Inline → TapestryLink)
+      targetComponentName = sourceComponentLocalName
+    } else {
+      // Use the specified toComponent (e.g., Button → TapestryButton)
+      const hasConflict = hasConflictingImport(
+        config.toComponent,
+        [config.fromPackage, config.toPackage],
+        { j, source }
+      )
+      targetComponentName = hasConflict
+        ? config.conflictAlias || `T${config.toComponent}`
+        : config.toComponent
+    }
 
     // Transform matching JSX elements
-    source
-      .find(j.JSXOpeningElement, { name: { name: sourceComponentName } })
-      .forEach((path) => {
-        const element = path.parent.value
+    findJSXElements(
+      source,
+      j,
+      config.fromComponent,
+      sourceComponentLocalName
+    ).forEach((path) => {
+      const element = path.parent.value
 
-        if (config.condition(element)) {
-          if (transformElementName({ element, name: targetComponentName })) {
-            hasChanges = true
-          }
+      if (config.condition(element)) {
+        if (transformElementName({ element, name: targetComponentName })) {
+          hasChanges = true
         }
-      })
+      }
+    })
 
     if (hasChanges) {
       // Handle import management
-      manageImports(source, config, sourceComponentName, targetComponentName, j)
+      manageImports(source, config, fromComponentName, targetComponentName, j)
     }
 
     return hasChanges ? source.toSource() : null

package/src/components/shared/transformFactories/helpers/findJSXElements.ts

@@ -0,0 +1,37 @@
+import { Collection, JSCodeshift, JSXElement } from "jscodeshift"
+
+/**
+ * Helper function to find JSX elements, supporting both regular components and member expressions
+ */
+export function findJSXElements(
+  source: Collection,
+  j: JSCodeshift,
+  componentName: string,
+  localComponentName: string
+) {
+  // Parse the component name to handle member expressions
+  const [, memberExpression] = componentName.split(".")
+
+  if (memberExpression) {
+    // Find member expressions (e.g., Link.Inline)
+    return source
+      .find(j.JSXOpeningElement, {
+        name: {
+          object: { name: localComponentName },
+          type: "JSXMemberExpression",
+        },
+      })
+      .filter((path) => {
+        const element = path.parent.value as JSXElement
+        return (
+          element.openingElement.name.type === "JSXMemberExpression" &&
+          element.openingElement.name.property.name === memberExpression
+        )
+      })
+  } else {
+    // Find regular components (e.g., Link)
+    return source.find(j.JSXOpeningElement, {
+      name: { name: localComponentName },
+    })
+  }
+}

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

@@ -108,7 +108,8 @@ function processRemoveStyleProps({
     const propName = attr.name.name as string
     removeAttribute(propName, {
       buildComment: (name, value) =>
-        `${name} has been removed as this is covered by default styling: ${name}: ${value}`,
+        `${name} has been removed as this is covered by default styling: ${name}=${value}`,
+      commentScope: "styleProp",
       element,
       j,
       source,
@@ -299,7 +300,6 @@ export function stylePropTransformFactory(config: {
       source,
     })
 
-    // Convert collected style props to CSS if any exist
     if (
       Object.keys(allStyleProps).length > 0 ||
       Object.keys(directStyleProps).length > 0
@@ -307,7 +307,6 @@ export function stylePropTransformFactory(config: {
       try {
         let styles: Record<string, unknown> = {}
 
-        // Process theme props through the theme system
         if (Object.keys(allStyleProps).length > 0) {
           const result = splitStyles({
             ...allStyleProps,
@@ -317,11 +316,9 @@ export function stylePropTransformFactory(config: {
           styles = { ...styles, ...(cssObject[0] || {}) }
         }
 
-        // Add direct props without theme processing
         styles = { ...styles, ...directStyleProps }
         if (options.verbose) console.log("Final generated styles:", styles)
 
-        // Apply the styles to the component
         applyStylesToComponent({ element, j, styles })
       } catch (error) {
         console.log("Error processing style props:", error)
@@ -329,28 +326,6 @@ export function stylePropTransformFactory(config: {
       }
     }
 
-    // Add new attributes from replacements and mappings
-    // const allNewAttributes = [...mappingResult.newAttributes]
-    // if (allNewAttributes.length > 0) {
-    //   path.value.attributes = path.value.attributes || []
-    //   path.value.attributes.push(...allNewAttributes)
-    //   hasChanges = true
-    // }
-
-    // Check for unhandled style props before removing processed attributes
-    // const mappingPropNames = Object.keys(STYLE_PROP_MAPPINGS)
-    // processUnhandledProps(
-    //   j,
-    //   path,
-    //   attributes,
-    //   KEEP_STYLE_PROPS,
-    //   REMOVE_STYLE_PROPS,
-    //   mappingPropNames,
-    //   stylePropNames,
-    //   options,
-    //   fileInfo
-    // )
-
     return attributes.length + removeAttributes.length > 0
   }
 

package/src/components/shared/types.ts

@@ -1,6 +1,24 @@
-import { JSXElement } from "jscodeshift"
+import {
+  ASTPath,
+  Collection,
+  JSCodeshift,
+  JSXElement,
+  JSXOpeningElement,
+} from "jscodeshift"
 
 /**
  * Condition function that determines whether a JSX element should be transformed
  */
 export type TransformCondition = (element: JSXElement) => boolean
+
+/**
+ * Transform function for JSX elements
+ */
+export type TransformFunction = (
+  element: JSXElement,
+  resources: {
+    j: JSCodeshift
+    path: ASTPath<JSXOpeningElement>
+    source: Collection
+  }
+) => boolean

package/src/index.ts

@@ -10,19 +10,24 @@ program
   .name("tapestry-migration-cli")
   .description("CLI tool for Tapestry migrations")
 
-const COMPONENTS = ["button"]
+const COMPONENTS = ["button", "link"]
 
 program
   .command("run")
   .description("Run a migration of a component from Tapestry React to Tapestry")
   .argument("<component-name>", "The name of the component to migrate")
   .option("-f, --fix", "Write the changes")
-  .option("-p, --path <path>", "The path to the folder/file to migrate")
+  .requiredOption("-p, --path <path>", "The path to the folder/file to migrate")
   .option("-v, --verbose", "Verbose output")
   .option(
     "-j, --js-theme <path>",
     "Path to JavaScript theme file containing design tokens"
   )
+  .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.",
+    "MIGRATION_REPORT.md"
+  )
   .action((componentName, options) => {
     console.log("Hello from Tapestry Migration CLI! 🎨")
     console.log(`Component: ${componentName}`)

package/src/jscodeshiftRunner.ts

@@ -3,6 +3,7 @@ import { existsSync } from "fs"
 import { dirname, resolve } from "path"
 import { fileURLToPath } from "url"
 
+import { generateMigrationReport, WEIGHT_CONFIGS } from "./reportGenerator"
 import { Options } from "./shared/types"
 
 const __filename = fileURLToPath(import.meta.url)
@@ -43,6 +44,12 @@ export function runTransforms(key: string, options: Options): void {
       env: process.env,
       stdio: "inherit",
     })
+
+    generateMigrationReport({
+      outputPath: options.reportPath,
+      targetPath,
+      weightConfig: WEIGHT_CONFIGS[key] || { default: 1 },
+    })
   } catch (error) {
     console.error("❌ Transform failed:", error)
   }