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

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

@@ -1,10 +1,11 @@
-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"
 import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { FLEX_START_END_MAP } from "./constants"
 
 const VALID_ALIGN_VALUES = new Set([
   "start",
@@ -23,42 +24,95 @@ const CONSTANT_ALIGN_MAP: Record<string, string> = {
   STRETCH: "stretch",
 }
 
+const TODO_TEXT =
+  "could not migrate alignment to align automatically; convert this value to start, center, end, stretch, or baseline manually"
+
+function normalizeAlignValue(raw: string): string | null {
+  const normalized = FLEX_START_END_MAP[raw] ?? raw
+  return VALID_ALIGN_VALUES.has(normalized) ? normalized : null
+}
+
+type BranchResolution =
+  | { kind: "invalid" }
+  | { kind: "passthrough" }
+  | { kind: "valid"; value: string }
+
+function resolveBranch(node: Expression): BranchResolution {
+  if (node.type === "StringLiteral") {
+    const normalized = normalizeAlignValue(node.value)
+    return normalized !== null
+      ? { kind: "valid", value: normalized }
+      : { kind: "invalid" }
+  }
+  if (node.type === "MemberExpression" && node.property.type === "Identifier") {
+    const mapped = CONSTANT_ALIGN_MAP[node.property.name]
+    if (mapped === undefined) return { kind: "passthrough" }
+    const normalized = normalizeAlignValue(mapped)
+    return normalized !== null
+      ? { kind: "valid", value: normalized }
+      : { kind: "invalid" }
+  }
+  return { kind: "passthrough" }
+}
+
 const transform: Transform = attributeTransformFactory({
   condition: hasAttribute("alignment"),
   targetComponent: "StackView",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
+  transform: (element, { j }) => {
     const alignmentAttribute = getAttribute({ element, name: "alignment" })
     if (!alignmentAttribute) return false
 
+    const value = alignmentAttribute.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)
+        }
+        alignmentAttribute.name.name = "align"
+        return true
+      }
+
+      addCommentToAttribute({
+        attribute: alignmentAttribute,
+        j,
+        text: TODO_TEXT,
+      })
+      return true
+    }
+
     const resolved = resolveConstantAttributeValue({
       attribute: alignmentAttribute,
       constantMap: CONSTANT_ALIGN_MAP,
     })
-    const alignValue =
-      resolved !== null &&
-      (VALID_ALIGN_VALUES.has(resolved) || resolved === "fill")
-        ? resolved
-        : null
 
-    if (alignValue === null) {
-      addComment({
-        element,
+    if (resolved === "fill") {
+      addCommentToAttribute({
+        attribute: alignmentAttribute,
         j,
-        scope: "alignment",
-        source,
-        text: "could not migrate alignment to align automatically; convert this value to start, center, end, stretch, or baseline manually",
+        text: 'alignment="fill" has no Flex equivalent; remove this prop and use expand on the child element instead',
       })
       return true
     }
 
-    if (alignValue === "fill") {
-      addComment({
-        element,
+    const alignValue = resolved !== null ? normalizeAlignValue(resolved) : null
+
+    if (alignValue === null) {
+      addCommentToAttribute({
+        attribute: alignmentAttribute,
         j,
-        scope: "alignment",
-        source,
-        text: 'alignment="fill" has no Flex equivalent; remove this prop and use expand on the child element instead',
+        text: TODO_TEXT,
       })
       return true
     }

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

@@ -0,0 +1,93 @@
+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): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("auditSpreadProps transform", () => {
+  it("adds a comment to StackView with spread props", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView {...props}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain(AUDIT_COMMENT)
+    expect(result).toContain("{...props}")
+  })
+
+  it("adds a comment for each spread", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView {...baseProps} {...extraProps}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    const commentCount = (result?.match(/spreadAttribute/g) || []).length
+    expect(commentCount).toBe(2)
+  })
+
+  it("preserves all other attributes", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="horizontal" spacing={2} {...props}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('axis="horizontal"')
+    expect(result).toContain("spacing={2}")
+    expect(result).toContain("{...props}")
+  })
+
+  describe("no changes scenarios", () => {
+    it("returns null when no spread 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 not imported from tapestry-react", () => {
+      const input = `
+import { StackView } from "some-other-library"
+
+export default function Test() {
+  return <StackView {...props}>Test</StackView>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(null)
+    })
+
+    it("returns null for empty file", () => {
+      expect(applyTransform("")).toBe(null)
+    })
+  })
+})

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

@@ -0,0 +1,6 @@
+import { commentOnSpreadPropsFactory } from "../../shared/transformFactories/commentOnSpreadPropsFactory"
+
+export default commentOnSpreadPropsFactory({
+  targetComponent: "StackView",
+  targetPackage: "@planningcenter/tapestry-react",
+})

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

@@ -101,6 +101,21 @@ export default function Test({ orientation }) {
     expect(result).not.toContain('direction="')
   })
 
+  it("migrates a ternary axis value to a ternary direction value", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis={isNarrow ? "vertical" : "horizontal"}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('direction={isNarrow ? "column" : "row"}')
+    expect(result).not.toContain("axis")
+    expect(result).not.toContain("TODO")
+  })
+
   it("maps an aliased StackView import", () => {
     const input = `
 import { StackView as Stack } from "@planningcenter/tapestry-react"

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

@@ -31,6 +31,32 @@ const transform: Transform = attributeTransformFactory({
     const direction = resolved ? AXIS_DIRECTION_MAP[resolved] : undefined
 
     if (!direction) {
+      const value = axisAttribute.value
+      if (value?.type === "JSXExpressionContainer") {
+        const expr = value.expression
+        if (
+          expr.type === "ConditionalExpression" &&
+          expr.consequent.type === "StringLiteral" &&
+          expr.alternate.type === "StringLiteral"
+        ) {
+          const consequentDir =
+            AXIS_DIRECTION_MAP[expr.consequent.value as string]
+          const alternateDir =
+            AXIS_DIRECTION_MAP[expr.alternate.value as string]
+          if (consequentDir && alternateDir) {
+            axisAttribute.name.name = "direction"
+            axisAttribute.value = j.jsxExpressionContainer(
+              j.conditionalExpression(
+                expr.test,
+                j.stringLiteral(consequentDir),
+                j.stringLiteral(alternateDir)
+              )
+            )
+            return true
+          }
+        }
+      }
+
       addComment({
         element,
         j,

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

@@ -0,0 +1,4 @@
+export const FLEX_START_END_MAP: Record<string, string> = {
+  "flex-end": "end",
+  "flex-start": "start",
+}

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

@@ -0,0 +1,147 @@
+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("moves a margin style prop to a style object", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView marginTop={2}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toMatchInlineSnapshot(`
+      "import { StackView } from "@planningcenter/tapestry-react"
+
+      export default function Test() {
+        return (
+          <StackView style={{
+            marginTop: "16px"
+          }}>Test</StackView>
+        );
+      }"
+    `)
+  })
+
+  it("moves a padding style prop to a style object (splitStyles expands shorthand)", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView paddingTop={2}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toMatchInlineSnapshot(`
+      "import { StackView } from "@planningcenter/tapestry-react"
+
+      export default function Test() {
+        return (
+          <StackView style={{
+            paddingTop: "16px"
+          }}>Test</StackView>
+        );
+      }"
+    `)
+  })
+
+  it("migrates non-excluded style props while leaving excluded Flex props in place", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView gap={2} marginTop={2}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toMatchInlineSnapshot(`
+      "import { StackView } from "@planningcenter/tapestry-react"
+
+      export default function Test() {
+        return (
+          <StackView gap={2} style={{
+            marginTop: "16px"
+          }}>Test</StackView>
+        );
+      }"
+    `)
+  })
+
+  it("leaves Flex first-class props untouched", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView gap={2} padding={1} direction="row" wrap="wrap" alignSelf="center" columnGap={1} basis="100%" grow={1} shrink={0}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+
+  it.each(["grow", "shrink", "basis"] as const)(
+    "leaves %s untouched and emits no TODO",
+    (prop) => {
+      const value = prop === "basis" ? '"100%"' : "{1}"
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView ${prop}=${value}>Test</StackView>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(null)
+    }
+  )
+
+  it("leaves axis/alignment/distribution/spacing for the dedicated rename transforms", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="horizontal" alignment="center" distribution="center" spacing={2}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(null)
+  })
+
+  it("returns null when there are no style props 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 marginTop={2}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+})

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

@@ -0,0 +1,23 @@
+import { stylePropTransformFactory } from "../../shared/transformFactories/stylePropTransformFactory"
+
+const FLEX_PROP_NAMES = [
+  "alignItems",
+  "alignSelf",
+  "basis",
+  "columnGap",
+  "direction",
+  "flex",
+  "gap",
+  "grow",
+  "justifyContent",
+  "padding",
+  "shrink",
+  "wrap",
+]
+
+export default stylePropTransformFactory({
+  stylesToExclude: FLEX_PROP_NAMES,
+  stylesToRemove: [],
+  targetComponent: "StackView",
+  targetPackage: "@planningcenter/tapestry-react",
+})

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

@@ -0,0 +1,202 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./cssFlexAliasesToProps"
+
+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("cssFlexAliasesToProps transform", () => {
+  it("renames flexGrow to grow", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView flexGrow={1}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("grow={1}")
+    expect(result).not.toContain("flexGrow")
+  })
+
+  it("renames flexShrink to shrink", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView flexShrink={0}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("shrink={0}")
+    expect(result).not.toContain("flexShrink")
+  })
+
+  it("renames flexBasis to basis", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView flexBasis="0%">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('basis="0%"')
+    expect(result).not.toContain("flexBasis")
+  })
+
+  it("handles all three together", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView flexGrow={1} flexShrink={0} flexBasis="auto">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("grow={1}")
+    expect(result).toContain("shrink={0}")
+    expect(result).toContain('basis="auto"')
+    expect(result).not.toContain("flexGrow")
+    expect(result).not.toContain("flexShrink")
+    expect(result).not.toContain("flexBasis")
+  })
+
+  it("renames flexDirection to direction", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView flexDirection="row">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('direction="row"')
+    expect(result).not.toContain("flexDirection")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("renames flexWrap to wrap", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView flexWrap="wrap">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('wrap="wrap"')
+    expect(result).not.toContain("flexWrap")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("migrates justifyContent to justify with value normalization", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView justifyContent="flex-start">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify="start"')
+    expect(result).not.toContain("justifyContent")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("migrates justifyContent center without normalization", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView justifyContent="center">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify="center"')
+    expect(result).not.toContain("TODO")
+  })
+
+  it("adds a TODO for an unmappable justifyContent value", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView justifyContent="stretch">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO")
+    expect(result).toContain("justifyContent")
+  })
+
+  it("adds a TODO for a dynamic justifyContent value", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView justifyContent={myVar}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO")
+  })
+
+  it("migrates alignItems to align with value normalization", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView alignItems="flex-end">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('align="end"')
+    expect(result).not.toContain("alignItems")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("adds a TODO for an unmappable alignItems value", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView alignItems="space-between">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO")
+    expect(result).toContain("alignItems")
+  })
+
+  it("returns null when StackView has none of the CSS alias props", () => {
+    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 flexGrow={1}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+})