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

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

@@ -0,0 +1,106 @@
+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"
+import { FLEX_START_END_MAP } from "./constants"
+
+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/dedupeAttributes.test.ts

@@ -0,0 +1,120 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./dedupeAttributes"
+
+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("dedupeAttributes transform", () => {
+  it("keeps the last of two duplicate attributes and drops the earlier one", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView direction="row" direction="column">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('direction="column"')
+    expect(result?.match(/direction=/g)).toHaveLength(1)
+    expect(result).toContain("TODO: tapestry-migration (direction)")
+    expect(result).toContain("duplicate direction prop")
+  })
+
+  it("keeps the last of three duplicate attributes and drops the earlier ones", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView align="start" align="center" align="end">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('align="end"')
+    expect(result?.match(/align=/g)).toHaveLength(1)
+    expect(result).toContain("TODO: tapestry-migration (align)")
+  })
+
+  it("dedupes multiple different duplicated attribute names independently", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView direction="row" direction="column" align="start" align="end">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result?.match(/direction=/g)).toHaveLength(1)
+    expect(result?.match(/align=/g)).toHaveLength(1)
+    expect(result).toContain('direction="column"')
+    expect(result).toContain('align="end"')
+  })
+
+  it("preserves other non-duplicate attributes untouched", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView direction="row" direction="column" gap={2}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("gap={2}")
+    expect(result?.match(/direction=/g)).toHaveLength(1)
+  })
+
+  it("ignores spread attributes", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView {...props} direction="row" direction="column">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("{...props}")
+    expect(result?.match(/direction=/g)).toHaveLength(1)
+  })
+
+  it("returns null when there are no duplicate attributes", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView direction="row" 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 direction="row" direction="column">Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+
+  it("returns null for an empty file", () => {
+    expect(applyTransform("")).toBe(null)
+  })
+})

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

@@ -0,0 +1,49 @@
+import { JSXAttribute } from "jscodeshift"
+
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+export default attributeTransformFactory({
+  targetComponent: "StackView",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const attrs = element.openingElement.attributes ?? []
+    const byName = new Map<string, JSXAttribute[]>()
+
+    for (const attr of attrs) {
+      if (attr.type !== "JSXAttribute") continue
+      if (attr.name.type !== "JSXIdentifier") continue
+      const name = attr.name.name
+      const group = byName.get(name)
+      if (group) {
+        group.push(attr)
+      } else {
+        byName.set(name, [attr])
+      }
+    }
+
+    let changed = false
+
+    for (const [name, group] of byName) {
+      if (group.length < 2) continue
+
+      const kept = group[group.length - 1]
+      const dropped = group.slice(0, -1)
+
+      for (const attr of dropped) {
+        const idx = attrs.indexOf(attr)
+        attrs.splice(idx, 1)
+      }
+
+      addCommentToAttribute({
+        attribute: kept,
+        j,
+        text: `duplicate ${name} prop after migration — an earlier ${name} value was dropped in favor of this one; verify this is correct`,
+      })
+
+      changed = true
+    }
+
+    return changed
+  },
+})

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

@@ -114,6 +114,65 @@ export default function Test() {
     expect(result).not.toContain("StackView.SPACE_EVENLY")
   })
 
