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

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)
+  })
+})

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/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)
+  })
+})