@planningcenter/tapestry-migration-cli 3.1.0-rc.2 → 3.1.0-rc.21

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

@@ -0,0 +1,244 @@
+import { JSXElement, JSXText, Transform } from "jscodeshift"
+
+import { addComment } from "../actions/addComment"
+import { TransformCondition } from "../types"
+import {
+  getImportName,
+  removeImportFromDeclaration,
+} from "./helpers/manageImports"
+
+interface MergeFieldFactoryOptions {
+  condition?: TransformCondition
+  targetComponent: string
+}
+
+export function mergeFieldFactory({
+  condition,
+  targetComponent,
+}: MergeFieldFactoryOptions): Transform {
+  const SCOPE = `mergeFieldInto${targetComponent}`
+
+  const transform: Transform = (fileInfo, api) => {
+    const j = api.jscodeshift
+    const source = j(fileInfo.source)
+
+    const fieldLocalName = getImportName(
+      "Field",
+      "@planningcenter/tapestry-react",
+      { j, source }
+    )
+    if (!fieldLocalName) return null
+
+    const targetLocalName = getImportName(
+      targetComponent,
+      "@planningcenter/tapestry-react",
+      { j, source }
+    )
+    if (!targetLocalName) return null
+
+    let hasChanges = false
+    let anyFieldRemoved = false
+
+    source.find(j.JSXElement).forEach((path) => {
+      const el = path.value
+      const opening = el.openingElement
+
+      if (opening.name.type !== "JSXIdentifier") return
+      if (opening.name.name !== fieldLocalName) return
+
+      const elementChildren = (el.children || []).filter(
+        (child) =>
+          child.type !== "JSXText" || (child as JSXText).value.trim() !== ""
+      )
+
+      const targetChildren = elementChildren.filter((child) => {
+        if (child.type !== "JSXElement") return false
+        const childOpening = (child as JSXElement).openingElement
+        return (
+          childOpening.name.type === "JSXIdentifier" &&
+          childOpening.name.name === targetLocalName
+        )
+      }) as JSXElement[]
+
+      // Case: exactly 1 child and it is the target — merge props and unwrap
+      if (elementChildren.length === 1 && targetChildren.length === 1) {
+        const targetEl = targetChildren[0]
+
+        // Skip if condition fails (e.g. Input with renderLeft/renderRight, Select with multiple)
+        if (condition && !condition(targetEl)) return
+
+        const fieldAttrs = opening.attributes || []
+
+        // Bail out if Field has spread props — we can't know what they contain
+        const hasFieldSpreads = fieldAttrs.some(
+          (attr) => attr.type === "JSXSpreadAttribute"
+        )
+        if (hasFieldSpreads) {
+          addComment({
+            element: targetEl,
+            j,
+            scope: SCOPE,
+            source,
+            text: `Field has spread props that cannot be auto-merged into ${targetComponent}. Please migrate manually.`,
+          })
+          hasChanges = true
+          return
+        }
+
+        for (const attr of fieldAttrs) {
+          if (attr.type !== "JSXAttribute") continue
+          if (attr.name.type !== "JSXIdentifier") continue
+
+          const attrName = attr.name.name
+          const targetAttrs = targetEl.openingElement.attributes || []
+
+          if (attrName === "label") {
+            const hasLabel = targetAttrs.some(
+              (a) =>
+                a.type === "JSXAttribute" &&
+                a.name?.type === "JSXIdentifier" &&
+                a.name.name === "label"
+            )
+            if (hasLabel) {
+              addComment({
+                element: targetEl,
+                j,
+                scope: SCOPE,
+                source,
+                text: `Field had label prop but ${targetComponent} already has label. Please migrate manually.`,
+              })
+            } else {
+              targetEl.openingElement.attributes.push(attr)
+            }
+          } else if (attrName === "feedbackText") {
+            const hasDescription = targetAttrs.some(
+              (a) =>
+                a.type === "JSXAttribute" &&
+                a.name?.type === "JSXIdentifier" &&
+                a.name.name === "description"
+            )
+            if (hasDescription) {
+              addComment({
+                element: targetEl,
+                j,
+                scope: SCOPE,
+                source,
+                text: `Field had feedbackText prop but ${targetComponent} already has description. Please migrate manually.`,
+              })
+            } else {
+              const newAttr = j.jsxAttribute(
+                j.jsxIdentifier("description"),
+                attr.value
+              )
+              targetEl.openingElement.attributes.push(newAttr)
+            }
+          } else if (attrName === "state") {
+            const hasState = targetAttrs.some(
+              (a) =>
+                a.type === "JSXAttribute" &&
+                a.name?.type === "JSXIdentifier" &&
+                a.name.name === "state"
+            )
+            if (hasState) {
+              addComment({
+                element: targetEl,
+                j,
+                scope: SCOPE,
+                source,
+                text: `Field had state prop but ${targetComponent} already has state. Please migrate manually.`,
+              })
+            } else {
+              targetEl.openingElement.attributes.push(attr)
+            }
+          } else if (attrName === "key") {
+            const hasKey = targetAttrs.some(
+              (a) =>
+                a.type === "JSXAttribute" &&
+                a.name?.type === "JSXIdentifier" &&
+                a.name.name === "key"
+            )
+            if (!hasKey) {
+              targetEl.openingElement.attributes.push(attr)
+            }
+          } else {
+            // Unsupported prop — add comment to target
+            addComment({
+              element: targetEl,
+              j,
+              scope: SCOPE,
+              source,
+              text: `Field prop '${attrName}' is not supported by ${targetComponent}. Please migrate manually.`,
+            })
+          }
+        }
+
+        const parent = path.parent?.value
+        if (parent?.children) {
+          const idx = parent.children.indexOf(el)
+          if (idx === -1) return
+          parent.children.splice(idx, 1, ...(el.children || []))
+        } else {
+          // Root JSX (e.g. directly inside return parens) — use path.replace
+          const nonWsChildren = (el.children || []).filter(
+            (child) =>
+              child.type !== "JSXText" || (child as JSXText).value.trim() !== ""
+          )
+          if (nonWsChildren.length === 1) {
+            path.replace(nonWsChildren[0])
+          } else {
+            path.replace(
+              j.jsxFragment(
+                j.jsxOpeningFragment(),
+                j.jsxClosingFragment(),
+                el.children || []
+              )
+            )
+          }
+        }
+        hasChanges = true
+        anyFieldRemoved = true
+        return
+      }
+
+      // Case: more than 1 non-whitespace child — comment each target child, leave Field
+      if (elementChildren.length > 1) {
+        for (const child of targetChildren) {
+          // Skip if condition fails
+          if (condition && !condition(child)) continue
+          addComment({
+            element: child,
+            j,
+            scope: SCOPE,
+            source,
+            text: `Field has multiple children and cannot be auto-merged into ${targetComponent}. Please migrate manually.`,
+          })
+          hasChanges = true
+        }
+        return
+      }
+
+      // Case: exactly 1 child but not the target — skip without comment
+    })
+
+    // Remove Field from imports only if all Field usages were converted
+    if (anyFieldRemoved) {
+      const stillUsesField =
+        source.find(j.JSXOpeningElement, {
+          name: { name: fieldLocalName },
+        }).length > 0
+
+      if (!stillUsesField) {
+        const fieldImports = source.find(j.ImportDeclaration, {
+          source: { value: "@planningcenter/tapestry-react" },
+        })
+        for (let i = 0; i < fieldImports.length; i++) {
+          removeImportFromDeclaration(fieldImports.at(i), "Field")
+        }
+      }
+    }
+
+    return hasChanges ? source.toSource() : null
+  }
+
+  return transform
+}

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