+  it("migrates a ternary with a valid string branch and an undefined pass-through branch", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact }) {
+  return <StackView distribution={compact ? 'center' : undefined}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify={compact ? "center" : undefined}')
+    expect(result).not.toContain("distribution")
+  })
+
+  it("migrates a ternary with two valid string branches", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact }) {
+  return <StackView distribution={compact ? 'center' : 'start'}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify={compact ? "center" : "start"}')
+    expect(result).not.toContain("distribution")
+  })
+
+  it("migrates 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 distribution={compact ? 'center' : dynamicValue}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify={compact ? "center" : dynamicValue}')
+    expect(result).not.toContain("distribution")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("flags a ternary with a fill branch and leaves it in place", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact }) {
+  return <StackView distribution={compact ? 'center' : 'fill'}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("distribution={compact ? 'center' : 'fill'}")
+    expect(result).toContain("TODO: tapestry-migration (distribution)")
+    expect(result).not.toContain('justify="')
+    expect(result).not.toContain("justify={")
+  })
+
   it("flags distribution={StackView.FILL} with a TODO and leaves it in place", () => {
     const input = `
 import { StackView } from "@planningcenter/tapestry-react"

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

@@ -1,6 +1,6 @@
-import { Transform } from "jscodeshift"
+import { Expression, Transform } from "jscodeshift"
 
-import { addComment } from "../../shared/actions/addComment"
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
 import { getAttribute } from "../../shared/actions/getAttribute"
 import { resolveConstantAttributeValue } from "../../shared/actions/resolveConstantAttributeValue"
 import { hasAttribute } from "../../shared/conditions/hasAttribute"
@@ -23,45 +23,94 @@ const CONSTANT_DISTRIBUTION_MAP: Record<string, string> = {
   START: "start",
 }
 
+const TODO_TEXT =
+  "could not migrate distribution to justify automatically; convert this value to start, center, end, space-between, or space-evenly manually"
+
+function resolveJustifyValue(raw: string): string | null {
+  return VALID_JUSTIFY_VALUES.has(raw) ? raw : null
+}
+
+type BranchResolution =
+  | { kind: "invalid" }
+  | { kind: "passthrough" }
+  | { kind: "valid"; value: string }
+
+function resolveBranch(node: Expression): BranchResolution {
+  if (node.type === "StringLiteral") {
+    const value = resolveJustifyValue(node.value)
+    return value !== null ? { kind: "valid", value } : { kind: "invalid" }
+  }
+  if (node.type === "MemberExpression" && node.property.type === "Identifier") {
+    const mapped = CONSTANT_DISTRIBUTION_MAP[node.property.name]
+    if (mapped === undefined) return { kind: "passthrough" }
+    const value = resolveJustifyValue(mapped)
+    return value !== null ? { kind: "valid", value } : { kind: "invalid" }
+  }
+  return { kind: "passthrough" }
+}
+
 const transform: Transform = attributeTransformFactory({
   condition: hasAttribute("distribution"),
   targetComponent: "StackView",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
+  transform: (element, { j }) => {
     const distributionAttribute = getAttribute({
       element,
       name: "distribution",
     })
     if (!distributionAttribute) return false
 
+    const value = distributionAttribute.value
+
+    if (
+      value?.type === "JSXExpressionContainer" &&
+      value.expression.type === "ConditionalExpression"
+    ) {
+      const conditional = value.expression
+      const consequent = resolveBranch(conditional.consequent as Expression)
+      const alternate = resolveBranch(conditional.alternate as Expression)
+
+      if (consequent.kind !== "invalid" && alternate.kind !== "invalid") {
+        if (consequent.kind === "valid") {
+          conditional.consequent = j.stringLiteral(consequent.value)
+        }
+        if (alternate.kind === "valid") {
+          conditional.alternate = j.stringLiteral(alternate.value)
+        }
+        distributionAttribute.name.name = "justify"
+        return true
+      }
+
+      addCommentToAttribute({
+        attribute: distributionAttribute,
+        j,
+        text: TODO_TEXT,
+      })
+      return true
+    }
+
     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,
+    if (resolved === "fill") {
+      addCommentToAttribute({
+        attribute: distributionAttribute,
         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",
+        text: 'distribution="fill" has no Flex equivalent; remove this prop and use expand on the child elements instead',
       })
       return true
     }
 
-    if (distributionValue === "fill") {
-      addComment({
-        element,
+    const distributionValue =
+      resolved !== null ? resolveJustifyValue(resolved) : null
+
+    if (distributionValue === null) {
+      addCommentToAttribute({
+        attribute: distributionAttribute,
         j,
-        scope: "distribution",
-        source,
-        text: 'distribution="fill" has no Flex equivalent; remove this prop and use expand on the child elements instead',
+        text: TODO_TEXT,
       })
       return true
     }

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

@@ -0,0 +1,172 @@
+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("expands flex={2} into grow={2} shrink={1} basis='0'", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView flex={2}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("grow={2}")
+    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)
+  })
+})