@planningcenter/tapestry-migration-cli 3.6.0 → 3.7.0-rc.0

package/src/components/flex/transforms/paddingPropsToFlex.test.ts

@@ -0,0 +1,252 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./paddingPropsToFlex"
+
+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("paddingPropsToFlex transform", () => {
+  it("leaves a valid scale-number padding unchanged", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView padding={2}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+
+  it('converts padding="0" to padding={0}', () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView padding="0">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("padding={0}")
+    expect(result).not.toContain('padding="0"')
+    expect(result).not.toContain("TODO")
+  })
+
+  it("converts a pixel string to the corresponding spacing token", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView padding="8px">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("padding={1}")
+    expect(result).not.toContain('padding="8px"')
+    expect(result).not.toContain("TODO")
+  })
+
+  it("converts all pixel values in the scale", () => {
+    const cases: Array<[string, number]> = [
+      ["0px", 0],
+      ["2px", 0.25],
+      ["4px", 0.5],
+      ["8px", 1],
+      ["12px", 1.5],
+      ["16px", 2],
+      ["24px", 3],
+      ["32px", 4],
+      ["40px", 5],
+      ["48px", 6],
+      ["56px", 7],
+    ]
+    for (const [px, token] of cases) {
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView padding="${px}">Test</StackView>
+}
+      `.trim()
+      const result = applyTransform(input)
+      expect(result, `${px} should map to ${token}`).toContain(
+        `padding={${token}}`
+      )
+    }
+  })
+
+  it("adds a TODO on the padding attribute for a value that cannot be mapped", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView padding="10px">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toMatch(/\/\*.*TODO.*\*\/\s*padding="10px"/)
+  })
+
+  it("renames paddingHorizontal to paddingInline for a valid scale number", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView paddingHorizontal={2}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("paddingInline={2}")
+    expect(result).not.toContain("paddingHorizontal")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("renames paddingHorizontal and converts a pixel string", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView paddingHorizontal="16px">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("paddingInline={2}")
+    expect(result).not.toContain("paddingHorizontal")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("renames paddingHorizontal to paddingInline and adds a TODO for an unmappable value", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView paddingHorizontal="1rem">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("paddingInline")
+    expect(result).not.toContain("paddingHorizontal")
+    expect(result).toMatch(/TODO/)
+  })
+
+  it("renames paddingHorizontal to paddingInline without a TODO when both ternary branches are valid scale numbers", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView paddingHorizontal={isNarrow ? 2 : 6}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("paddingInline")
+    expect(result).not.toContain("paddingHorizontal")
+    expect(result).not.toMatch(/TODO/)
+  })
+
+  it("renames paddingHorizontal to paddingInline without a TODO when one ternary branch is null", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView paddingHorizontal={isRoom ? null : 2}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("paddingInline")
+    expect(result).not.toContain("paddingHorizontal")
+    expect(result).not.toMatch(/TODO/)
+  })
+
+  it("renames paddingVertical to paddingBlock for a valid scale number", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView paddingVertical={1}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("paddingBlock={1}")
+    expect(result).not.toContain("paddingVertical")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("renames paddingVertical and converts a pixel string", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView paddingVertical="8px">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("paddingBlock={1}")
+    expect(result).not.toContain("paddingVertical")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("renames paddingVertical to paddingBlock without a TODO when both ternary branches are valid scale numbers", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView paddingVertical={isNarrow ? 1 : 3}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("paddingBlock")
+    expect(result).not.toContain("paddingVertical")
+    expect(result).not.toMatch(/TODO/)
+  })
+
+  it("leaves padding with a valid-scale ternary unchanged", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView padding={isNarrow ? 2 : 6}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+
+  it("leaves padding with a null ternary branch unchanged", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView padding={isRoom ? null : 2}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+
+  it("returns null when StackView has no padding props", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView axis="horizontal">Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+
+  it("returns null when StackView is not imported from tapestry-react", () => {
+    const input = `
+import { StackView } from "some-other-package"
+export default function Test() {
+  return <StackView padding="8px">Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+})

package/src/components/flex/transforms/paddingPropsToFlex.ts

@@ -0,0 +1,150 @@
+import { JSXAttribute } from "jscodeshift"
+
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { orConditions } from "../../shared/conditions/orConditions"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const PADDING_SCALE = new Set([0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 7])
+
+const PIXEL_TO_TOKEN: Record<string, number> = {
+  "0": 0,
+  "0px": 0,
+  "2px": 0.25,
+  "4px": 0.5,
+  "8px": 1,
+  "12px": 1.5,
+  "16px": 2,
+  "24px": 3,
+  "32px": 4,
+  "40px": 5,
+  "48px": 6,
+  "56px": 7,
+}
+
+function isScaleNumber(node: unknown): boolean {
+  return (
+    typeof node === "object" &&
+    node !== null &&
+    (node as { type: string }).type === "NumericLiteral" &&
+    PADDING_SCALE.has((node as { value: number }).value)
+  )
+}
+
+function isNullLiteral(node: unknown): boolean {
+  return (
+    typeof node === "object" &&
+    node !== null &&
+    (node as { type: string }).type === "NullLiteral"
+  )
+}
+
+function resolveToSpacingToken(attr: JSXAttribute): number | null {
+  const value = attr.value
+  if (!value) return null
+  if (value.type === "JSXExpressionContainer") {
+    const expr = value.expression
+    if (
+      expr.type === "NumericLiteral" &&
+      PADDING_SCALE.has(expr.value as number)
+    ) {
+      return expr.value as number
+    }
+  }
+  if (value.type === "StringLiteral") {
+    const mapped = PIXEL_TO_TOKEN[value.value as string]
+    if (mapped !== undefined) return mapped
+  }
+  return null
+}
+
+function isAlreadyValidScaleValue(attr: JSXAttribute): boolean {
+  const value = attr.value
+  if (value?.type !== "JSXExpressionContainer") return false
+  const expr = value.expression
+  if (isScaleNumber(expr)) return true
+  if (expr.type === "ConditionalExpression") {
+    const validBranch = (n: unknown) => isScaleNumber(n) || isNullLiteral(n)
+    return validBranch(expr.consequent) && validBranch(expr.alternate)
+  }
+  return false
+}
+
+const PADDING_SCALE_LIST = [...PADDING_SCALE].join(", ")
+
+const TODO_TEXT =
+  "could not migrate padding automatically; " +
+  `use a Tapestry spacing scale number (${PADDING_SCALE_LIST}) ` +
+  "for Flex padding, or use style={{ padding: ... }} for arbitrary CSS values"
+
+export default attributeTransformFactory({
+  condition: orConditions(
+    hasAttribute("padding"),
+    hasAttribute("paddingHorizontal"),
+    hasAttribute("paddingVertical")
+  ),
+  targetComponent: "StackView",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    let changed = false
+
+    const paddingAttr = getAttribute({ element, name: "padding" })
+    if (paddingAttr) {
+      const token = resolveToSpacingToken(paddingAttr)
+      if (token !== null) {
+        const alreadyCorrect =
+          paddingAttr.value?.type === "JSXExpressionContainer" &&
+          paddingAttr.value.expression.type === "NumericLiteral" &&
+          (paddingAttr.value.expression as { value: number }).value === token
+        if (!alreadyCorrect) {
+          paddingAttr.value = j.jsxExpressionContainer(j.numericLiteral(token))
+          changed = true
+        }
+      } else if (!isAlreadyValidScaleValue(paddingAttr)) {
+        addCommentToAttribute({ attribute: paddingAttr, j, text: TODO_TEXT })
+        changed = true
+      }
+    }
+
+    const horizontalAttr = getAttribute({ element, name: "paddingHorizontal" })
+    if (horizontalAttr) {
+      horizontalAttr.name.name = "paddingInline"
+      const token = resolveToSpacingToken(horizontalAttr)
+      if (token !== null) {
+        const alreadyCorrect =
+          horizontalAttr.value?.type === "JSXExpressionContainer" &&
+          horizontalAttr.value.expression.type === "NumericLiteral" &&
+          (horizontalAttr.value.expression as { value: number }).value === token
+        if (!alreadyCorrect) {
+          horizontalAttr.value = j.jsxExpressionContainer(
+            j.numericLiteral(token)
+          )
+        }
+      } else if (!isAlreadyValidScaleValue(horizontalAttr)) {
+        addCommentToAttribute({ attribute: horizontalAttr, j, text: TODO_TEXT })
+      }
+      changed = true
+    }
+
+    const verticalAttr = getAttribute({ element, name: "paddingVertical" })
+    if (verticalAttr) {
+      verticalAttr.name.name = "paddingBlock"
+      const token = resolveToSpacingToken(verticalAttr)
+      if (token !== null) {
+        const alreadyCorrect =
+          verticalAttr.value?.type === "JSXExpressionContainer" &&
+          verticalAttr.value.expression.type === "NumericLiteral" &&
+          (verticalAttr.value.expression as { value: number }).value === token
+        if (!alreadyCorrect) {
+          verticalAttr.value = j.jsxExpressionContainer(j.numericLiteral(token))
+        }
+      } else if (!isAlreadyValidScaleValue(verticalAttr)) {
+        addCommentToAttribute({ attribute: verticalAttr, j, text: TODO_TEXT })
+      }
+      changed = true
+    }
+
+    return changed
+  },
+})

package/src/components/flex/transforms/setDefaultAxis.test.ts

@@ -71,6 +71,18 @@ export default function Test() {
     expect(applyTransform(input)).toBe(null)
   })
 
