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

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

@@ -12,7 +12,7 @@ import {
   splitStyles,
   stylePropNames,
 } from "../../../../dist/tapestry-react-shim.cjs"
-import { addComment } from "../../shared/actions/addComment"
+import { addComment, formatComment } from "../../shared/actions/addComment"
 import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
 import { getAttribute } from "../../shared/actions/getAttribute"
 import { removeAttribute } from "../../shared/actions/removeAttribute"
@@ -27,6 +27,49 @@ type StylePropMapping = Record<
   }
 >
 
+// JSX expression values bypass splitStyles, so we mirror its plugin behavior
+// for props that bypass it. Pure key renames pass through live; everything
+// else gets commented out under the css target(s) so the developer can verify
+// the value before enabling.
+const liveAliases: Record<string, string> = {
+  column: "gridColumn",
+  columnEnd: "gridColumnEnd",
+  columnStart: "gridColumnStart",
+  direction: "flexDirection",
+  row: "gridRow",
+  rowEnd: "gridRowEnd",
+  rowStart: "gridRowStart",
+}
+
+const commentedAliases: Record<string, string[]> = {
+  basis: ["flexBasis"],
+  elevation: ["boxShadow"],
+  grow: ["flexGrow"],
+  marginHorizontal: ["marginLeft", "marginRight"],
+  marginVertical: ["marginTop", "marginBottom"],
+  paddingHorizontal: ["paddingLeft", "paddingRight"],
+  paddingVertical: ["paddingTop", "paddingBottom"],
+  radius: [
+    "borderTopLeftRadius",
+    "borderTopRightRadius",
+    "borderBottomRightRadius",
+    "borderBottomLeftRadius",
+  ],
+  radiusBottom: ["borderBottomRightRadius", "borderBottomLeftRadius"],
+  radiusLeft: ["borderTopLeftRadius", "borderBottomLeftRadius"],
+  radiusRight: ["borderTopRightRadius", "borderBottomRightRadius"],
+  radiusTop: ["borderTopLeftRadius", "borderTopRightRadius"],
+  rotate: ["transform"],
+  scale: ["transform"],
+  shrink: ["flexShrink"],
+  strokeAlign: ["strokeAlign"],
+  strokeWeight: ["strokeWeight"],
+  uppercase: ["textTransform"],
+  wrap: ["flexWrap"],
+  x: ["transform"],
+  y: ["transform"],
+}
+
 function extractPropValue(attr: JSXAttribute, j: JSCodeshift) {
   if (!attr.value) {
     return true
@@ -50,22 +93,36 @@ function extractPropValue(attr: JSXAttribute, j: JSCodeshift) {
   }
 }
 
+type ManualReviewEntry = {
+  cssTargets: string[]
+  originalProp: string
+  originalValue: string
+}
+
+function reviewHeading(entry: ManualReviewEntry) {
+  return `migrated from \`${entry.originalProp}\`; value may need manual transformation`
+}
+
+function reviewBody(entry: ManualReviewEntry) {
+  return entry.cssTargets.map((key) => `${key}: ${entry.originalValue}`)
+}
+
 function processKeepStyleProps({
   attributes,
   j,
-  element,
-  source,
 }: {
   attributes: JSXAttribute[]
-  element: JSXElement
   j: JSCodeshift
-  source: Collection
 }): {
   directProps: Record<string, unknown>
+  manualReviewEntries: ManualReviewEntry[]
+  processedNames: string[]
   themeProps: Record<string, unknown>
 } {
   const themeProps: Record<string, unknown> = {}
   const directProps: Record<string, unknown> = {}
+  const manualReviewEntries: ManualReviewEntry[] = []
+  const processedNames: string[] = []
 
   attributes.forEach((attr) => {
     const propName = attr.name.name as string
@@ -76,15 +133,32 @@ function processKeepStyleProps({
       propValue.startsWith("{") &&
       propValue.endsWith("}")
     ) {
-      directProps[propName] = propValue
+      if (propName in commentedAliases) {
+        manualReviewEntries.push({
+          cssTargets: commentedAliases[propName],
+          originalProp: propName,
+          originalValue: propValue.slice(1, -1),
+        })
+      } else {
+        directProps[liveAliases[propName] ?? propName] = propValue
+      }
     } else {
       themeProps[propName] = propValue
     }
 
-    removeAttribute(propName, { element, j, source })
+    processedNames.push(propName)
   })
 
-  return { directProps, themeProps }
+  return { directProps, manualReviewEntries, processedNames, themeProps }
+}
+
+function isInlineableStyleValue(value: unknown): boolean {
+  return (
+    value === null ||
+    typeof value === "string" ||
+    typeof value === "number" ||
+    typeof value === "boolean"
+  )
 }
 
 function processRemoveStyleProps({
@@ -160,20 +234,36 @@ function processStylePropMappings({
   return styleProps
 }
 
+function buildManualReviewComments(
+  entries: ManualReviewEntry[],
+  j: JSCodeshift
+) {
+  return entries.flatMap((entry) => [
+    j.commentBlock(
+      formatComment(reviewHeading(entry), "styleProp"),
+      true,
+      false
+    ),
+    ...reviewBody(entry).map((line) => j.commentLine(` ${line},`)),
+  ])
+}
+
 function applyStylesToComponent({
   j,
   element,
   styles,
+  manualReviewEntries = [],
 }: {
   element: JSXElement
   j: JSCodeshift
+  manualReviewEntries?: ManualReviewEntry[]
   source: Collection
   styles: Record<string, unknown>
 }) {
   const styleAttr = getAttribute({ element, name: "style" })
   const styleValue = j.jsxExpressionContainer(
     j.objectExpression(
-      Object.entries(styles).map(([key, value]) => {
+      Object.entries(styles).map(([key, value], index) => {
         let valueNode
         if (
           typeof value === "string" &&
@@ -198,7 +288,11 @@ function applyStylesToComponent({
           valueNode = j.literal(value as string | number | boolean | null)
         }
 
-        return j.objectProperty(j.identifier(key), valueNode)
+        const property = j.objectProperty(j.identifier(key), valueNode)
+        if (index === 0 && manualReviewEntries.length > 0) {
+          property.comments = buildManualReviewComments(manualReviewEntries, j)
+        }
+        return property
       })
     )
   )
@@ -286,6 +380,7 @@ export function stylePropTransformFactory(config: {
     const allAttributes = element.openingElement.attributes || []
     let allStyleProps: Record<string, unknown> = {}
     let directStyleProps: Record<string, unknown> = {}
+    const manualReviewEntries: ManualReviewEntry[] = []
     const attributes = allAttributes.filter((attr) => {
       if (attr.type !== "JSXAttribute") return false
       const name = attr.name?.name as string
@@ -307,9 +402,7 @@ export function stylePropTransformFactory(config: {
     )
     const keepResult = processKeepStyleProps({
       attributes: keepAttributes,
-      element,
       j,
-      source,
     })
     allStyleProps = {
       ...allStyleProps,
@@ -319,6 +412,7 @@ export function stylePropTransformFactory(config: {
       ...directStyleProps,
       ...keepResult.directProps,
     }
+    manualReviewEntries.push(...keepResult.manualReviewEntries)
 
     allStyleProps = {
       ...allStyleProps,
@@ -343,7 +437,8 @@ export function stylePropTransformFactory(config: {
 
     if (
       Object.keys(allStyleProps).length > 0 ||
-      Object.keys(directStyleProps).length > 0
+      Object.keys(directStyleProps).length > 0 ||
+      manualReviewEntries.length > 0
     ) {
       try {
         let styles: Record<string, unknown> = {}
@@ -360,8 +455,39 @@ export function stylePropTransformFactory(config: {
         styles = { ...styles, ...directStyleProps }
         if (options.verbose) console.log("Final generated styles:", styles)
 
-        if (Object.keys(styles).length > 0) {
-          applyStylesToComponent({ element, j, source, styles })
+        // Plugins like stackViewPlugin can emit nested CSS selectors (e.g.
+        // `{ "& > *": { flex: "1 0 0px" } }` from `distribution: "fill"`)
+        // that can't be represented in React's inline `style={}`. Preserve
+        // the source props so nothing is silently dropped and flag for review.
+        const nonInlineableKeys = Object.entries(styles)
+          .filter(([, v]) => !isInlineableStyleValue(v))
+          .map(([k]) => k)
+        if (nonInlineableKeys.length > 0) {
+          addComment({
+            element,
+            j,
+            scope: "styleProp",
+            source,
+            text: `Could not migrate style props (${keepResult.processedNames.join(
+              ", "
+            )}) — produced non-inlineable style values (${nonInlineableKeys.join(
+              ", "
+            )}) that don't fit in inline style (for example, nested selectors). Manual review required.`,
+          })
+        } else {
+          for (const propName of keepResult.processedNames) {
+            removeAttribute(propName, { element, j, source })
+          }
+        }
+
+        if (nonInlineableKeys.length === 0 && Object.keys(styles).length > 0) {
+          applyStylesToComponent({
+            element,
+            j,
+            manualReviewEntries,
+            source,
+            styles,
+          })
 
           if (options.verbose) {
             const styleAttr = getAttribute({ element, name: "style" })
@@ -381,6 +507,21 @@ export function stylePropTransformFactory(config: {
               }
             }
           }
+        } else if (
+          nonInlineableKeys.length === 0 &&
+          manualReviewEntries.length > 0
+        ) {
+          // No anchoring property in the style block — emit each manual-review
+          // entry as a JSX-level TODO comment instead.
+          for (const entry of manualReviewEntries) {
+            addComment({
+              element,
+              j,
+              scope: "styleProp",
+              source,
+              text: `${reviewHeading(entry)}: ${reviewBody(entry).join("; ")}`,
+            })
+          }
         }
       } catch (error) {
         console.log("Error processing style props:", error)

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

@@ -35,27 +35,32 @@ export function ternaryConditionalToPropFactory({
       const expr = attr.value.expression
       if (expr.type !== "ConditionalExpression") return false
 
-      if (
-        expr.consequent.type !== "StringLiteral" ||
-        expr.consequent.value !== matchValue
-      ) {
-        return false
-      }
+      const isNullish = (node: Expression) =>
+        node.type === "NullLiteral" ||
+        (node.type === "Identifier" && node.name === "undefined")
 
-      const isNullAlternate = expr.alternate.type === "NullLiteral"
-      const isUndefinedAlternate =
-        expr.alternate.type === "Identifier" &&
-        expr.alternate.name === "undefined"
+      const isMatchString = (node: Expression) =>
+        node.type === "StringLiteral" && node.value === matchValue
 
-      if (!isNullAlternate && !isUndefinedAlternate) return false
+      const matchInConsequent =
+        isMatchString(expr.consequent as Expression) &&
+        isNullish(expr.alternate as Expression)
+      const matchInAlternate =
+        isMatchString(expr.alternate as Expression) &&
+        isNullish(expr.consequent as Expression)
+
+      if (!matchInConsequent && !matchInAlternate) return false
 
       const testExpr = expr.test as Expression
+      const propValue = matchInConsequent
+        ? testExpr
+        : j.unaryExpression("!", testExpr)
 
       removeAttribute(fromProp, { element, j, source })
       element.openingElement.attributes.push(
         j.jsxAttribute(
           j.jsxIdentifier(toProp),
-          j.jsxExpressionContainer(testExpr)
+          j.jsxExpressionContainer(propValue)
         )
       )
 

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

@@ -96,6 +96,32 @@ function Test() {
     })
   })
 
+  describe("import conflict handling", () => {
+    it("should use TTextArea alias when TextArea is already imported from another package", () => {
+      const input = `
+import { TextArea } from "some-other-library"
+import { TextArea as ReactTextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <TextArea />
+      <ReactTextArea label="Notes" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('import { TextArea } from "some-other-library"')
+      expect(result).toContain(
+        'import { TextArea as TTextArea } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<TTextArea")
+      expect(result).not.toContain("ReactTextArea")
+    })
+  })
+
   describe("edge cases", () => {
     it("should handle already migrated imports", () => {
       const input = `

package/src/components/text-area/transforms/moveTextAreaImport.ts

@@ -4,6 +4,7 @@ import { componentTransformFactory } from "../../shared/transformFactories/compo
 
 const transform: Transform = componentTransformFactory({
   condition: () => true,
+  conflictAlias: "TTextArea",
   fromComponent: "TextArea",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "TextArea",

package/src/components/time-field/index.ts

@@ -0,0 +1,48 @@
+import { Transform } from "jscodeshift"
+
+import auditSpreadProps from "./transforms/auditSpreadProps"
+import convertStyleProps from "./transforms/convertStyleProps"
+import flagMinMax from "./transforms/flagMinMax"
+import mergeFieldIntoTimeField from "./transforms/mergeFieldIntoTimeField"
+import moveTimeFieldImport from "./transforms/moveTimeFieldImport"
+import sizeMapping from "./transforms/sizeMapping"
+import stateToInvalid from "./transforms/stateToInvalid"
+import stateToInvalidTernary from "./transforms/stateToInvalidTernary"
+import tupleToTime from "./transforms/tupleToTime"
+import twelveHourClockToHourCycle from "./transforms/twelveHourClockToHourCycle"
+import unsupportedProps from "./transforms/unsupportedProps"
+
+const transform: Transform = (fileInfo, api, options) => {
+  let currentSource = fileInfo.source
+  let hasAnyChanges = false
+
+  const transforms = [
+    mergeFieldIntoTimeField,
+    auditSpreadProps,
+    sizeMapping,
+    stateToInvalidTernary,
+    stateToInvalid,
+    twelveHourClockToHourCycle,
+    tupleToTime,
+    flagMinMax,
+    convertStyleProps,
+    unsupportedProps,
+    moveTimeFieldImport,
+  ]
+
+  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/time-field/transforms/auditSpreadProps.test.ts

@@ -0,0 +1,76 @@
+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", () => {
+  it("adds comment to TimeField with spread props", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <TimeField {...props} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain(AUDIT_COMMENT)
+    expect(result).toContain("{...props}")
+  })
+
+  it("returns null when TimeField has no spread props", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <TimeField value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(null)
+  })
+
+  it("returns null when TimeField is from another package", () => {
+    const input = `
+import { TimeField } from "other-library"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <TimeField {...props} value={time} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(null)
+  })
+
+  it("returns null when TimeField is not imported at all", () => {
+    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)
+  })
+})

package/src/components/time-field/transforms/auditSpreadProps.ts

@@ -0,0 +1,10 @@
+import { Transform } from "jscodeshift"
+
+import { commentOnSpreadPropsFactory } from "../../shared/transformFactories/commentOnSpreadPropsFactory"
+
+const transform: Transform = commentOnSpreadPropsFactory({
+  targetComponent: "TimeField",
+  targetPackage: "@planningcenter/tapestry-react",
+})
+
+export default transform

package/src/components/time-field/transforms/convertStyleProps.test.ts

@@ -0,0 +1,43 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./convertStyleProps"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("convertStyleProps transform", () => {
+  it("returns null when TimeField has no style props", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBeNull()
+  })
+
+  it("does not affect TimeField from other packages", () => {
+    const input = `
+import { TimeField } from "some-other-lib"
+
+function Test() {
+  return <TimeField p={2} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBeNull()
+  })
+})

package/src/components/time-field/transforms/convertStyleProps.ts

@@ -0,0 +1,10 @@
+import { stackViewPlugin } from "../../../stubs/stackViewPlugin"
+import { stylePropTransformFactory } from "../../shared/transformFactories/stylePropTransformFactory"
+
+export default stylePropTransformFactory({
+  plugin: stackViewPlugin,
+  stylesToKeep: [],
+  stylesToRemove: [],
+  targetComponent: "TimeField",
+  targetPackage: "@planningcenter/tapestry-react",
+})

package/src/components/time-field/transforms/flagMinMax.test.ts

@@ -0,0 +1,103 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./flagMinMax"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("flagMinMax transform", () => {
+  it("adds TODO comment to min prop", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField min={9} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).toContain("TODO: tapestry-migration (min)")
+    expect(result).toContain("TimeValue")
+    expect(result).toContain("min={9}")
+  })
+
+  it("adds TODO comment to max prop", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField max={17} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).toContain("TODO: tapestry-migration (max)")
+    expect(result).toContain("TimeValue")
+    expect(result).toContain("max={17}")
+  })
+
+  it("flags both min and max when present", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField min={9} max={17} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    expect(result).toContain("TODO: tapestry-migration (min)")
+    expect(result).toContain("TODO: tapestry-migration (max)")
+  })
+
+  it("returns null when neither min nor max is present", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBeNull()
+  })
+
+  it("does not affect other components", () => {
+    const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input min={1} max={10} label="Count" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBeNull()
+  })
+
+  it("does not affect TimeField from other packages", () => {
+    const input = `
+import { TimeField } from "some-other-lib"
+
+function Test() {
+  return <TimeField min={9} max={17} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBeNull()
+  })
+})