@planningcenter/tapestry-migration-cli 3.6.0 → 3.6.1-qa-1035.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/unsupportedProps.test.ts

@@ -0,0 +1,141 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./unsupportedProps"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string {
+  const fileInfo = { path: "test.tsx", source }
+  return (
+    (transform(
+      fileInfo,
+      { j, jscodeshift: j, report: () => {}, stats: () => {} },
+      {}
+    ) as string | null) || source
+  )
+}
+
+describe("unsupportedProps transform", () => {
+  describe("flags removed props", () => {
+    it("flags visible", () => {
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView visible={isOpen}>Test</StackView>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (visible)")
+    })
+
+    it("flags variants", () => {
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView variants={["elevated"]}>Test</StackView>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (variants)")
+    })
+
+    it("flags multiple unsupported props", () => {
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView visible={isOpen} variants={["elevated"]}>Test</StackView>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (visible)")
+      expect(result).toContain("TODO: tapestry-migration (variants)")
+    })
+  })
+
+  describe("does not flag supported props", () => {
+    it("does not flag valid Flex layout props", () => {
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView direction="row" gap={2} align="center" justify="space-between" wrap="wrap">Test</StackView>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(input)
+    })
+
+    it("does not flag Flex sizing and responsive props", () => {
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView expand responsive={{ md: { direction: "row" } }} paddingBlock={2} alignSelf="center" columnGap={1}>Test</StackView>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(input)
+    })
+
+    it("does not flag props with dedicated transforms that may remain when values cannot be resolved", () => {
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis={someVar} alignment={a} distribution={d} spacing={s} mediaQueries={mq}>Test</StackView>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(input)
+    })
+
+    it("does not flag className, style, ref", () => {
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView className="my-stack" style={{ color: "red" }} ref={ref}>Test</StackView>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(input)
+    })
+
+    it("does not flag aria-* and data-* attributes", () => {
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView aria-label="Content" data-pendo="stack">Test</StackView>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(input)
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("returns source unchanged when not from tapestry-react", () => {
+      const input = `
+import { StackView } from "some-other-library"
+
+export default function Test() {
+  return <StackView visible={true}>Test</StackView>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(input)
+    })
+
+    it("returns source unchanged for empty file", () => {
+      expect(applyTransform("")).toBe("")
+    })
+  })
+})

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

@@ -0,0 +1,17 @@
+import { FLEX_SUPPORTED_PROPS } from "../../shared/helpers/unsupportedPropsHelpers"
+import { unsupportedPropsFactory } from "../../shared/transformFactories/unsupportedPropsFactory"
+
+export default unsupportedPropsFactory({
+  commentNotes: (prop) => {
+    if (prop === "visible") {
+      return "\n * `visible` is not supported in Flex. Conditionally render the element instead.\n"
+    }
+    if (prop === "variants") {
+      return "\n * `variants` is not supported in Flex.\n"
+    }
+    return ""
+  },
+  supportedProps: FLEX_SUPPORTED_PROPS,
+  targetComponent: "StackView",
+  targetPackage: "@planningcenter/tapestry-react",
+})

package/src/components/shared/helpers/unsupportedPropsHelpers.ts

@@ -233,3 +233,44 @@ export const DROPDOWN_LINK_SUPPORTED_PROPS = [
   "href",
   "to",
 ]
+
+// StackView props that have dedicated transforms. When a transform cannot resolve
+// a value at codemod time, it leaves the prop name unchanged and adds a TODO.
+// Listing them here prevents unsupportedPropsFactory from adding a second TODO.
+export const FLEX_IGNORE_PROPS = [
+  "alignItems",
+  "alignment",
+  "axis",
+  "distribution",
+  "flex",
+  "justifyContent",
+  "mediaQueries",
+  "spacing",
+]
+
+export const FLEX_SPECIFIC_PROPS = [
+  "align",
+  "alignSelf",
+  "as",
+  "basis",
+  "columnGap",
+  "direction",
+  "expand",
+  "gap",
+  "grow",
+  "inline",
+  "justify",
+  "padding",
+  "paddingBlock",
+  "paddingInline",
+  "responsive",
+  "rowGap",
+  "shrink",
+  "wrap",
+]
+
+export const FLEX_SUPPORTED_PROPS = [
+  ...COMMON_PROPS,
+  ...FLEX_IGNORE_PROPS,
+  ...FLEX_SPECIFIC_PROPS,
+]

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

@@ -120,6 +120,53 @@ describe("stylePropTransformFactory", () => {
         }} />"
       `)
     })
+
+    it("converts negative numeric margin props through the spacing scale", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box margin={-1} marginTop={-2} marginLeft={-0.5} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box
+          style={{
+            marginTop: "-16px",
+            marginRight: "-8px",
+            marginBottom: "-8px",
+            marginLeft: "-4px"
+          }} />"
+      `)
+    })
+
+    it("converts negative numeric margin longhand props through the spacing scale", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box marginTop={-1} marginBottom={-2} marginLeft={-3} marginRight={-4} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box
+          style={{
+            marginTop: "-8px",
+            marginRight: "-32px",
+            marginBottom: "-16px",
+            marginLeft: "-24px"
+          }} />"
+      `)
+    })
+  })
+
+  describe("stylesToExclude", () => {
+    const transform = stylePropTransformFactory({
+      stylesToExclude: ["gap"],
+      stylesToRemove: [],
+      targetComponent: "Box",
+      targetPackage: "@planningcenter/tapestry-react",
+    })
+
+    it("leaves excluded props untouched while migrating others", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box gap={2} marginTop={2} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box gap={2} style={{
+          marginTop: "16px"
+        }} />"
+      `)
+    })
   })
 
   describe("value-transforming aliases", () => {