@@ -2,7 +2,9 @@ import { Transform } from "jscodeshift"
 
 import { addCommentToAttribute } from "../actions/addCommentToAttribute"
 import { getAttributeValue } from "../actions/getAttributeValue"
+import { andConditions } from "../conditions/andConditions"
 import { hasAttribute } from "../conditions/hasAttribute"
+import { TransformCondition } from "../types"
 import { attributeTransformFactory } from "./attributeTransformFactory"
 
 /**
@@ -13,16 +15,21 @@ import { attributeTransformFactory } from "./attributeTransformFactory"
  * @param options.targetComponent - The component name to target (e.g., "ToggleSwitch", "Radio")
  * @param options.targetPackage - The package the component is imported from
  * @param options.sizeMapping - Object mapping old size values to new size values (e.g., { xs: "sm", lg: "md" })
+ * @param options.condition - Optional additional condition beyond hasAttribute("size")
  * @returns A Transform function that maps size attributes
  */
 export function sizeMappingFactory(options: {
+  condition?: TransformCondition
   sizeMapping: Record<string, string>
   targetComponent: string
   targetPackage: string
 }): Transform {
-  const { sizeMapping, ...restOptions } = options
+  const { condition, sizeMapping, ...restOptions } = options
+  const baseCondition = hasAttribute("size")
   return attributeTransformFactory({
-    condition: hasAttribute("size"),
+    condition: condition
+      ? andConditions(baseCondition, condition)
+      : baseCondition,
     ...restOptions,
     transform: (element, { j }) => {
       let hasChanges = false

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

@@ -16,6 +16,7 @@ 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 { TransformCondition } from "../types"
 import { attributeTransformFactory } from "./attributeTransformFactory"
 
 type StylePropMapping = Record<
@@ -26,16 +27,12 @@ type StylePropMapping = Record<
   }
 >
 
-// Helper function to extract prop value from JSX attribute
 function extractPropValue(attr: JSXAttribute, j: JSCodeshift) {
   if (!attr.value) {
-    // Boolean prop like <Button disabled />
     return true
   } else if (attr.value.type === "StringLiteral") {
-    // String literal like color="blue"
     return attr.value.value
   } else if (attr.value.type === "JSXExpressionContainer") {
-    // Expression like color={someVar} or color={5}
     const expression = attr.value.expression
     if (expression.type === "StringLiteral") {
       return expression.value
@@ -44,14 +41,11 @@ function extractPropValue(attr: JSXAttribute, j: JSCodeshift) {
     } else if (expression.type === "BooleanLiteral") {
       return expression.value
     } else if (expression.type === "Identifier") {
-      // Variable reference - we'll use the variable name as a placeholder
       return `{${expression.name}}`
     } else {
-      // Complex expression - convert back to string representation
       return `{${j(expression).toSource()}}`
     }
   } else {
-    // Fallback for other types
     return j(attr.value).toSource()
   }
 }
@@ -77,7 +71,6 @@ function processKeepStyleProps({
     const propName = attr.name.name as string
     const propValue = extractPropValue(attr, j)
 
-    // If it's a complex expression (starts and ends with braces), handle it directly
     if (
       typeof propValue === "string" &&
       propValue.startsWith("{") &&
@@ -118,7 +111,6 @@ function processRemoveStyleProps({
   })
 }
 
-// Process props that need style property mappings
 function processStylePropMappings({
   attributes,
   j,
@@ -175,6 +167,7 @@ function applyStylesToComponent({
 }: {
   element: JSXElement
   j: JSCodeshift
+  source: Collection
   styles: Record<string, unknown>
 }) {
   const styleAttr = getAttribute({ element, name: "style" })
@@ -187,11 +180,9 @@ function applyStylesToComponent({
           value.startsWith("{") &&
           value.endsWith("}")
         ) {
-          // This is a complex expression wrapped in braces - parse it as JS
-          const expressionCode = value.slice(1, -1) // Remove surrounding braces
+          const expressionCode = value.slice(1, -1)
           try {
             const parsed = j(expressionCode)
-            // Get the first expression from the program body
             const firstStatement = parsed.find(j.Program).get("body", 0).value
             if (firstStatement?.type === "ExpressionStatement") {
               valueNode = firstStatement.expression
@@ -199,7 +190,6 @@ function applyStylesToComponent({
               valueNode = j.stringLiteral(value)
             }
           } catch {
-            // If parsing fails, fall back to string literal
             valueNode = j.stringLiteral(value)
           }
         } else if (typeof value === "string") {
@@ -214,8 +204,56 @@ function applyStylesToComponent({
   )
 
   if (styleAttr && styleAttr.type === "JSXAttribute") {
-    // TODO: ensure this adds to exisiting style object rather than replacing
-    styleAttr.value = styleValue
+    const existingValue = styleAttr.value
+    if (
+      existingValue?.type === "JSXExpressionContainer" &&
+      existingValue.expression.type === "ObjectExpression"
+    ) {
+      // Case 1: Existing style is a static object literal — merge, new props win
+      const newProps = (
+        styleValue.expression as ReturnType<typeof j.objectExpression>
+      ).properties
+      const newKeys = new Set(
+        newProps
+          .filter((p) => p.type === "ObjectProperty")
+          .map((p) => {
+            const prop = p as ReturnType<typeof j.objectProperty>
+            if (prop.key.type === "Identifier") return prop.key.name
+            if (prop.key.type === "StringLiteral") return prop.key.value
+            return null
+          })
+          .filter(Boolean)
+      )
+      const survivingExisting = existingValue.expression.properties.filter(
+        (p) => {
+          if (p.type === "SpreadElement" || p.type === "RestElement")
+            return true
+          const prop = p as ReturnType<typeof j.objectProperty>
+          if (prop.key.type === "Identifier") return !newKeys.has(prop.key.name)
+          if (prop.key.type === "StringLiteral")
+            return !newKeys.has(prop.key.value)
+          return true
+        }
+      )
+      const mergedObject = j.objectExpression([
+        ...survivingExisting,
+        ...newProps,
+      ])
+      styleAttr.value = j.jsxExpressionContainer(mergedObject)
+    } else if (
+      existingValue?.type === "JSXExpressionContainer" &&
+      existingValue.expression.type !== "JSXEmptyExpression"
+    ) {
+      // Case 2: Dynamic expression — merge via spread: { ...existing, ...computed }
+      const newProps = (
+        styleValue.expression as ReturnType<typeof j.objectExpression>
+      ).properties
+      const mergedObject = j.objectExpression([
+        j.spreadElement(existingValue.expression),
+        ...newProps,
+      ])
+      styleAttr.value = j.jsxExpressionContainer(mergedObject)
+    }
   } else {
     const styleAttr = j.jsxAttribute(j.jsxIdentifier("style"), styleValue)
 
@@ -225,6 +263,7 @@ function applyStylesToComponent({
 }
 
 export function stylePropTransformFactory(config: {
+  condition?: TransformCondition
   plugin?: {
     getStyles: (props: Record<string, unknown>) => Record<string, unknown>
     styleProps: string[]
@@ -321,9 +360,8 @@ export function stylePropTransformFactory(config: {
         styles = { ...styles, ...directStyleProps }
         if (options.verbose) console.log("Final generated styles:", styles)
 
-        // Only apply styles if there are actual CSS properties to add
         if (Object.keys(styles).length > 0) {
-          applyStylesToComponent({ element, j, styles })
+          applyStylesToComponent({ element, j, source, styles })
 
           if (options.verbose) {
             const styleAttr = getAttribute({ element, name: "style" })
@@ -354,6 +392,7 @@ export function stylePropTransformFactory(config: {
   }
 
   return attributeTransformFactory({
+    condition: config.condition,
     targetComponent: config.targetComponent,
     targetPackage: config.targetPackage,
     transform,

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

@@ -0,0 +1,65 @@
+import { Expression, Transform } from "jscodeshift"
+
+import { getAttribute } from "../actions/getAttribute"
+import { removeAttribute } from "../actions/removeAttribute"
+import { TransformCondition } from "../types"
+import { attributeTransformFactory } from "./attributeTransformFactory"
+
+interface TernaryConditionalToPropConfig {
+  condition?: TransformCondition
+  fromProp: string
+  matchValue: string
+  targetComponent: string
+  targetPackage: string
+  toProp: string
+}
+
+export function ternaryConditionalToPropFactory({
+  condition,
+  fromProp,
+  matchValue,
+  targetComponent,
+  targetPackage,
+  toProp,
+}: TernaryConditionalToPropConfig): Transform {
+  return attributeTransformFactory({
+    condition,
+    targetComponent,
+    targetPackage,
+    transform: (element, { j, source }) => {
+      const attr = getAttribute({ element, name: fromProp })
+      if (!attr) return false
+
+      if (attr.value?.type !== "JSXExpressionContainer") return false
+
+      const expr = attr.value.expression
+      if (expr.type !== "ConditionalExpression") return false
+
+      if (
+        expr.consequent.type !== "StringLiteral" ||
+        expr.consequent.value !== matchValue
+      ) {
+        return false
+      }
+
+      const isNullAlternate = expr.alternate.type === "NullLiteral"
+      const isUndefinedAlternate =
+        expr.alternate.type === "Identifier" &&
+        expr.alternate.name === "undefined"
+
+      if (!isNullAlternate && !isUndefinedAlternate) return false
+
+      const testExpr = expr.test as Expression
+
+      removeAttribute(fromProp, { element, j, source })
+      element.openingElement.attributes.push(
+        j.jsxAttribute(
+          j.jsxIdentifier(toProp),
+          j.jsxExpressionContainer(testExpr)
+        )
+      )
+
+      return true
+    },
+  })
+}

package/src/components/text-area/index.ts

@@ -0,0 +1,48 @@
+import { Transform } from "jscodeshift"
+
+import auditSpreadProps from "./transforms/auditSpreadProps"
+import convertStyleProps from "./transforms/convertStyleProps"
+import innerRefToRef from "./transforms/innerRefToRef"
+import mergeFieldIntoTextArea from "./transforms/mergeFieldIntoTextArea"
+import moveTextAreaImport from "./transforms/moveTextAreaImport"
+import removeDuplicateKeys from "./transforms/removeDuplicateKeys"
+import removeRedundantAriaLabel from "./transforms/removeRedundantAriaLabel"
+import sizeMapping from "./transforms/sizeMapping"
+import stateToInvalid from "./transforms/stateToInvalid"
+import stateToInvalidTernary from "./transforms/stateToInvalidTernary"
+import unsupportedProps from "./transforms/unsupportedProps"
+
+const transform: Transform = (fileInfo, api, options) => {
+  let currentSource = fileInfo.source
+  let hasAnyChanges = false
+
+  const transforms = [
+    mergeFieldIntoTextArea,
+    auditSpreadProps,
+    innerRefToRef,
+    stateToInvalidTernary,
+    stateToInvalid,
+    sizeMapping,
+    convertStyleProps,
+    removeDuplicateKeys,
+    removeRedundantAriaLabel,
+    unsupportedProps,
+    moveTextAreaImport,
+  ]
+
+  for (const individualTransform of transforms) {
+    const result = individualTransform(
+      { ...fileInfo, source: currentSource },
+      api,
+      options
+    )
+    if (result && result !== currentSource) {
+      currentSource = result as string
+      hasAnyChanges = true
+    }
+  }
+
+  return hasAnyChanges ? currentSource : null
+}
+
+export default transform

package/src/components/text-area/transforms/auditSpreadProps.test.ts

@@ -0,0 +1,139 @@
+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 TextArea with single spread prop", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <TextArea {...props} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+    })
+
+    it("should add comment to TextArea with multiple spread props", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const baseProps = { onChange: handleChange }
+  const styleProps = { className: "textarea" }
+  return <TextArea {...baseProps} {...styleProps} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...baseProps}")
+      expect(result).toContain("{...styleProps}")
+    })
+
+    it("should handle multiple TextArea components with spread props", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props1 = { onChange: handleChange1 }
+  const props2 = { onChange: handleChange2 }
+  return (
+    <div>
+      <TextArea {...props1} label="Notes" />
+      <TextArea {...props2} label="Comments" />
+    </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 TextArea without spread props", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <TextArea onChange={handleChange} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should not transform if TextArea is not imported from @planningcenter/tapestry-react", () => {
+      const input = `
+import { TextArea } from "other-library"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <TextArea {...props} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should handle TextArea with alias import", () => {
+      const input = `
+import { TextArea as MyTextArea } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <MyTextArea {...props} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(AUDIT_COMMENT)
+      expect(result).toContain("{...props}")
+    })
+
+    it("should return null when no TextArea imports exist", () => {
+      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 return null for empty file", () => {
+      const result = applyTransform("")
+      expect(result).toBe(null)
+    })
+  })
+})