+  it("does not inject axis when direction is already present", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView direction="row">Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+
   it("skips elements with spread props", () => {
     const input = `
 import { StackView } from "@planningcenter/tapestry-react"

package/src/components/flex/transforms/setDefaultAxis.ts

@@ -10,6 +10,7 @@ import { attributeTransformFactory } from "../../shared/transformFactories/attri
 const transform: Transform = attributeTransformFactory({
   condition: andConditions(
     notCondition(hasAttribute("axis")),
+    notCondition(hasAttribute("direction")),
     notCondition(hasSpreadProps)
   ),
   targetComponent: "StackView",

package/src/components/flex/transforms/spacingToGap.test.ts

@@ -136,6 +136,93 @@ export default function Test({ spacingProp }) {
     expect(result).not.toContain("gap=")
   })
 
+  it("renames spacing to gap for a ternary with two in-scale numeric branches", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact }) {
+  return <StackView spacing={compact ? 1.5 : 2}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("gap={compact ? 1.5 : 2}")
+    expect(result).not.toContain("spacing")
+  })
+
+  it("renames spacing to gap for a ternary with an undefined pass-through branch", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact }) {
+  return <StackView spacing={compact ? 2 : undefined}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("gap={compact ? 2 : undefined}")
+    expect(result).not.toContain("spacing")
+  })
+
+  it("renames spacing to gap for a ternary with a null pass-through branch", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact }) {
+  return <StackView spacing={compact ? 2 : null}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("gap={compact ? 2 : null}")
+    expect(result).not.toContain("spacing")
+  })
+
+  it("flags a ternary with one off-scale branch with a TODO", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact }) {
+  return <StackView spacing={compact ? 1.5 : 10}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("spacing={compact ? 1.5 : 10}")
+    expect(result).toContain("TODO: tapestry-migration (spacing)")
+    expect(result).not.toContain("gap=")
+  })
+
+  it("flags a ternary with a ReactNode branch with a TODO", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact }) {
+  return <StackView spacing={compact ? 1.5 : <Divider />}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("spacing={compact ? 1.5 : <Divider />}")
+    expect(result).toContain("TODO: tapestry-migration (spacing)")
+    expect(result).not.toContain("gap=")
+  })
+
+  it("renames spacing to gap for a ternary with a dynamic branch, trusting it at runtime", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact, dynamicValue }) {
+  return <StackView spacing={compact ? 1.5 : dynamicValue}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("gap={compact ? 1.5 : dynamicValue}")
+    expect(result).not.toContain("spacing")
+    expect(result).not.toContain("TODO")
+  })
+
   it("respects an aliased StackView import", () => {
     const input = `
 import { StackView as Stack } from "@planningcenter/tapestry-react"

package/src/components/flex/transforms/spacingToGap.ts

@@ -1,12 +1,25 @@
 import { JSXAttribute, Transform } from "jscodeshift"
 
-import { addComment } from "../../shared/actions/addComment"
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
 import { getAttribute } from "../../shared/actions/getAttribute"
 import { hasAttribute } from "../../shared/conditions/hasAttribute"
 import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
 
 const VALID_GAP_VALUES = new Set([0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 7])
 
+const TODO_TEXT =
+  "could not migrate spacing to gap automatically; use a Tapestry spacing scale number (0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 7) for gap, or for ReactNode spacers add explicit margin to the spacer element instead"
+
+function isKnownInvalidBranch(node: unknown): boolean {
+  if (typeof node !== "object" || node === null) return false
+  const typed = node as { type: string; value?: unknown }
+  if (typed.type === "NumericLiteral" && typeof typed.value === "number") {
+    return !VALID_GAP_VALUES.has(typed.value)
+  }
+  if (typed.type === "StringLiteral") return true
+  return typed.type === "JSXElement" || typed.type === "JSXFragment"
+}
+
 function resolveSpacingValue(attribute: JSXAttribute): number | null {
   const value = attribute.value
   if (
@@ -19,24 +32,29 @@ function resolveSpacingValue(attribute: JSXAttribute): number | null {
   return null
 }
 
+function isAlreadyValidTernary(attribute: JSXAttribute): boolean {
+  const value = attribute.value
+  if (value?.type !== "JSXExpressionContainer") return false
+  const expr = value.expression
+  if (expr.type !== "ConditionalExpression") return false
+  return (
+    !isKnownInvalidBranch(expr.consequent) &&
+    !isKnownInvalidBranch(expr.alternate)
+  )
+}
+
 const transform: Transform = attributeTransformFactory({
   condition: hasAttribute("spacing"),
   targetComponent: "StackView",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
+  transform: (element, { j }) => {
     const spacingAttribute = getAttribute({ element, name: "spacing" })
     if (!spacingAttribute) return false
 
     const spacingValue = resolveSpacingValue(spacingAttribute)
 
-    if (spacingValue === null) {
-      addComment({
-        element,
-        j,
-        scope: "spacing",
-        source,
-        text: "could not migrate spacing to gap automatically; use a Tapestry spacing scale number (0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 7) for gap, or for ReactNode spacers add explicit margin to the spacer element instead",
-      })
+    if (spacingValue === null && !isAlreadyValidTernary(spacingAttribute)) {
+      addCommentToAttribute({ attribute: spacingAttribute, j, text: TODO_TEXT })
       return true
     }