@planningcenter/tapestry-migration-cli 3.5.0 → 3.6.1-qa-1035.0

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

@@ -0,0 +1,110 @@
+import { JSXAttribute } from "jscodeshift"
+
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { transformAttributeName } from "../../shared/actions/transformAttributeName"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { orConditions } from "../../shared/conditions/orConditions"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const FLEX_START_END_MAP: Record<string, string> = {
+  "flex-end": "end",
+  "flex-start": "start",
+}
+
+const VALID_JUSTIFY_VALUES = new Set([
+  "start",
+  "center",
+  "end",
+  "space-between",
+  "space-evenly",
+])
+
+const VALID_ALIGN_VALUES = new Set([
+  "start",
+  "center",
+  "end",
+  "stretch",
+  "baseline",
+])
+
+function getStringValue(attr: JSXAttribute): string | null {
+  const { value } = attr
+  if (value?.type === "StringLiteral") return value.value
+  if (
+    value?.type === "JSXExpressionContainer" &&
+    value.expression.type === "StringLiteral"
+  )
+    return value.expression.value
+  return null
+}
+
+export default attributeTransformFactory({
+  condition: orConditions(
+    hasAttribute("alignItems"),
+    hasAttribute("flexBasis"),
+    hasAttribute("flexDirection"),
+    hasAttribute("flexGrow"),
+    hasAttribute("flexShrink"),
+    hasAttribute("flexWrap"),
+    hasAttribute("justifyContent")
+  ),
+  targetComponent: "StackView",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, options }) => {
+    let changed = false
+
+    if (transformAttributeName("flexBasis", "basis", { element, j, options }))
+      changed = true
+    if (
+      transformAttributeName("flexDirection", "direction", {
+        element,
+        j,
+        options,
+      })
+    )
+      changed = true
+    if (transformAttributeName("flexGrow", "grow", { element, j, options }))
+      changed = true
+    if (transformAttributeName("flexShrink", "shrink", { element, j, options }))
+      changed = true
+    if (transformAttributeName("flexWrap", "wrap", { element, j, options }))
+      changed = true
+
+    const justifyAttr = getAttribute({ element, name: "justifyContent" })
+    if (justifyAttr) {
+      const raw = getStringValue(justifyAttr)
+      const normalized = raw !== null ? (FLEX_START_END_MAP[raw] ?? raw) : null
+      if (normalized !== null && VALID_JUSTIFY_VALUES.has(normalized)) {
+        justifyAttr.name.name = "justify"
+        justifyAttr.value = j.stringLiteral(normalized)
+      } else {
+        addCommentToAttribute({
+          attribute: justifyAttr,
+          j,
+          text: `could not migrate to justify automatically; valid values are: ${[...VALID_JUSTIFY_VALUES].join(", ")}`,
+        })
+      }
+      changed = true
+    }
+
+    const alignAttr = getAttribute({ element, name: "alignItems" })
+    if (alignAttr) {
+      const raw = getStringValue(alignAttr)
+      const normalized = raw !== null ? (FLEX_START_END_MAP[raw] ?? raw) : null
+      if (normalized !== null && VALID_ALIGN_VALUES.has(normalized)) {
+        alignAttr.name.name = "align"
+        alignAttr.value = j.stringLiteral(normalized)
+      } else {
+        addCommentToAttribute({
+          attribute: alignAttr,
+          j,
+          text: `could not migrate to align automatically; valid values are: ${[...VALID_ALIGN_VALUES].join(", ")}`,
+        })
+      }
+      changed = true
+    }
+
+    return changed
+  },
+})

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

