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

package/src/components/flex/index.test.ts

@@ -0,0 +1,291 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./index"
+
+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("flex orchestrator", () => {
+  it("applies setDefaultAxis through the chain", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('<Flex direction="column">Test</Flex>')
+    expect(result).not.toContain("axis")
+  })
+
+  it("applies axisToDirection through the chain", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="horizontal">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('<Flex direction="row">Test</Flex>')
+    expect(result).not.toContain("axis")
+  })
+
+  it("applies alignmentToAlign through the chain", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="horizontal" alignment="center">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('align="center"')
+    expect(result).not.toContain("alignment")
+  })
+
+  it("applies distributionToJustify through the chain", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="horizontal" distribution="center">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify="center"')
+    expect(result).not.toContain("distribution")
+  })
+
+  it("applies spacingToGap through the chain", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="horizontal" spacing={2}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("gap={2}")
+    expect(result).not.toContain("spacing")
+  })
+
+  it("applies innerRefToRef through the chain", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="horizontal" innerRef={myRef}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("ref={myRef}")
+    expect(result).not.toContain("innerRef")
+  })
+
+  it("applies paddingPropsToFlex through the chain", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="horizontal" padding="8px" paddingHorizontal="16px">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("padding={1}")
+    expect(result).toContain("paddingInline={2}")
+    expect(result).not.toContain('padding="8px"')
+    expect(result).not.toContain("paddingHorizontal")
+  })
+
+  it("applies flexPropToExpand through the chain — flex={1} becomes 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")
+  })
+
+  it('applies flexPropToExpand through the chain — flex="1 0 0" becomes grow/shrink/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=")
+  })
+
+  it("applies mediaQueriesToResponsive through the chain", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="horizontal" mediaQueries={{ md: { axis: "vertical" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).toContain('direction: "column"')
+    expect(result).not.toContain("mediaQueries=")
+  })
+
+  it("applies cssFlexAliasesToProps through the chain — flexDirection does not produce a double direction prop", () => {
+    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?.match(/direction=/g)).toHaveLength(1)
+  })
+
+  it("applies cssFlexAliasesToProps through the chain — unmappable justifyContent stays as JSX prop with TODO, not in style={{}}", () => {
+    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")
+    expect(result).not.toContain("style={{")
+  })
+
+  it("applies cssFlexAliasesToProps through the chain — flexGrow/flexShrink/flexBasis become Flex props", () => {
+    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")
+    expect(result).not.toContain("style={{")
+  })
+
+  it("applies convertStyleProps through the chain", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="horizontal" marginTop={2}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("style={{")
+    expect(result).toContain("marginTop:")
+    expect(result).not.toContain("marginTop={2}")
+  })
+
+  it("applies unsupportedProps through the chain", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="horizontal" visible={isOpen}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration (visible)")
+  })
+
+  it("applies auditSpreadProps through the chain", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="horizontal" {...props}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration (spreadAttribute)")
+    expect(result).toContain("{...props}")
+  })
+
+  it("applies moveFlexImport through the chain", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="horizontal">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('import { Flex } from "@planningcenter/tapestry"')
+    expect(result).not.toContain("StackView")
+    expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+  })
+
+  it("returns null when there is nothing to transform", () => {
+    const input = `
+import { Flex } from "@planningcenter/tapestry"
+
+export default function Test() {
+  return <Flex>Test</Flex>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+
+  it("returns null for an empty file", () => {
+    expect(applyTransform("")).toBe(null)
+  })
+
+  it("does not throw for arbitrary source", () => {
+    expect(() =>
+      applyTransform(
+        `import React from "react"\nexport default function Noop() { return <div /> }`
+      )
+    ).not.toThrow()
+  })
+})

package/src/components/flex/index.ts

@@ -0,0 +1,54 @@
+import { Transform } from "jscodeshift"
+
+import alignmentToAlign from "./transforms/alignmentToAlign"
+import auditSpreadProps from "./transforms/auditSpreadProps"
+import axisToDirection from "./transforms/axisToDirection"
+import convertStyleProps from "./transforms/convertStyleProps"
+import cssFlexAliasesToProps from "./transforms/cssFlexAliasesToProps"
+import distributionToJustify from "./transforms/distributionToJustify"
+import flexPropToExpand from "./transforms/flexPropToExpand"
+import innerRefToRef from "./transforms/innerRefToRef"
+import mediaQueriesToResponsive from "./transforms/mediaQueriesToResponsive"
+import moveFlexImport from "./transforms/moveFlexImport"
+import paddingPropsToFlex from "./transforms/paddingPropsToFlex"
+import setDefaultAxis from "./transforms/setDefaultAxis"
+import spacingToGap from "./transforms/spacingToGap"
+import unsupportedProps from "./transforms/unsupportedProps"
+
+const transform: Transform = (fileInfo, api, options) => {
+  let currentSource = fileInfo.source
+  let hasAnyChanges = false
+
+  const transforms = [
+    cssFlexAliasesToProps,
+    setDefaultAxis,
+    paddingPropsToFlex,
+    flexPropToExpand,
+    axisToDirection,
+    alignmentToAlign,
+    distributionToJustify,
+    spacingToGap,
+    innerRefToRef,
+    mediaQueriesToResponsive,
+    convertStyleProps,
+    unsupportedProps,
+    auditSpreadProps,
+    moveFlexImport,
+  ]
+
+  for (const individualTransform of transforms) {
+    const result = individualTransform(
+      { ...fileInfo, source: currentSource },
+      api,
+      options
+    )
+    if (result && result !== currentSource) {
+      currentSource = result as string
+      hasAnyChanges = true
+    }
+  }
+
+  return hasAnyChanges ? currentSource : null
+}
+
+export default transform

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

@@ -0,0 +1,185 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./alignmentToAlign"
+
+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("alignmentToAlign transform", () => {
+  it("renames alignment to align", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView alignment="center">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('align="center"')
+    expect(result).not.toContain("alignment")
+  })
+
+  it("resolves StackView.CENTER constant to align", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView alignment={StackView.CENTER}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('align="center"')
+    expect(result).not.toContain("alignment")
+    expect(result).not.toContain("StackView.CENTER")
+  })
+
+  it("resolves StackView.START constant to align", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView alignment={StackView.START}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('align="start"')
+    expect(result).not.toContain("StackView.START")
+  })
+
+  it("resolves StackView.END constant to align", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView alignment={StackView.END}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('align="end"')
+    expect(result).not.toContain("StackView.END")
+  })
+
+  it("resolves StackView.STRETCH constant to align", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView alignment={StackView.STRETCH}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('align="stretch"')
+    expect(result).not.toContain("StackView.STRETCH")
+  })
+
+  it("resolves StackView.BASELINE constant to align", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView alignment={StackView.BASELINE}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('align="baseline"')
+    expect(result).not.toContain("StackView.BASELINE")
+  })
+
+  it("flags alignment={StackView.FILL} with a TODO and leaves it in place", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView alignment={StackView.FILL}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("alignment={StackView.FILL}")
+    expect(result).toContain("TODO: tapestry-migration (alignment)")
+    expect(result).not.toContain('align="')
+  })
+
+  it('flags alignment="fill" with a TODO and leaves it in place', () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView alignment="fill">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('alignment="fill"')
+    expect(result).toContain("TODO: tapestry-migration (alignment)")
+    expect(result).not.toContain('align="')
+  })
+
+  it("flags a dynamic alignment value with a TODO", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ alignProp }) {
+  return <StackView alignment={alignProp}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("alignment={alignProp}")
+    expect(result).toContain("TODO: tapestry-migration (alignment)")
+    expect(result).not.toContain('align="')
+  })
+
+  it("respects an aliased StackView import", () => {
+    const input = `
+import { StackView as Stack } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Stack alignment="center">Test</Stack>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('align="center"')
+    expect(result).not.toContain("alignment")
+  })
+
+  it("returns null when there is no alignment 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 alignment="center">Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+})

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

@@ -0,0 +1,73 @@
+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_ALIGN_VALUES = new Set([
+  "start",
+  "center",
+  "end",
+  "stretch",
+  "baseline",
+])
+
+const CONSTANT_ALIGN_MAP: Record<string, string> = {
+  BASELINE: "baseline",
+  CENTER: "center",
+  END: "end",
+  FILL: "fill",
+  START: "start",
+  STRETCH: "stretch",
+}
+
+const transform: Transform = attributeTransformFactory({
+  condition: hasAttribute("alignment"),
+  targetComponent: "StackView",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const alignmentAttribute = getAttribute({ element, name: "alignment" })
+    if (!alignmentAttribute) return false
+
+    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,
+        j,
+        scope: "alignment",
+        source,
+        text: "could not migrate alignment to align automatically; convert this value to start, center, end, stretch, or baseline manually",
+      })
+      return true
+    }
+
+    if (alignValue === "fill") {
+      addComment({
+        element,
+        j,
+        scope: "alignment",
+        source,
+        text: 'alignment="fill" has no Flex equivalent; remove this prop and use expand on the child element instead',
+      })
+      return true
+    }
+
+    alignmentAttribute.name.name = "align"
+    alignmentAttribute.value = j.stringLiteral(alignValue)
+
+    return true
+  },
+})
+
+export default transform

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