@@ -0,0 +1,214 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./distributionToJustify"
+
+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("distributionToJustify transform", () => {
+  it("renames distribution to justify", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <StackView distribution="start">
+      <StackView distribution="center">
+        <StackView distribution="end">
+          <StackView distribution="space-between">
+            <StackView distribution="space-evenly">Test</StackView>
+          </StackView>
+        </StackView>
+      </StackView>
+    </StackView>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify="start"')
+    expect(result).toContain('justify="center"')
+    expect(result).toContain('justify="end"')
+    expect(result).toContain('justify="space-between"')
+    expect(result).toContain('justify="space-evenly"')
+    expect(result).not.toContain("distribution")
+  })
+
+  it("resolves StackView.CENTER constant to justify", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView distribution={StackView.CENTER}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify="center"')
+    expect(result).not.toContain("distribution")
+    expect(result).not.toContain("StackView.CENTER")
+  })
+
+  it("resolves StackView.START constant to justify", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView distribution={StackView.START}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify="start"')
+    expect(result).not.toContain("StackView.START")
+  })
+
+  it("resolves StackView.END constant to justify", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView distribution={StackView.END}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify="end"')
+    expect(result).not.toContain("StackView.END")
+  })
+
+  it("resolves StackView.SPACE_BETWEEN constant to justify", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView distribution={StackView.SPACE_BETWEEN}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify="space-between"')
+    expect(result).not.toContain("StackView.SPACE_BETWEEN")
+  })
+
+  it("resolves StackView.SPACE_EVENLY constant to justify", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView distribution={StackView.SPACE_EVENLY}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify="space-evenly"')
+    expect(result).not.toContain("StackView.SPACE_EVENLY")
+  })
+
+  it("flags distribution={StackView.FILL} with a TODO and leaves it in place", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView distribution={StackView.FILL}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("distribution={StackView.FILL}")
+    expect(result).toContain("TODO: tapestry-migration (distribution)")
+    expect(result).not.toContain('justify="')
+  })
+
+  it('flags distribution="fill" with a TODO and leaves it in place', () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView distribution="fill">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('distribution="fill"')
+    expect(result).toContain("TODO: tapestry-migration (distribution)")
+    expect(result).not.toContain('justify="')
+  })
+
+  it("flags an unrecognized string literal with a TODO", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView distribution="space-around">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('distribution="space-around"')
+    expect(result).toContain("TODO: tapestry-migration (distribution)")
+    expect(result).not.toContain('justify="')
+  })
+
+  it("flags a dynamic distribution value with a TODO", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ distributionProp }) {
+  return <StackView distribution={distributionProp}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("distribution={distributionProp}")
+    expect(result).toContain("TODO: tapestry-migration (distribution)")
+    expect(result).not.toContain('justify="')
+  })
+
+  it("respects an aliased StackView import", () => {
+    const input = `
+import { StackView as Stack } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Stack distribution="center">Test</Stack>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify="center"')
+    expect(result).not.toContain("distribution")
+  })
+
+  it("returns null when there is no distribution to migrate", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView>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 distribution="center">Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+})

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

@@ -0,0 +1,76 @@
+import { Transform } from "jscodeshift"
+
+import { addComment } from "../../shared/actions/addComment"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { resolveConstantAttributeValue } from "../../shared/actions/resolveConstantAttributeValue"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const VALID_JUSTIFY_VALUES = new Set([
+  "start",
+  "center",
+  "end",
+  "space-between",
+  "space-evenly",
+])
+
+const CONSTANT_DISTRIBUTION_MAP: Record<string, string> = {
+  CENTER: "center",
+  END: "end",
+  FILL: "fill",
+  SPACE_BETWEEN: "space-between",
+  SPACE_EVENLY: "space-evenly",
+  START: "start",
+}
+
+const transform: Transform = attributeTransformFactory({
+  condition: hasAttribute("distribution"),
+  targetComponent: "StackView",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const distributionAttribute = getAttribute({
+      element,
+      name: "distribution",
+    })
+    if (!distributionAttribute) return false
+
+    const resolved = resolveConstantAttributeValue({
+      attribute: distributionAttribute,
+      constantMap: CONSTANT_DISTRIBUTION_MAP,
+    })
+    const distributionValue =
+      resolved !== null &&
+      (VALID_JUSTIFY_VALUES.has(resolved) || resolved === "fill")
+        ? resolved
+        : null
+
+    if (distributionValue === null) {
+      addComment({
+        element,
+        j,
+        scope: "distribution",
+        source,
+        text: "could not migrate distribution to justify automatically; convert this value to start, center, end, space-between, or space-evenly manually",
+      })
+      return true
+    }
+
+    if (distributionValue === "fill") {
+      addComment({
+        element,
+        j,
+        scope: "distribution",
+        source,
+        text: 'distribution="fill" has no Flex equivalent; remove this prop and use expand on the child elements instead',
+      })
+      return true
+    }
+
+    distributionAttribute.name.name = "justify"
+    distributionAttribute.value = j.stringLiteral(distributionValue)
+
+    return true
+  },
+})
+
+export default transform

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

@@ -0,0 +1,156 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./flexPropToExpand"
+
+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("flexPropToExpand transform", () => {
+  it("converts flex={1} to expand", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView flex={1}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("expand")
+    expect(result).not.toContain("flex")
+    expect(result).not.toContain("TODO")
+  })
+
+  it('converts flex="1" to expand', () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView flex="1">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("expand")
+    expect(result).not.toContain("flex")
+    expect(result).not.toContain("TODO")
+  })
+
+  it('expands flex="1 1 0" into grow, shrink, and basis', () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView flex="1 1 0">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("grow={1}")
+    expect(result).toContain("shrink={1}")
+    expect(result).toContain('basis="0"')
+    expect(result).not.toContain("flex")
+    expect(result).not.toContain("TODO")
+  })
+
+  it('expands flex="1 0 0%" into grow, shrink, and basis', () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView flex="1 0 0%">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("grow={1}")
+    expect(result).toContain("shrink={0}")
+    expect(result).toContain('basis="0%"')
+    expect(result).not.toContain("flex")
+    expect(result).not.toContain("TODO")
+  })
+
+  it('expands flex="0 0 auto" into grow, shrink, and basis', () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView flex="0 0 auto">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("grow={0}")
+    expect(result).toContain("shrink={0}")
+    expect(result).toContain('basis="auto"')
+    expect(result).not.toContain("flex")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("expands flex={0} into grow={0} shrink={1} basis='0'", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView flex={0}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("grow={0}")
+    expect(result).toContain("shrink={1}")
+    expect(result).toContain('basis="0"')
+    expect(result).not.toContain("flex=")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("adds a TODO for a dynamic flex value", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView flex={flexValue}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO")
+    expect(result).toContain("flex={flexValue}")
+  })
+
+  it('adds a TODO for flex="auto"', () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView flex="auto">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO")
+  })
+
+  it("returns null when StackView has no flex prop", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView gap={2}>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 flex={1}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+})

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

@@ -0,0 +1,100 @@
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+function parseFlexShorthand(
+  value: string
+): { basis: string; grow: number; shrink: number } | null {
+  const parts = value.trim().split(/\s+/)
+  if (parts.length !== 3) return null
+
+  const grow = Number(parts[0])
+  const shrink = Number(parts[1])
+  const basis = parts[2]
+
+  if (!Number.isFinite(grow) || !Number.isFinite(shrink)) return null
+
+  return { basis, grow, shrink }
+}
+
+const TODO_TEXT =
+  "could not migrate flex automatically; use grow, shrink, basis, or expand individually"
+
+export default attributeTransformFactory({
+  condition: hasAttribute("flex"),
+  targetComponent: "StackView",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const flexAttr = getAttribute({ element, name: "flex" })
+    if (!flexAttr) return false
+
+    const value = flexAttr.value
+    const attrs = element.openingElement.attributes
+
+    // flex={1} or flex="1" → expand
+    const isExpandValue =
+      (value?.type === "JSXExpressionContainer" &&
+        value.expression.type === "NumericLiteral" &&
+        (value.expression as { value: number }).value === 1) ||
+      (value?.type === "StringLiteral" &&
+        (value as { value: string }).value === "1")
+
+    if (isExpandValue) {
+      const idx = attrs.indexOf(flexAttr)
+      attrs.splice(idx, 1, j.jsxAttribute(j.jsxIdentifier("expand")))
+      return true
+    }
+
+    // flex={0} → grow={0} shrink={1} basis="0"
+    if (
+      value?.type === "JSXExpressionContainer" &&
+      value.expression.type === "NumericLiteral" &&
+      (value.expression as { value: number }).value === 0
+    ) {
+      const idx = attrs.indexOf(flexAttr)
+      attrs.splice(
+        idx,
+        1,
+        j.jsxAttribute(
+          j.jsxIdentifier("grow"),
+          j.jsxExpressionContainer(j.numericLiteral(0))
+        ),
+        j.jsxAttribute(
+          j.jsxIdentifier("shrink"),
+          j.jsxExpressionContainer(j.numericLiteral(1))
+        ),
+        j.jsxAttribute(j.jsxIdentifier("basis"), j.stringLiteral("0"))
+      )
+      return true
+    }
+
+    // flex="N N basis" → grow={N} shrink={N} basis="X"
+    if (value?.type === "StringLiteral") {
+      const parsed = parseFlexShorthand((value as { value: string }).value)
+      if (parsed) {
+        const idx = attrs.indexOf(flexAttr)
+        attrs.splice(
+          idx,
+          1,
+          j.jsxAttribute(
+            j.jsxIdentifier("grow"),
+            j.jsxExpressionContainer(j.numericLiteral(parsed.grow))
+          ),
+          j.jsxAttribute(
+            j.jsxIdentifier("shrink"),
+            j.jsxExpressionContainer(j.numericLiteral(parsed.shrink))
+          ),
+          j.jsxAttribute(
+            j.jsxIdentifier("basis"),
+            j.stringLiteral(parsed.basis)
+          )
+        )
+        return true
+      }
+    }
+
+    addCommentToAttribute({ attribute: flexAttr, j, text: TODO_TEXT })
+    return true
+  },
+})